微信小程序 on 我的博客https://blog.suoyiran.tech/categories/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/Recent content from 我的博客Hugozh-CN本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！Sun, 21 Apr 2019 13:23:42 +0800小程序火力全开--wxs应用https://blog.suoyiran.tech/post/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%81%AB%E5%8A%9B%E5%85%A8%E5%BC%80--wxs%E5%BA%94%E7%94%A8/Sun, 21 Apr 2019 13:23:42 +0800https://blog.suoyiran.tech/post/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%81%AB%E5%8A%9B%E5%85%A8%E5%BC%80--wxs%E5%BA%94%E7%94%A8/ 小程序火力全开--wxs应用

作者：前端老李（）

小程序代码片段: https://developers.weixin.qq.com/s/wLqNVcm57s6A

场景描述

如果有过 Vue 开发经验，相信在小程序开发过程中体会到了种种不方便，我前几天遇到一个很简单的问题，把时间戳成用户可读的格式，比如 155216232488 为 2019-02-15 15:37:12，其实这个很简单，网上一搜一大堆，但是如果我们拿到了一个小说的对象比如下面这样的数据结构

本文2019-04-21首发于我的博客，最后修改于2019-04-21

]]>微信小程序图片懒加载组件https://blog.suoyiran.tech/post/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD%E7%BB%84%E4%BB%B6/Sun, 10 Mar 2019 10:41:00 +0800https://blog.suoyiran.tech/post/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD%E7%BB%84%E4%BB%B6/ 图片懒加载组件

作者：前端老李（）

代码片段地址

可直接点击链接在微信开发者工具上查看 https://developers.weixin.qq.com/s/JwRyKEmp7i5U

效果预览图

建议使用微信开发者工具直接打开上面的代码片段查看效果

起步

小程序图片的懒加载只能在page或scrollView中使用，通过阅读小程序api，发现一个createIntersectionObserver接口此处是介绍文档，他可以监听某个页面元素在视口的位置，这样我们就可以监听图片组件是否进入了用户视线中，进入之后再去加载网络图片，实现懒加载的功能。

本文2019-03-10首发于我的博客，最后修改于2019-03-10

]]>微信小程序仿VueRouter写小程序的路由守卫https://blog.suoyiran.tech/post/%E4%BB%BFvuerouter%E5%86%99%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9A%84%E8%B7%AF%E7%94%B1%E5%AE%88%E5%8D%AB/Wed, 27 Feb 2019 14:53:09 +0800https://blog.suoyiran.tech/post/%E4%BB%BFvuerouter%E5%86%99%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9A%84%E8%B7%AF%E7%94%B1%E5%AE%88%E5%8D%AB/ 仿VueRouter写小程序的路由守卫

作者：前端老李（）

小程序代码片段: wechatide://minicode/80h6lemI7c3Y

涉及到的知识点

getCurrentPages()、Object.defineProperty()

基本描述

本功能可以让小程序开发者有对路由跳转进行控制的能力，跳转前可以做一些判断，比如用户的授权信息之类的（具体看业务需求），在跳转后可能主要是一些日志或埋点工作（具体看业务需求）

本文2019-02-27首发于我的博客，最后修改于2019-02-27

]]>微信小程序小程序Promise不支持finally解决方案https://blog.suoyiran.tech/post/%E5%B0%8F%E7%A8%8B%E5%BA%8Fpromise%E4%B8%8D%E6%94%AF%E6%8C%81finally%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/Sat, 12 Jan 2019 09:05:23 +0800https://blog.suoyiran.tech/post/%E5%B0%8F%E7%A8%8B%E5%BA%8Fpromise%E4%B8%8D%E6%94%AF%E6%8C%81finally%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/ 小程序Promise不支持finally解决方案

作者：前端老李（）

代码片段

点击链接即可在微信开发者工具中查看代码wechatide://minicode/t2eidemj7P3X

基本思路

小程序的Promise是不支持finally方法的，这样有一些操作就不太方便玩了，比如hideLoading，总不能在resolve和reject写两遍吧，这样不优雅。其实稍微有些经验的前端开发工程师都清楚，如果一个东西原生不支持，可以引入他的polyfill库，小程序上也是从这个思路出发的，不过小程序有两个比较坑的地方，就是我们取不到全局变量，换句话说就是直接console.log(this),结果是undefined。

本文2019-01-12首发于我的博客，最后修改于2019-01-12

]]>微信小程序小程序自定义头部导航栏https://blog.suoyiran.tech/post/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%87%AA%E5%AE%9A%E4%B9%89%E5%A4%B4%E9%83%A8%E5%AF%BC%E8%88%AA%E6%A0%8F/Thu, 06 Dec 2018 14:31:23 +0800https://blog.suoyiran.tech/post/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%87%AA%E5%AE%9A%E4%B9%89%E5%A4%B4%E9%83%A8%E5%AF%BC%E8%88%AA%E6%A0%8F/ 小程序自定义头部导航栏

作者：前端老李（）

背景

我们在小程序开发过程中是否对小程序头部导航栏有过抱怨，比如文字颜色只支持black/white，或者我们想加个返回首页的按钮，让通过分享进入二级页面的用户能够轻松地返回首页。又或者我们想加一些其他个性化的样式等等；这些都需要我们去自定义头部导航栏。

本文2018-12-06首发于我的博客，最后修改于2018-12-06

]]>微信小程序小程序自定义tabBar再探索https://blog.suoyiran.tech/post/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%87%AA%E5%AE%9A%E4%B9%89tabbar%E5%86%8D%E6%8E%A2%E7%B4%A2/Fri, 02 Nov 2018 13:23:01 +0800https://blog.suoyiran.tech/post/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%87%AA%E5%AE%9A%E4%B9%89tabbar%E5%86%8D%E6%8E%A2%E7%B4%A2/ 小程序自定义tabBar再探索

作者：前端老李（）

19年9月7日更新日志

在微信客户端7.0.5版本，小程序基础库版本2.8.0+中，__wxConfig.tabBar.list.item这个对象，不再包含iconPath和selectedIconPage字段，之前的代码实现中，是依赖这两个字段的，所以可能引起问题：图标不显示，解决方案：

本文2018-11-02首发于我的博客，最后修改于2018-11-02

]]>微信小程序微信小程序自定义底部导航栏组件https://blog.suoyiran.tech/post/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%87%AA%E5%AE%9A%E4%B9%89%E5%BA%95%E9%83%A8%E5%AF%BC%E8%88%AA%E6%A0%8F/Wed, 17 Oct 2018 10:48:58 +0800https://blog.suoyiran.tech/post/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%87%AA%E5%AE%9A%E4%B9%89%E5%BA%95%E9%83%A8%E5%AF%BC%E8%88%AA%E6%A0%8F/ 微信小程序自定义底部导航栏组件

作者：前端老李（）

代码片段地址

可直接点击链接在微信开发者工具上查看 wechatide://minicode/d3Cfrfmi7L3v

效果预览图

此预览图是作者通过底部导航栏实现的效果并不是本代码的效果

起步

目前大部分小程序是有底部导航栏的，用户可以通过底部导航栏进入不同业务的页面，小程序实际上是可以通过简单的配置实现一个这样的东西(app.json)，简单使用的够用的，不过如果想进行更多的骚操作(比如通过判断用户身份，展示不同的导航，突出中间的导航栏引导用户点击…)，就需要自己自定义了。

本文2018-10-17首发于我的博客，最后修改于2018-10-17

]]>微信小程序