写在前面的话 大家看到这个文章时一定会感觉这是在炒剩饭，社区中已经有那么多分享自定义导航适配的文章了，为什么我还要再写一个呢？ 主要原因就是，社区中大部分的适配方案中给出的大小是不精确的，并不能完美适配各种场景。 社区中大部分文章给到的值是 iOS -> 44px , Android -> 48px 思路 正常来讲，iOS和Android下的胶囊按钮的位置以及大小都是相同且不变的，我们可以通过胶囊按钮的位置和大小再配合 wx.getSystemInfo 或者 wx.getSystemInfoSync 中得到的 [代码]statusBarHeight[代码] 来计算出导航栏的位置和大小。 小程序提供了一个获取菜单按钮（右上角胶囊按钮）的布局位置信息的API，可以通过这个API获取到胶囊按钮的位置信息，但是经过实际测试，这个接口目前存在BUG，得到的值经常是错误的（通过特殊手段可以偶尔拿到正确的值），这个接口目前是无法使用的，等待官方修复吧。 下面是我经过实际测试得到的准确数据： 真机和开发者工具模拟器上的胶囊按钮不一样 [代码]# iOS top 4px right 7px width 87px height 32px # Android top 8px right 10px width 95px height 32px # 开发者工具模拟器（iOS） top 6px right 10px width 87px height 32px # 开发者工具模拟器（Android） top 8px right 10px width 87px height 32px [代码] [代码]top[代码] 的值是从 [代码]statusBarHeight[代码] 作为原点开始计算的。 使用上面数据中胶囊按钮的高度加 [代码]top[代码] * 2 上再加上 [代码]statusBarHeight[代码] 的高度就可以得到整个导航栏的高度了。 为什么 [代码]top[代码] * 2 ？因为胶囊按钮是垂直居中在 title 那一栏中的，上下都要有边距。 扩展 通过胶囊按钮的 [代码]right[代码] 可以准确的算出自定义导航的 [代码]左边距[代码]。 通过胶囊按钮的 [代码]right[代码] + [代码]width[代码] 可以准确的算出自定义导航的 [代码]右边距[代码] 。 通过 wx.getSystemInfo 或者 wx.getSystemInfoSync 中得到的 [代码]windowWidth[代码] - 胶囊按钮的 [代码]right[代码] + [代码]width[代码] 可以准确的算出自定义导航的 [代码]width[代码] 。 再扩展 wx.getSystemInfo 或者 wx.getSystemInfoSync 中得到的 [代码]statusBarHeight[代码] 每个机型都不一样，刘海屏得到的数据也是准确的。 如果是自定义整个页面，iPhone X系列的刘海屏，底部要留 [代码]68px[代码] ，不要问我为什么！ 代码片段 https://developers.weixin.qq.com/s/Q79g6kmo7w5J

首屏 一般情况下，在首屏数据未拿到之前，为了提升用户的体验，会在页面上展示一个loading的图层，类似下面这个 [图片] 其中除了菊花图以外网上还流传这各种各样的loading动画，在PC端上几乎要统一江湖了，不过最近在移动端上面看到不同于菊花图的加载方式，就是这篇文章需要分享的Skeleton Screen，中文称之为"骨架屏" 概念 A skeleton screen is essentially a blank version of a page into which information is gradually loaded. 在H5中，骨架屏其实已经不是什么新奇的概念了，网上也有各种方案生成对应的骨架屏，包括我们经常使用的知乎、饿了么、美团等APP都有应用骨架屏这个概念 图片来源网络，侵删 [图片] 方案 先从H5生成骨架屏方案开始说起，总的来说H5生成骨架屏的方案有2种 完全靠手写HTML和CSS方式给每个页面定制一套骨架屏 利用预渲染的方式生成静态骨架屏 第一套方案，毫无疑问是最简单最直白的方式，缺点也很明显，假如页面布局有修改的话，那么除了修改业务代码之外还需要额外修改骨架屏，增加了维护的成本。 第二套方案，一定程度上改善了第一套方案带来的维护成本增加的缺点，主要还是使用工具预渲染页面，获取到DOM节点和样式，保留页面结构，覆盖样式，生成灰色块盖在原有文本、图片或者是canvas等节点上面，最后将生成的HTML和CSS打包出来，就是一个带有骨架屏的页面。最后再利用webpack工具将生成的骨架屏插入到HTML里面，详细的话可以看看饿了么的分享，这里就不多描述了。 调研了下H5生成骨架屏的方案，对于小程序生成骨架屏的方案也有了一个大致的想法，主要有2个难点需要实现 预渲染 获取节点 预渲染 再说回饿了么提供的骨架屏的方案，使用 puppeteer 渲染页面（或者使用服务端渲染，vue或者react都有提供相应的方案），拿到DOM节点和样式，这里有一点需要注意的是，页面的渲染是需要初始化的数据，数据的来源可以是初始化的data（vue）或者mock数据，当然小程序是无法直接使用 puppeteer 来做预渲染（有另外的方案可以实现），需要利用小程序初始化的 data + template 渲染之后得到一个初始化结构作为骨架屏的结构 [代码]//index.js Page({ data: { motto: 'Hello World', userInfo: { avatarUrl: 'https://wx.qlogo.cn/mmopen/vi_32/SYiaiba5faeraYBoQCWdsBX4hSjFKiawzhIpnXjejDtjmiaFqMqhIlRBqR7IVdbKE51npeF6X1cXxtDQD2bzehgqMA/132', nickName: 'jay' }, lists: [ 'aslkdnoakjbsnfkajbfk', 'qwrwfhbfdvndgndghndeghsdfh', 'qweqwtefhfhgmjfgjdfghaefdhsdfgdfh', ], showSkeleton: true }, onLoad: function () { const that = this; setTimeout(() => { that.setData({ showSkeleton: false }) }, 3000) } }) //index.wxml <view class="container"> <view class="userinfo"> <block> <image class="userinfo-avatar skeleton-radius" src="{{userInfo.avatarUrl}}" mode="cover"></image> <text class="userinfo-nickname skeleton-rect">{{userInfo.nickName}}</text> </block> </view> <view style="margin: 20px 0"> <view wx:for="{{lists}}" class="lists"> <icon type="success" size="20" class="list skeleton-radius"/> <text class="skeleton-rect">{{item}}</text> </view> </view> <view class="usermotto"> <text class="user-motto skeleton-rect">{{motto}}</text> </view> <view style="margin-top: 200px;"> aaaaaaaaaaa </view> </view> [代码] 有了上面的 data + template 之后，就有了一个初始化的页面结构，接下来就需要拿到节点信息 节点 小程序基础库1.4.0之后小程序基础库提供了一组新的API，可用于获取节点信息，具体API戳这里。 跟H5方式一样，根据class或者id获取节点信息，不同的是只能获取到当前的节点信息，无法获取到其父或者子节点信息，所以只能手动给需要渲染骨架屏的节点添加相应的class或者id [代码]<view class="container"> <view class="userinfo"> <block> <image class="userinfo-avatar skeleton-radius" src="{{userInfo.avatarUrl}}" mode="cover"></image> <text class="userinfo-nickname skeleton-rect">{{userInfo.nickName}}</text> </block> </view> <view style="margin: 20px 0"> <view wx:for="{{lists}}" class="lists"> <icon type="success" size="20" class="list skeleton-radius"/> <text class="skeleton-rect">{{item}}</text> </view> </view> <view class="usermotto"> <text class="user-motto skeleton-rect">{{motto}}</text> </view> <view style="margin-top: 200px;"> aaaaaaaaaaa </view> </view> [代码] 约定2个特殊的class作为获取节点信息的标记[代码]skeleton-rect[代码]和[代码]skeleton-radius[代码]，在页面中获取相应的[代码]top[代码]、[代码]left[代码]、[代码]width[代码]、[代码]height[代码]进行骨架屏的绘制 结果 [图片] 具体的调用方式和源码，请看 github ，最后求start 总结 上文有说到小程序也可以使用 page-skeleton-webpack-plugin 方式一样生成骨架屏，最重要的一点就是需要将小程序跑在chrome上面，后面的流程就一样了，至于怎么将小程序跑在chrome上面呢？可以利用 wept ，缺点就是目前作者已经停止维护这个工具了，不支持新版小程序的API。 说回来我这个生成骨架屏的方案，其实跟 page-skeleton-webpack-plugin 有点相似，不同的是，page-skeleton-webpack-plugin 采用离线渲染的方式生成静态骨架屏插入路由中，而我采用运行时先渲染页面默认结构，然后根据默认结构再绘制骨架屏。从性能角度出发确实不如 page-skeleton-webpack-plugin，但是也差不了多少了，主要还是小程序并没有提供类似服务端渲染的方案。目前从使用上来讲，还是有点小麻烦，需要默认数据撑开页面结构，需要给相应的节点添加class，后面有时间再研究下有没有更好的方案吧~~~

1、域名必须是HTTPS 小程序后台配置的域名，有服务器域名、业务域名、消息推送域名、普通二维码域名，前三者必须是HTTPS域名，普通二维码域名可以是HTTP域名 2、input组件placeholder字体颜色 写在placeholder-class里面的color并不生效，需要写在placeholder-style里面就可以了 3、wx.navigateTo跳转不生效？ 带有tabbar的页面，必须使用wx.switchTab进行跳转 4、tabbar在切换时页面数据无法刷新 tabbar的实现可能是显示和隐藏view，所以，不会一直调用page.onLoad()方法，可以尝试把代码逻辑写在page.onShow()里面，或者在onTabItemTap方法中处理 5、如何获取shareTickets（可以解密微信群ID） 获取shareTickets需要在app.onLaunch或者app.onShow里面才能获取到，而不是page.onShow，请一定要注意。 注：建议在app.onShow里面去获取，app.onLaunch不是一直会执行 6、getPhoneNumber获取手机号 目前该接口针对非个人开发者，且完成了认证的小程序开放。个人开发者是没办法调用这个API的 7、wx.previewImage图片预览 预览的图片URL必须是HTTPS开头，不能是本地图片 8、wx.playVoice音频播放 必须保证音频文件已经在本地，比如在wx.startRecord后，可以获取到本地临时的tempPath。或者提前调用wx.downloadFile来下载资源文件，然后再播放 9、API老版本兼容 可以用wx.canIUse或者wx.getSystemInfoSync来获取version和SDKversion进行判断，老版本给出相应提示即可 10、获取系统信息 wx.getSystemInfo，可得到系统语言、屏幕宽高、微信版本号、操作系统、设备像素比、客户端甚础库版本等信息 11、如何去掉自定义button灰色的圆角边框 主要是button的伪元素设置了样式，去掉即可： button::after{ display: none;} 12、回到页面顶部 回到页面顶部，有两种方式： 1、使用scroll-view设置为纵向滚动，然后设置scroll-top值； 2、使用wx.pageScrollTo方法，此方法是1.4.0开始支持，所以要做低版本兼容； 13、textarea是APP的原生组件，层级最高 这是个大坑，在有textarea的页面，不要做弹出框设计，建议在输入大段文本时，单独成一个新页面。 14、image组件底部有间隙 image组件默认底部会有间隙，可以设置为块元素（display: block），也可以设置vertical-align: top; 15、一段文字如何换行 小程序中唯一可以实现换行的标签组件是text 注：text中不支持<br>，只能使用\n进行换行 16、设置最外层标签的margin-bottom在IOS下不生效 margin-bottom在安卓和开发工具里面都正常，就是在IOS下不起效，建议改成padding-bottom 17、小程序中canvas的图片不支持base64格式 base64格式图片，在开发工具里面可以正常显示，真机上没有显示。建议修改成带https开头的url形式 18、删除体验版，仍然有缓存？ 开发过程中，可能会遇到，删除小程序的体验版，但是缓存依然存在。建议把开发版和线上版都删除，因为小程序缓存是共用的。 19、开发者工具无法复制、粘贴代码 开发者工具中，经常会遇到无法复制、粘贴、搜索代码，有时还会出现，在A文件输入，内部跑到了B文件中，大写的尴尬。遇到这种情况，建议重启微信开发者工作。 20、小程序告警群 小程序后台可以查看所有错误信息，但是，为了方便第一时间了解错误报警，建议使用官方“客户端告警群”，如下图。告警的阀值，可以自己设置。 [图片] [图片] [图片]

1、wx.setStorageSync和wx.getStorageSync报错问题 为什么说这个问题，是因为这个API确实会报错，并且调用越频繁，报错会越多，先看一下截图： [图片] 所以，怀疑微信官方API也有出错的机率，这里没有根治的办法，只能做一些缓解报错次数的办法：减少调用频次，不要在公用方法里面去频繁调用set和get本地缓存；添加try catch，出错之后，可以再调用一次或多次，减少报错的可能性~ **2、picker下拉列表为什么获取不到长度 ** [图片] 如上图，如果是设置了key的数组，会发现，此时的array的length是0，这可能是小程序的一个bug，length只能自己处理了~ 3、如何获取音频文件的长度 如果调用的是新API，wx.createInnerAudioContext可以直接获取duration；如果是低版本，调用wx.startRecord方法时，只能自己写个计数器来处理duration了。 在部分机型上会有个蛋痛的问题，自己写个定时器，和微信内部录音的时间对不上，当录音600秒（十分钟）时，会相关1~3秒。并且在部分安卓手机上，InnerAudioContext.stop()不会自动调用，需要手动去调用stop 4、如何获取微信群名称？ 小程序中是没办法直接获取到微信群名称，只有一种方法获取open-gid，然后再通过open-data组件来显示群名称： <open-data type=“groupName” open-gid=“xxxxxx”></open-data> open-gid的获取方法： 用户把小程序分享到微信群，会在分享成功后返回shareTickets(因为可以分享到多个群，所以这里是一个数组); 如果用户是从群内点击的小程序卡片，会在小程序的app.onshow里面获取了shareTicket。拿到shareTicket后，再到服务端解密，就可以拿到open-gid~ 5、小程序最多支持多少个节点？ 小程序可以理解为，被微信包装了一层的H5，页面会有最大节点，建议不要在页面做无限翻页，或者超大数据渲染，这些都可能导致小程序崩溃（如果内存不够时，微信优先杀掉小程序）。 [图片] 节点数过多时，就直接报错了：invokeWebviewMethod 数据传输长度为 1233778 已经超过最大长度 1048576 1048576是个神奇的数字，大家可以自行百度~ 待续…

一、获取formId 相信使用过小程序的同学，多少都收到过小程序的通过消息，如下： [图片] [图片] 这类通知消息，是和好友消息一样展示在微信的聊天列表中，所以，点击率还是比较高的。想实现这种小程序的模板消息，就必须要获取用户的formid才可以（如何发消息，请仔细查阅小程序官方文档） 我们来说一下如何获取formId： a、必须通过form组件提交才能获取到formId; b、给form组件设置report-submit="true"属性; c、给form组件添加bindsubmit事件绑定，携带 form 中的数据触发 submit 事件，event.detail = {value : {‘name’: ‘value’} , formId: ‘’}; d、必须用户手动触发提交表单，不能JS模拟提交，所以，页面上必须要有提交按钮; 看一下示例代码： <form report-submit=‘true’ bindsubmit=‘userSubmit’> <button class=‘button’ bindtap=‘copy’ form-type=‘submit’>复制</button> </form> 以上示例就可以在userSubmit里获取到formId了： userSubmit: function (e) { console.log(e.detail.formId); }, 需要注意一点，开发工具里面是没办法查看到真实的formId的，会是这样一句提示"the formId is a mock one"，提交给服务端就可以拿到了~ 最暴力的方式：整个页面最外层套一个button，点击页面任何地方，都可以获取到formId 二、区分转发的是群聊还是好友 这个其实就是场景值的判断，先看一张图： [图片] 上图可以看出，从好友聊天窗口和群聊窗口点击小程序卡片后，场景值是不一样的，分别是1007和1008，所以，我们可以在app的onLuanch或者onShow方法中去获取到scene值，这样就能知道用户是通过哪种方式进入小程序的~ 之前分享成功，可以获取群ID，这种方式已经被微信官方禁掉了。可以看这篇文章： 三、有哪些开源的小程序框架 wepy wepy是最早推出的一款小程序框架，基于vue进行封装，作者龚澄是腾讯的工程师，早期集累了很多习惯使用vue进行开发的小程序人员。github地址：https://github.com/Tencent/wepy mpvue mpvue也是一个使用 Vue.js 开发小程序的前端框架，美团点评下的一个部门开发的，有胡成全带队开发。github地址：https://github.com/Meituan-Dianping/mpvue taro Taro 是由京东 - 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。统于有一款使用React语法开发小程序的框架了，github地址：https://github.com/NervJS/taro 以上三个框架，都有自己的官方交流群，大家可以添加对应的小助手，然后会自动拉你进群。

一、判断小程序版本号 小程序的API是不断更新的，你可能使用某个API时，文档里会说明，此API在1.x.x版本开始支持，需要自己做兼容处理。 如果你使用小程序版本号做兼容，就必须了解小程序的基础库版本号规则，在这里介绍一下。 小程序基础库版本号使用 semver 规范，格式为 Major.Minor.Patch，Major、Minor、Patch 均为整数，1.9.901、2.44.322、10.32.44 都是符合 semver 风格的版本号。 以下是官方提供的兼容代码： [图片] 二、设置仅发起者可转发 有些场景，需要仅发起者可转发，参与者不能转发。比如老师上课点名签到，老师如果把签到小程序分享到群内，只希望现场的同学可以正常签到，即使其他同学想分享，也没有权限。 方法一：禁止显示分享按钮 小程序中有个API，wx.hideShareMenu，如下： [图片] 在page.js中，正常写入onShareAppMessage，然后判断用户是否为发起者，如果是发起者，调用wx.showShareMenu，如果不是发起者，调用wx.hideShareMenu。 方法二：单独做一个分享后的页面 这个办法比较low，但也能实现。思路是在onShareAppMessage里面的写入一个默认path，打开之后就是一个提示界面。如果是发起者，就把path修改成正常的路径~ [图片] 三、swiper禁止手动滑动 最简单的方式，在swiper上面加一个透明的蒙层~ 四、使用switchTab跳转后页面不刷新的问题 方法一：通过getCurrentPages获取获取当前的页面栈，调用对应的方法 [图片] switchTab成功跳转后调用success，此时可以拿到跳转后页面的page对象，从而调用页面onLoad方法重载页面; 方法二：把还tab的页面，代码逻辑放在onShow里面 [图片] 五、e.target和e.currentTarget的区别 简单的说，e.currentTarge是指注册了事件监听器的对象，e.target是指对象里的子对象，实际触发这个事件的对象。 [图片] 小程序开发过程中，如果通过event未获取到值时，或许是你自己用错了。 六、图片设置为圆角，会快速从方形闪烁一下 解决方法：给父元素设置圆角，或者给图片添加透明边框 七、input中使用手写输入法的坑 之前总有“报名工具”的小程序用户反馈，说是报名内容都输入完整了，但是保存不完整。 经排查，发现所有使用手写输入法的用户，都会遇到这现象。排查代码发现绑定的input事件，用户如果不点击手写输入法上的确认键，就不会触发bindinput。 这种情况下，有两种解决方式： 1、改用event.detail.value的形式来获取form表单数据； 2、再添加一个bindblur事件，保证事件能够正常执行； 因报名工具小程序中，有用户自定义字段，所以不确定用户会添加多少个字段，使用event获取的话，需要给每个input添加一个name属性，相对比较费劲，我改用了第二种方案。 [图片] 八、IOS下用户授权后，头像和昵称显示问题 这个问题其实是图片src是一个data中的变量，然后这个变量又发生了变化。但是在IOS设备上，就是没办法显示更改后的图片。（或者编辑图文投票时，也会有这现象） 解决办法：通过wx:if和wx:else判断，展示不同的image组件 [图片] 九、一键退出（隐藏）小程序 首先要说，这个需求不合理，右上角有退出按钮，但既然有同学问这问题，我也自己折腾了一下，基本可以实现一键退出。 先在每个page中添加隐藏page的方法： [图片] 有退出button的页面，对应的JS添加方法： [图片] 虽然可以实现，但也很low，其实就是隐藏了所有的page而已~

getCurrentPages()的用法 getCurrentPages()是个好东西，今天来说说他的用法。 先看看官方文档： [路由 · 小程序]：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html [图片] getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。 简单说，就是可以获取到当前小程序的页面栈 那么，获取到页面栈，有什么用处呢？ 1、判断页面栈是否超过10级，超过10级，将不能打开新页面(主要是不用用navigateTo方式打开)。 2、可以修改某个页面栈的data数据，或者方法。 这里给大家分享一个实际应用场景：仅发起者可分享。 有些投票、通知、抽奖、签到等，发起者会在私密的圈子内进行，比如，仅会员群才能参与的抽奖、公司内部的通知公告、班级内部的投票等。发起者是不希望别人分享出去，那么小程序里面要怎么做？ 说到分享，在小程序内，应该是想到onShareAppMessage这个方法。只要page.js中有这个方法，不管你是否在内部写了代码逻辑，小程序默认就是可以分享的，如果没有这个方法，小程序右上角的“…”就不会出现“转发”的选项。 问题是，是否允许分享，一般都是小程序内的一个开关设置项，可以看下图： [图片] 用户在加载内容时，需要先从服务端获取到这个开关状态，再决定是否出现“转发”的选项。 此时，我们默认不给page添加onShareAppMessage方法，这样，你转发出去的小程序卡片，别人将无法通过长按进行分享（群聊无法长按分享，私聊还是个坑，看下图）。 [图片] [图片] 然后再动态设置当前page的onShareAppMessage方法，用this，或者getCurrentPages()都能解决，看下图： [图片] 目前私聊的卡片，长按依然可以转发，似乎不是很完美，但是，功能基本实现了。 如果想让私聊卡片的转发无效，你也可以变通一下，比如做个限群成员可见功能，即使私聊卡片被转发，可以判断小程序场景值，不展示内容即可~ 1、用wx.getLaunchOptionsSync() 获取小程序启动时的参数： [图片] 2、判断群聊和私聊的场景值： [图片] 3、如果是微信私聊中打开，给用户提示即可~ [图片] 欢迎各位一起讨论技术问题：mianhuabingbei

相信各位在开发的时候应该有遇到这样一个场景，比如商品的图片浏览，有时图片的浏览会很大，多的时候达几百张或上千张，这样就需要swiper里需要很多swiper-item，如此一来渲染的时候就会很消耗性能，渲染时会有一大段的空白时间，有时还会造成卡顿，体验非常差，下面给大家介绍一下我的解决方案。 首先是wxml结构： [图片] js： [图片] [图片] 主要是利用current属性，swiper里面只放3个swiper-item，要显示的图片放在第二，第一和第三放的是加载的动画背景，步骤如下： 将请求到的数据存入一个数组picListAll内，这里不需要setData，只需要在data外面定义一个变量就行了，以减少渲染性能； 把要显示的图片路径赋值给picUrl； 切换的时候根据bindchange获取current属性，当current改变时判断当前图片在picListAll的index，根据index拿到图片再赋值给picUrl； 主要实现步骤就是以上3 步，比较简单，要注意的是当切换到第一张和最后一张的时候要判断一下，把loding动画去掉，请求的时候还可以传入index参数以显示不同的图片，方便从前一页点击图片进入到此页面时能定位到该图片，例子里我是自己mock数据的，只是为了展示，如果你有服务器的话可以弄几百张看看效果，对比直接渲染和用以上方式渲染的差异。当然,这只是我的解决方案,如果各位有更好的方案欢迎一起讨论,一起进步。 完整代码：https://github.com/HaveYuan/swiper

有了云开发我们不仅可以方便的获取到用户的openid，还可以通过云开发的数据库来存储用户信息，进而实现小程序用户的登陆与注册功能。 本节知识点 1，云开发的使用 2，云函数的使用 3，云数据库的使用 4，用户登陆 5，用户注册 涉及到三个页面 1，登陆页面 [图片] 2，注册页面 [图片] 3，登陆成功 [图片] 下面来看具体的代码实现 一，注册页面实现 1,register.wxml [代码]<!--pages/register/register.wxml--> <input class='input' placeholder='请输入用户名' bindinput='inputName'></input> <input class='input' placeholder='请输入密码' bindinput='inputPassword'></input> <input class='input' placeholder='请输入电话' bindinput='inputPhone'></input> <input class='input' placeholder='请输入地址' bindinput='inputAddress'></input> <button class='button' type='primary' bindtap='register'>注册</button> [代码] 2,register.js 需要注意的是我们注册时需要使用到云开发数据库，在使用云开发数据库之前还需要初始化云开发，代码里都有注释 [代码]// pages/register/register.js let app = getApp(); // 获取数据库引用 const db = wx.cloud.database(); const userListDB = db.collection('userlist'); let name = null; let password = null; let phone = null; let address = null; Page({ /** * 页面的初始数据 */ data: { }, //输入用户名 inputName(evnet) { name = evnet.detail.value; }, //输入密码 inputPassword(evnet) { password = evnet.detail.value; }, //输入手机号 inputPhone(evnet) { phone = evnet.detail.value; }, //输入地址 inputAddress(evnet) { address = evnet.detail.value; }, //注册 register() { let that = this; if (!app.checkNamePassword(name, password)) { return; } if (!app.checkPhoneAddress(phone, address)) { return; } //查询用户是否已经注册 userListDB.where({ _openid: app.globalData.openid // 填入当前用户 openid }).get({ success: function(res) { let userInfos = res.data; console.log(res.data) if (userInfos && userInfos.length > 0) { let user = userInfos[0]; if (user && user.name) { wx.showModal({ title: '提示', content: '您已注册，确定要更新账号密码吗？', success: function(res) { if (res.confirm) { console.log('用户点击确定') that.saveuserinfo(); } } }) } } else { that.saveuserinfo(); } } }) }, saveuserinfo() { let that = this; userListDB.doc('_openid').set({ data: { name: name, password: password, phone: phone, address: address } }).then(res => { app.showTips('注册成功'); }) }, }) [代码] 3，在app.js里初始化云开发 下面的prod-8aa9a5就是我们云开发的环境id [代码]//app.js App({ onLaunch: function() { //云开发初始化 wx.cloud.init({ env: 'prod-8aa9a5', traceUser: true }) } }) [代码] [图片] 4，注册成功后，我们在云开发控制台的数据库里就可以看到注册信息了。 [图片] 二，注册成功后，就要实现登陆功能了 我们这里的登陆功能需要用到第一步注册时的用户名和密码，也就是上图数据库里的name和password字段 1，登陆页面实现代码 login.wxml [代码]<!--pages/login/login.wxml--> <input class='input' placeholder='请输入用户名' bindinput='inputName'></input> <input class='input' placeholder='请输入密码' bindinput='inputPassword'></input> <button class='button' type='primary' bindtap='login'>登陆</button> <button class='button' type='primary' bindtap='register'>去注册</button> [代码] 2,登陆功能实现 [代码]// pages/login/login.js let app = getApp(); // 获取数据库引用 const db = wx.cloud.database(); const userListDB = db.collection('userlist'); let name = null; let password = null; Page({ data: { }, //输入用户名 inputName(evnet) { console.log(evnet.detail.value) name = evnet.detail.value; }, //输入密码 inputPassword(evnet) { password = evnet.detail.value; }, //登陆 login() { let that = this; if (!app.checkNamePassword(name, password)) { return; } //登陆获取用户信息 userListDB.where({ _openid: app.globalData.openid }).get({ success: function(res) { let userInfos = res.data; console.log(res.data) if (userInfos && userInfos.length > 0) { let user = userInfos[0]; if (user.name !== name) { app.showTips('用户名不匹配'); } else if (user.password !== password) { app.showTips('密码不匹配'); } else { app.showTips('登陆成功'); let jsonStr=JSON.stringify(user); wx.navigateTo({ url: '../index/index?jsonStr=' + jsonStr, }) } } else { app.showTips('用户不存在'); } } }) }, register() { wx.navigateTo({ url: '../register/register', }) }, }) [代码] 3，登陆成功后显示用户信息 电话号码是胡乱填的，想联系我可以__加我微信2501902696__ [图片] 这样就可以实现小程序的登陆与注册了。 想要完整源码或者有小程序相关的问题，可以加我微信2501902696（备注小程序）

我们在开发小程序时，有些操作必须让用户授权。比如我们获取用户位置，需要用户授权位置信息。授权操作我们需要给用户弹窗提示，在用户禁用某些权限时，又要引导用户去设置页开启相应权限。我们这里就以获取经纬度为例，来带大家学会友好的引导用户授权。 老规矩，先看效果图 [图片] 一，我们使用位置信息，就需要授权 [代码] //校验位置权限是否打开 checkLocation() { let that = this; //选择位置，需要用户授权 wx.getSetting({ success(res) { if (!res.authSetting['scope.userLocation']) { wx.authorize({ scope: 'scope.userLocation', success() { wx.showToast({ //这里提示失败原因 title: '授权成功！', duration: 1500 }) }, fail() { that.showSettingToast('需要授权位置信息'); } }) } } }) }, [代码] [图片] 首先检验用户是否授权位置信息的权限“scope.userLocation”，如果有授权，我们就可以直接去获取用户的位置经纬度了。如果没有授权，我们就弹窗引导用户去设置页。去设置页的方法如下 [代码] // 打开权限设置页提示框 showSettingToast: function (e) { wx.showModal({ title: '提示！', confirmText: '去设置', showCancel: false, content: e, success: function (res) { if (res.confirm) { wx.navigateTo({ url: '../setting/setting', }) } } }) }, [代码] [图片] 由于去设置页，需要用户手动触发，这里我们就用一个setting.wxml页作为过过渡页。 [图片] 我们这个过渡页的按钮，用户点击后就会去真正的授权页了。 [图片] 当用户开启地理位置授权后。我们再点击获取位置，就可以获取到用户当前的经纬度了。 [图片] 完整代码如下 [代码]//index.js Page({ getLocation() { this.checkLocation(); let that = this; wx.chooseLocation({ success: function(res) { var latitude = res.latitude var longitude = res.longitude; that.setData({ address: "经纬度：" + longitude + ", " + latitude, }) } }); }, //校验位置权限是否打开 checkLocation() { let that = this; //选择位置，需要用户授权 wx.getSetting({ success(res) { if (!res.authSetting['scope.userLocation']) { wx.authorize({ scope: 'scope.userLocation', success() { wx.showToast({ //这里提示失败原因 title: '授权成功！', duration: 1500 }) }, fail() { that.showSettingToast('需要授权位置信息'); } }) } } }) }, // 打开权限设置页提示框 showSettingToast: function (e) { wx.showModal({ title: '提示！', confirmText: '去设置', showCancel: false, content: e, success: function (res) { if (res.confirm) { wx.navigateTo({ url: '../setting/setting', }) } } }) }, }) [代码] 还有我们授权必须再app.json里注册相关权限。如我的app.json如下 [代码]{ "pages": [ "pages/index/index", "pages/setting/setting" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" }, "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" } } } [代码] 到此我们就实现了小程序引导授权的全部功能，并且可以获取到用户的位置经纬度了。是不是很简单。 如果有关于小程序的问题，可以加我微信2501902696（备注小程序）

整体流程图如下： [图片] 1、小程序调起摄像头 <camera device-position=“back” flash=“off” binderror=“error” mode=“normal” style=“width: 100%; height: 300px;”></camera> <button type=“primary” bindtap=“takePhoto”>拍照</button> 2、拍摄照片并把照片转化为base64编码 拍摄的照片路径为临时路径，所以需要转化为base64编码 [代码]takePhoto() { const me = this; const ctx = wx.createCameraContext() ctx.takePhoto({ quality: 'normal', success: (res) => { const fs = wx.getFileSystemManager(); fs.readFile({ filePath: res.tempImagePath, encoding: 'base64', success(res) { } }) } }) }, [代码] 3、图片传送给第三方云平台ocr 接口（这里是以百度云举例） 1、获取第三方云平台的token [代码] const token = await identificationCard.getToken({ query: { grant_type: 'client_credentials', client_id: '自己申请的账号', client_secret: '自己申请的密钥' } }) [代码] 2、第三方云平台解析拍摄的银行卡 [代码]identificationCard.getCardDetail返回的card就是相应图片中银行卡信息 const card = await identificationCard.getCardDetail(token.data.access_token, { query: { image: base64 }, method: "POST" }) [代码] 4、完整代码 wxml <camera device-position=“back” flash=“off” binderror=“error” mode=“normal” style=“width: 100%; height: 300px;”></camera> <button type=“primary” bindtap=“takePhoto”>拍照</button> [代码]api const identificationCard = { getToken: (params) => wxRequest(params, 'https://aip.baidubce.com/oauth/2.0/token'), getCardDetail: (query, params)=> wxRequest(params, 'https://aip.baidubce.com/rest/2.0/ocr/v1/bankcard?access_token='+query), } js async getCardDetail(base64){ const token = await identificationCard.getToken({ query: { grant_type: 'client_credentials', client_id: '自己申请的账号', client_secret: '自己申请的密钥' } }) const card = await identificationCard.getCardDetail(token.data.access_token, { query: { image: base64 }, method: "POST" }) } takePhoto() { const me = this; const ctx = wx.createCameraContext() ctx.takePhoto({ quality: 'normal', success: (res) => { const fs = wx.getFileSystemManager(); fs.readFile({ filePath: res.tempImagePath, encoding: 'base64', success(res) { me.getCardDetail(res.data) } }) } }) } ```[代码]

前言 在日常开发过程中，经常会有双列瀑布流场景的需求出现，如商品列表、文章列表等，本文将简单介绍这种情景下如何高效、精准的实现双列瀑布流场景，支持刷新、加载更多等，实现效果如下。 [图片] [图片] 开发思路 瀑布流视图有一种参差的美感，常规列表布局如 flex wrap 等由于存在行高度限制，无法让第二行的 item 对齐上一行最矮处，因此，瀑布流布局时采用双列 scrollview 的 flex 布局。 参差布局的实现，采用代码计算左右两列的高度，然后对左右两列总高度进行比较，新加入的 item 总是排在总高度较小的那列后面。 计算时可以尽可能的缓存高度，例如左右两列高度在每次计算时都缓存起来，有新的 item 加入列表时直接增加左右两列高度即可，不需要重新从头计算。 index.js [代码]const tplWidth = (750 - 24 - 8) / 2; const tplHeight = 595; // plWidth * 1.66 newPhotos.forEach(photo => { const { height, width } = photo let photoHeight = tplWidth if (height > width) { photoHeight = tplHeight photo.display = 'long' } else { photo.display = 'short' } if (leftHeight < rightHeight) { leftList.push(photo) leftHeight += photoHeight } else { rightList.push(photo) rightHeight += photoHeight } }) [代码] index.wxml [代码]<!-- list --> <view class='list'> <!-- left --> <view class='left-list'> <block wx:for="{{leftList}}" wx:key="{{item._id}}"> <cell photo="{{item}}" bindclick='onCellClicked' /> </block> </view> <!-- right --> <view class='right-list'> <block wx:for="{{rightList}}" wx:key="{{item._id}}"> <cell photo="{{item}}" bindclick='onCellClicked' /> </block> </view> </view> [代码] index.css [代码].list { display: flex; flex: 1; position: relative; flex-direction: row; justify-content: space-between; padding-left: 12rpx; padding-right: 12rpx; padding-top: 8rpx; } .left-list { display: flex; position: relative; flex-direction: column; width: 359rpx; } .right-list { display: flex; position: relative; flex-direction: column; width: 359rpx; } [代码]

基本实现功能 1，小程序仿天猫超市大转盘 2，九宫格转盘抽奖 3，积分抽奖 4，抽到的积分随机生成 5，抽奖结果可以同步到服务器（小程序云开发后台） 老规矩先看效果图 [图片] 简单说一下实现原理. 我们借助js的定时器，来执行一个加法。比如我们设置一个上限300，每过一定时间执行一次，然后我们再做一个随机数，这个随机数不停的++，直到总数大于300.就代表抽奖结束。核心代码如下。 [代码] //开始抽奖 startGame: function() { if (this.data.isRunning) return this.setData({ isRunning: true }) var _this = this; var indexSelect = 0 var i = 0; var timer = setInterval(function() { indexSelect++; let randomNum = Math.floor(Math.random() * 10) * 10; //可均衡获取0到90的随机整数 i += randomNum; if (i > 300) { //去除循环 clearInterval(timer) //获奖提示 let jifen = 1; let selectNum = _this.data.indexSelect console.log("选号：" + selectNum ); if (selectNum===0) { jifen = 2; } else if (selectNum === 1) { jifen = 3; } else if (selectNum === 2) { jifen = 4; } else if (selectNum === 3) { jifen = 5; } else if(selectNum === 4) { jifen = 6; } else if(selectNum === 5) { jifen = 8; } else if (selectNum === 6) { jifen = 10; } wx.showModal({ title: '恭喜您', content: '获得了' + jifen + "积分", showCancel: false, //去掉取消按钮 success: function(res) { if (res.confirm) { _this.setData({ isRunning: false }) } } }) } indexSelect = indexSelect % 8; _this.setData({ indexSelect: indexSelect }) }, (200 + i)) } [代码] 完整源码可以加我微信，如果有关于小程序的问题，可以加我微信2501902696（备注小程序）

1、域名必须是https 非https的域名不被微信小程序允许。 2、input组件placeholder字体颜色 卸载placeholder-class里面的color并不生效，需要写在placeholder-style里面就可以了。 3、wx.navigateTo无法跳转到带tabbar的页面 带有tabbar的页面，必须使用wx.switchTab进行跳转。 4、tabbar在切换时页面数据无法刷新 tabbar的实现可能是显示和隐藏view，所以，不会一直调用page.onLoad（）方法，可以尝试把代码逻辑写在page.onShow（）里面。 5、如何获取shareTickets 获取shareTickets需要在app.onLaunch或者app.onShow里面才能获取到，而不是page.onShow，请一定要注意。 注：建议在app.onShow里面去获取，app.onLaunch不是一直会执行。 6、getPhoneNumber获取手机号 目前该接口针对非个人开发者，且完成了认证的小程序开放。个人开发者是没办法调用这个API的。 7、wx.previewImage图片预览 预览图片URL必须是https开头，不能是本地图片。 8、wx.playVoice音频播放 必须保证音频文件已经在本地，比如在wx.startRecord后，可以获取到filePath。或者提前调用wx.downloadFile来下载资源文件，然后再播放。 9、API老版本兼容 可以用wx.canIUse或者wx.getSystemInfoSync来进行判断，老版本给出相应提示即可。 10、获取系统信息 wx.getSystemInfo，可得到系统语言、屏幕宽高、微信版本号、操作系统、设备像素比、客户端甚础库版本等信息。 11、如何去掉自定义button灰色的圆角边框 主要是button的伪元素设置了样式，去掉即可：button::after{ display: none;}。 12、回到页面顶部 主要是button的伪元素设置了样式，去掉即可：button::after{ display: none;}。 13、input textarea是APP的原生组件，z-index层级最高 有做过搜索框的同学，可能会遇到iOS下面，设置icon的z-index后，依然无法显示。建议做显示隐藏效果：点击之前是一个view，点击之后隐藏view，显示input。 14、小程序如何冷启动 小程序的机制，是在退出五分钟内进入，就会显示的是退出前的页面，如果你希望进入小程序都相当于冷启动的方式，直接进入主页面。你可以在page的onUnload里面里面set一个值，然后在app的onShow的时候判断这个值，然后决定是否跳到首页。 15、一段文字如何换行 小程序中唯一可以实现换行的标签组件是text。 注：text中不支持<br>，只能使用n进行换行。 16、设置最外层标签的margin-bottom在iOS下不生效 margin-bottom在安卓和开发工具里面都正常，就是在iOS下不起效，建议改成padding-bottom。 17、小程序中canvas的图片不支持base64格式 base64格式图片，在开发工具里面可以正常显示，真机上没有显示。建议修改成带https开头的url形式。 微信小程序开发视频教程分享：https://www.sucaihuo.com/video/222-0-0

这几天看了很多关于防抖函数的博客，我是在微信小程序中使用，在此总结一下关于防抖函数的知识。 为什么需要防抖函数？ 防抖函数适用的是【有大量重复操作】的场景，比如列表渲染之后对每一项进行操作。 函数代码： [代码]var timer; debounce: function (func, wait) { return () => { clearTimeout(timer); timer = setTimeout(func, wait); }; }, [代码] 参数： func:需要防抖的函数； wait:number类型，setTimeout的时间参数； 代码分析： 命名一个叫做debounce的函数，参数有两个（func,wait），return一个函数，内容为清除计时器，然后设置计时器，计时器的意思是：在wait时间后执行func。 清除计时器是整个函数的核心，因为防抖需要不停地清除计时器，最后在计时器结束后触发func来达到效果。 防抖函数的调用方法 example： [代码]this.debounce(this.函数名,3000)() [代码] 在使用这个函数的时候我遇到了一些问题： 因为微信小程序中很多地方都需要使用this.setData，如果对于this指向的理解不深入的话，很容易出现以下情况： 1:this==undefined; 2:Error:data is not defined; 等等一些列关于this的问题。 解决方法： [代码]this.debounce(this.函数名.bind(this),3000)() [代码] 使用bind(this)把this指向传到函数内部就解决了。

为什么不能频繁 setData 先科普下 setData 做的事情： 在数据传输时，逻辑层会执行一次 JSON.stringify 来去除掉 setData 数据中不可传输的部分，之后将数据发送给视图层。同时，逻辑层还会将 setData 所设置的数据字段与 data 合并，使开发者可以用 this.data 读取到变更后的数据。 因此频繁调用，视图会一直更新，阻塞用户交互，引发性能问题。 但频繁调用是常见开发场景，能不能频繁调用的同时，视图延迟更新呢？ 参考 Vue，我们能知道，Vue 每次赋值操作并不会直接更新视图，而是缓存到一个数据更新队列中，异步更新，再触发渲染，此时多次赋值，也只会渲染一次。 [代码]let newState = null; let timeout = null; const asyncSetData = ({ vm, newData, }) => { newState = { ...newState, ...newData, }; clearTimeout(timeout); timeout = setTimeout(() => { vm.setData({ ...newState, }); newState = null }, 0); }; [代码] 由于异步代码会在同步代码之后执行，因此，当你多次使用 asyncSetData 设置 newState 时，newState 都会被缓存起来，并异步 setData 一次 但同时，这个方案也会带来一个新的问题，同步代码会阻塞页面的渲染。 同步代码会阻塞页面的渲染的问题其实在浏览器中也存在，但在小程序中，由于是逻辑、视图双线程架构，因此逻辑并不会阻塞视图渲染，这是小程序的优点，但在这套方案将会丢失这个优点。 鱼与熊掌不可兼得也！ 对于信息流页面，数据过多怎么办 单次设置的数据不能超过 1024kB，请尽量避免一次设置过多的数据 通常，我们拉取到分页的数据 newList，添加到数组里，一般是这么写： [代码]this.setData({ list: this.data.list.concat(newList) }) [代码] 随着分页次数的增加，list 会逐渐增大，当超过 1024 kb 时，程序会报 [代码]exceed max data size[代码] 错误。 为了避免这个问题，我们可以直接修改 list 的某项数据，而不是对整个 list 重新赋值： [代码]let length = this.data.list.length; let newData = newList.reduce((acc, v, i)=>{ acc[`list[${length+i}]`] = v; return acc; }, {}); this.setData(newData); [代码] 这看着似乎还有点繁琐，为了简化操作，我们可以把 list 的数据结构从一维数组改为二维数组：[代码]list = [newList, newList][代码]， 每次分页，可以直接将整个 newList 赋值到 list 作为一个子数组，此时赋值方式为： [代码]let length = this.data.list.length; this.setData({ [`list[${length}]`]: newList }); [代码] 同时，模板也需要相应改成二重循环： [代码]<block wx:for="{{list}}" wx:for-item="listItem" wx:key="{{listItem}}"> <child wx:for="{{listItem}}" wx:key="{{item}}"></child> </block> [代码] 下拉加载，让我们一夜回到解放前 信息流产品，总避免不了要做下拉加载。 下拉加载的数据，需要插到 list 的最前面，所以我们应该这样做： [代码]this.setData({ `list[-1]`: newList }) [代码] 哦不，对不起，上面是错的，应该是下面这样： [代码]this.setData({ list: this.data.list.unshift(newList) }); [代码] 这下好，又是一次性修改整个数组，一夜回到解放前… 为了解决这个问题，这里需要一点奇淫巧技： 为下拉加载维护一个单独的二维数组 pullDownList 在渲染时，用 wxs 将 pullDownList reverse 一下 此时，当下拉加载时，便可以只修改数组的某个子项： [代码]let length = this.data.pullDownList.length; this.setData({ [`pullDownList[${length}]`]: newList }); [代码] 关键在于渲染时候的反向渲染： [代码]<wxs module="utils"> function reverseArr(arr) { return arr.reverse() } module.exports = { reverseArr: reverseArr } </wxs> <block wx:for="{{utils.reverseArr(pullDownList)}}" wx:for-item="listItem" wx:key="{{listItem}}"> <child wx:for="{{listItem}}" wx:key="{{item}}"></child> </block> [代码] 问题解决！ 参考资料 终极蛇皮上帝视角之微信小程序之告别 setData, 佯真愚, 2018年08月12日

FlashEvent FlashEvent 小程序页面间的通信工具 - 类似于EventBus FlashEvent 在小程序中 能够简化各页面间的通信，让代码书写变得简单，能有效的解耦事件发送方和接收方，能避免复杂和容易出错的依赖性和生命周期问题。 github add: https://github.com/wuyajun7/FlashEvent 使用方式： 前置：将FlashEvent.js导入到项目的utils文件中 1、接收方js代码中 1.1 引入该类，如：let flashEvent = require(‘你的路径/utils/FlashEvent.js’); 1.2 注册FlashEvent，如：在onLoad中 [代码] flashEvent.register(flashEvent.EVENT_KEYS.FIRST_EVENT, this, function (data) { this.setData({ eventCallBack: data }) }) [代码] 1.3 注销FlashEvent，如：在onUnload中调用 flashEvent.unregister(flashEvent.EVENT_KEYS.FIRST_EVENT, this); 2、发送方js代码中 2.1 引入该类，如：let flashEvent = require(‘你的路径/utils/FlashEvent.js’); 2.2 发送事件，如：flashEvent.post(flashEvent.EVENT_KEYS.FIRST_EVENT, ‘发送的数据’); flashEvent 简单接入、方便使用

什么是[代码]Service Worker[代码] [代码]Service Worker[代码]本质上充当Web应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理。它们旨在（除其他之外）使得能够创建有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步[代码]API[代码]。 [代码]Service Worker[代码]的本质是一个[代码]Web Worker[代码]，它独立于[代码]JavaScript[代码]主线程，因此它不能直接访问[代码]DOM[代码]，也不能直接访问[代码]window[代码]对象，但是，[代码]Service Worker[代码]可以访问[代码]navigator[代码]对象，也可以通过消息传递的方式（postMessage）与[代码]JavaScript[代码]主线程进行通信。 [代码]Service Worker[代码]是一个网络代理，它可以控制[代码]Web[代码]页面的所有网络请求。 [代码]Service Worker[代码]具有自身的生命周期，使用好[代码]Service Worker[代码]的关键是灵活控制其生命周期。 [代码]Service Worker[代码]的作用 用于浏览器缓存 实现离线[代码]Web APP[代码] 消息推送 [代码]Service Worker[代码]兼容性 [代码]Service Worker[代码]是现代浏览器的一个高级特性，它依赖于[代码]fetch API[代码]、[代码]Cache Storage[代码]、[代码]Promise[代码]等，其中，[代码]Cache[代码]提供了[代码]Request / Response[代码]对象对的存储机制，[代码]Cache Storage[代码]存储多个[代码]Cache[代码]。 [图片] 示例 在了解[代码]Service Worker[代码]的原理之前，先来看一段[代码]Service Worker[代码]的示例： [代码]self.importScripts('./serviceworker-cache-polyfill.js'); var urlsToCache = [ '/', '/index.js', '/style.css', '/favicon.ico', ]; var CACHE_NAME = 'counterxing'; self.addEventListener('install', function(event) { self.skipWaiting(); event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { return cache.addAll(urlsToCache); }) ); }); self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { if (response) { return response; } return fetch(event.request); }) ); }); self.addEventListener('activate', function(event) { var cacheWhitelist = ['counterxing']; event.waitUntil( caches.keys().then(function(cacheNames) { return Promise.all( cacheNames.map(function(cacheName) { if (cacheWhitelist.indexOf(cacheName) === -1) { return caches.delete(cacheName); } }) ); }) ); }); [代码] 下面开始逐段逐段地分析，揭开[代码]Service Worker[代码]的神秘面纱： [代码]polyfill[代码] 首先看第一行：[代码]self.importScripts('./serviceworker-cache-polyfill.js');[代码]，这里引入了Cache API的一个polyfill，这个[代码]polyfill[代码]支持使得在较低版本的浏览器下也可以使用[代码]Cache Storage API[代码]。想要实现[代码]Service Worker[代码]的功能，一般都需要搭配[代码]Cache API[代码]代理网络请求到缓存中。 在[代码]Service Worker[代码]线程中，使用[代码]importScripts[代码]引入[代码]polyfill[代码]脚本，目的是对低版本浏览器的兼容。 [代码]Cache Resources List[代码] And [代码]Cache Name[代码] 之后，使用一个[代码]urlsToCache[代码]列表来声明需要缓存的静态资源，再使用一个变量[代码]CACHE_NAME[代码]来确定当前缓存的[代码]Cache Storage Name[代码]，这里可以理解成[代码]Cache Storage[代码]是一个[代码]DB[代码]，而[代码]CACHE_NAME[代码]则是[代码]DB[代码]名： [代码]var urlsToCache = [ '/', '/index.js', '/style.css', '/favicon.ico', ]; var CACHE_NAME = 'counterxing'; [代码] [代码]Lifecycle[代码] [代码]Service Worker[代码]独立于浏览器[代码]JavaScript[代码]主线程，有它自己独立的生命周期。 如果需要在网站上安装[代码]Service Worker[代码]，则需要在[代码]JavaScript[代码]主线程中使用以下代码引入[代码]Service Worker[代码]。 [代码]if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js').then(function(registration) { console.log('成功安装', registration.scope); }).catch(function(err) { console.log(err); }); } [代码] 此处，一定要注意[代码]sw.js[代码]文件的路径，在我的示例中，处于当前域根目录下，这意味着，[代码]Service Worker[代码]和网站是同源的，可以为当前网站的所有请求做代理，如果[代码]Service Worker[代码]被注册到[代码]/imaging/sw.js[代码]下，那只能代理[代码]/imaging[代码]下的网络请求。 可以使用[代码]Chrome[代码]控制台，查看当前页面的[代码]Service Worker[代码]情况： [图片] 安装完成后，[代码]Service Worker[代码]会经历以下生命周期： 下载（[代码]download[代码]） 安装（[代码]install[代码]） 激活（[代码]activate[代码]） 用户首次访问[代码]Service Worker[代码]控制的网站或页面时，[代码]Service Worker[代码]会立刻被下载。之后至少每[代码]24[代码]小时它会被下载一次。它可能被更频繁地下载，不过每[代码]24[代码]小时一定会被下载一次，以避免不良脚本长时间生效。 在下载完成后，开始安装[代码]Service Worker[代码]，在安装阶段，通常需要缓存一些我们预先声明的静态资源，在我们的示例中，通过[代码]urlsToCache[代码]预先声明。 在安装完成后，会开始进行激活，浏览器会尝试下载[代码]Service Worker[代码]脚本文件，下载成功后，会与前一次已缓存的[代码]Service Worker[代码]脚本文件做对比，如果与前一次的[代码]Service Worker[代码]脚本文件不同，证明[代码]Service Worker[代码]已经更新，会触发[代码]activate[代码]事件。完成激活。 如图所示，为[代码]Service Worker[代码]大致的生命周期： [图片] [代码]install[代码] 在安装完成后，尝试缓存一些静态资源： [代码]self.addEventListener('install', function(event) { self.skipWaiting(); event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { return cache.addAll(urlsToCache); }) ); }); [代码] 首先，[代码]self.skipWaiting()[代码]执行，告知浏览器直接跳过等待阶段，淘汰过期的[代码]sw.js[代码]的[代码]Service Worker[代码]脚本，直接开始尝试激活新的[代码]Service Worker[代码]。 然后使用[代码]caches.open[代码]打开一个[代码]Cache[代码]，打开后，通过[代码]cache.addAll[代码]尝试缓存我们预先声明的静态文件。 监听[代码]fetch[代码]，代理网络请求 页面的所有网络请求，都会通过[代码]Service Worker[代码]的[代码]fetch[代码]事件触发，[代码]Service Worker[代码]通过[代码]caches.match[代码]尝试从[代码]Cache[代码]中查找缓存，缓存如果命中，则直接返回缓存中的[代码]response[代码]，否则，创建一个真实的网络请求。 [代码]self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { if (response) { return response; } return fetch(event.request); }) ); }); [代码] 如果我们需要在请求过程中，再向[代码]Cache Storage[代码]中添加新的缓存，可以通过[代码]cache.put[代码]方法添加，看以下例子： [代码]self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { // 缓存命中 if (response) { return response; } // 注意，这里必须使用clone方法克隆这个请求 // 原因是response是一个Stream，为了让浏览器跟缓存都使用这个response // 必须克隆这个response，一份到浏览器，一份到缓存中缓存。 // 只能被消费一次，想要再次消费，必须clone一次 var fetchRequest = event.request.clone(); return fetch(fetchRequest).then( function(response) { // 必须是有效请求，必须是同源响应，第三方的请求，因为不可控，最好不要缓存 if (!response || response.status !== 200 || response.type !== 'basic') { return response; } // 消费过一次，又需要再克隆一次 var responseToCache = response.clone(); caches.open(CACHE_NAME) .then(function(cache) { cache.put(event.request, responseToCache); }); return response; } ); }) ); }); [代码] 在项目中，一定要注意控制缓存，接口请求一般是不推荐缓存的。所以在我自己的项目中，并没有在这里做动态的缓存方案。 [代码]activate[代码] [代码]Service Worker[代码]总有需要更新的一天，随着版本迭代，某一天，我们需要把新版本的功能发布上线，此时需要淘汰掉旧的缓存，旧的[代码]Service Worker[代码]和[代码]Cache Storage[代码]如何淘汰呢？ [代码]self.addEventListener('activate', function(event) { var cacheWhitelist = ['counterxing']; event.waitUntil( caches.keys().then(function(cacheNames) { return Promise.all( cacheNames.map(function(cacheName) { if (cacheWhitelist.indexOf(cacheName) === -1) { return caches.delete(cacheName); } }) ); }) ); }); [代码] 首先有一个白名单，白名单中的[代码]Cache[代码]是不被淘汰的。 之后通过[代码]caches.keys()[代码]拿到所有的[代码]Cache Storage[代码]，把不在白名单中的[代码]Cache[代码]淘汰。 淘汰使用[代码]caches.delete()[代码]方法。它接收[代码]cacheName[代码]作为参数，删除该[代码]cacheName[代码]所有缓存。 sw-precache-webpack-plugin sw-precache-webpack-plugin是一个[代码]webpack plugin[代码]，可以通过配置的方式在[代码]webpack[代码]打包时生成我们想要的[代码]sw.js[代码]的[代码]Service Worker[代码]脚本。 一个最简单的配置如下： [代码]var path = require('path'); var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin'); const PUBLIC_PATH = 'https://www.my-project-name.com/'; // webpack needs the trailing slash for output.publicPath module.exports = { entry: { main: path.resolve(__dirname, 'src/index'), }, output: { path: path.resolve(__dirname, 'src/bundles/'), filename: '[name]-[hash].js', publicPath: PUBLIC_PATH, }, plugins: [ new SWPrecacheWebpackPlugin( { cacheId: 'my-project-name', dontCacheBustUrlsMatching: /\.\w{8}\./, filename: 'service-worker.js', minify: true, navigateFallback: PUBLIC_PATH + 'index.html', staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/], } ), ], } [代码] 在执行[代码]webpack[代码]打包后，会生成一个名为[代码]service-worker.js[代码]文件，用于缓存[代码]webpack[代码]打包后的静态文件。 一个最简单的示例。 [代码]Service Worker Cache[代码] VS [代码]Http Cache[代码] 对比起[代码]Http Header[代码]缓存，[代码]Service Worker[代码]配合[代码]Cache Storage[代码]也有自己的优势： 缓存与更新并存：每次更新版本，借助[代码]Service Worker[代码]可以立马使用缓存返回，但与此同时可以发起请求，校验是否有新版本更新。 无侵入式：[代码]hash[代码]值实在是太难看了。 不易被冲掉：[代码]Http[代码]缓存容易被冲掉，也容易过期，而[代码]Cache Storage[代码]则不容易被冲掉。也没有过期时间的说法。 离线：借助[代码]Service Worker[代码]可以实现离线访问应用。 但是缺点是，由于[代码]Service Worker[代码]依赖于[代码]fetch API[代码]、依赖于[代码]Promise[代码]、[代码]Cache Storage[代码]等，兼容性不太好。 后话 本文只是简单总结了[代码]Service Worker[代码]的基本使用和使用[代码]Service Worker[代码]做客户端缓存的简单方式，然而，[代码]Service Worker[代码]的作用远不止于此，例如：借助[代码]Service Worker[代码]做离线应用、用于做网络应用的推送（可参考push-notifications）等。 甚至可以借助[代码]Service Worker[代码]，对接口进行缓存，在我所在的项目中，其实并不会做的这么复杂。不过做接口缓存的好处是支持离线访问，对离线状态下也能正常访问我们的[代码]Web[代码]应用。 [代码]Cache Storage[代码]和[代码]Service Worker[代码]总是分不开的。[代码]Service Worker[代码]的最佳用法其实就是配合[代码]Cache Storage[代码]做离线缓存。借助于[代码]Service Worker[代码]，可以轻松实现对网络请求的控制，对于不同的网络请求，采取不同的策略。例如对于[代码]Cache[代码]的策略，其实也是存在多种情况。例如可以优先使用网络请求，在网络请求失败时再使用缓存、亦可以同时使用缓存和网络请求，一方面检查请求，一方面有检查缓存，然后看两个谁快，就用谁。 优化方向：目前我所负责的DICOM项目，虽然还没有用上[代码]Service Worker[代码]，但前面经过不断地优化迭代，通过从增加http层的缓存、无损压缩图像的替换、有损压缩图像的渐进加载、更换DICOM解压缩策略、使用indexed DB缓存CT图像、首屏可见速度已经从20多秒降低到5秒左右，内存占用从700M以上降低到250M左右。后期还会一直深挖这一块。主要方向之一就是service worker的替换，全站缓存静态资源。此外，高优先级的则是DICOM无损图像解压算法的最优选择与优化、cornerstone的jpg图像展示。 项目优化还在继续，力求极致性能和用户体验~

小程序内置了[代码]wx.request[代码]，用于向后端发送请求，我们先来看看它的文档： wx.request(OBJECT) 发起网络请求。使用前请先阅读说明。 OBJECT参数说明： 参数名 类型 必填 默认值 说明 最低版本 url String 是 - 开发者服务器接口地址 - data Object/String/ArrayBuffer 否 - 请求的参数 - header Object 否 - 设置请求的 header，header 中不能设置 Referer。 - method String 否 GET （需大写）有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT - dataType String 否 json 如果设为json，会尝试对返回的数据做一次 JSON.parse - responseType String 否 text 设置响应的数据类型。合法值：text、arraybuffer 1.7.0 success Function 否 - 收到开发者服务成功返回的回调函数 - fail Function 否 - 接口调用失败的回调函数 - complete Function 否 - 接口调用结束的回调函数（调用成功、失败都会执行） - success返回参数说明： 参数 类型 说明 最低版本 data Object/String/ArrayBuffer 开发者服务器返回的数据 - statusCode Number 开发者服务器返回的 HTTP 状态码 - header Object 开发者服务器返回的 HTTP Response Header 1.2.0 这里我们主要看两点： 回调函数：success、fail、complete； success的返回参数：data、statusCode、header。 相对于通过入参传回调函数的方式，我更喜欢promise的链式，这是我期望的第一个点；success的返回参数，在实际开发过程中，我只关心data部分，这里可以做一下处理，这是第二点。 promisify 小程序默认支持promise，所以这一点改造还是很简单的： [代码]/** * promise请求 * 参数：参考wx.request * 返回值：[promise]res */ function requestP(options = {}) { const { success, fail, } = options; return new Promise((res, rej) => { wx.request(Object.assign( {}, options, { success: res, fail: rej, }, )); }); } [代码] 这样一来我们就可以使用这个函数来代替wx.request，并且愉快地使用promise链式： [代码]requestP({ url: '/api', data: { name: 'Jack' } }) .then((res) => { console.log(res); }) .catch((err) => { console.log(err); }); [代码] 注意，小程序的promise并没有实现finally，Promise.prototype.finally是undefined，所以complete不能用finally代替。 精简返回值 精简返回值也是很简单的事情，第一直觉是，当请求返回并丢给我一大堆数据时，我直接resolve我要的那一部分数据就好了嘛： [代码]return new Promise((res, rej) => { wx.request(Object.assign( {}, options, { success(r) { res(r.data); // 这里只取data }, fail: rej, }, )); }); [代码] but！这里需要注意，我们仅仅取data部分，这时候默认所有success都是成功的，其实不然，wx.request是一个基础的api，fail只发生在系统和网络层面的失败情况，比如网络丢包、域名解析失败等等，而类似404、500之类的接口状态，依旧是调用success，并体现在[代码]statusCode[代码]上。 从业务上讲，我只想处理json的内容，并对json当中的相关状态进行处理；如果一个接口返回的不是约定好的json，而是类似404、500之类的接口异常，我统一当成接口/网络错误来处理，就像jquery的ajax那样。 也就是说，如果我不对[代码]statusCode[代码]进行区分，那么包括404、500在内的所有请求结果都会走[代码]requestP().then[代码]，而不是[代码]requestP().catch[代码]。这显然不是我们熟悉的使用方式。 于是我从jquery的ajax那里抄来了一段代码。。。 [代码]/** * 判断请求状态是否成功 * 参数：http状态码 * 返回值：[Boolen] */ function isHttpSuccess(status) { return status >= 200 && status < 300 || status === 304; } [代码] [代码]isHttpSuccess[代码]用来决定一个http状态码是否判为成功，于是结合[代码]requestP[代码]，我们可以这么来用： [代码]return new Promise((res, rej) => { wx.request(Object.assign( {}, options, { success(r) { const isSuccess = isHttpSuccess(r.statusCode); if (isSuccess) { // 成功的请求状态 res(r.data); } else { rej({ msg: `网络错误:${r.statusCode}`, detail: r }); } }, fail: rej, }, )); }); [代码] 这样我们就可以直接resolve返回结果中的data，而对于非成功的http状态码，我们则直接reject一个自定义的error对象，这样就是我们所熟悉的ajax用法了。 登录 我们经常需要识别发起请求的当前用户，在web中这通常是通过请求中携带的cookie实现的，而且对于前端开发者是无感知的；小程序中没有cookie，所以需要主动地去补充相关信息。 首先要做的是：登录。 通过[代码]wx.login[代码]接口我们可以得到一个[代码]code[代码]，调用后端登录接口将code传给后端，后端再用code去调用微信的登录接口，换取[代码]sessionKey[代码]，最后生成一个[代码]sessionId[代码]返回给前端，这就完成了登录。 [图片] 具体参考微信官方文档：wx.login [代码]const apiUrl = 'https://jack-lo.github.io'; let sessionId = ''; /** * 登录 * 参数：undefined * 返回值：[promise]res */ function login() { return new Promise((res, rej) => { // 微信登录 wx.login({ success(r1) { if (r1.code) { // 获取sessionId requestP({ url: `${apiUrl}/api/login`, data: { code: r1.code, }, method: 'POST' }) .then((r2) => { if (r2.rcode === 0) { const { sessionId } = r2.data; // 保存sessionId sessionId = sessionId; res(r2); } else { rej({ msg: '获取sessionId失败', detail: r2 }); } }) .catch((err) => { rej(err); }); } else { rej({ msg: '获取code失败', detail: r1 }); } }, fail: rej, }); }); } [代码] 好的，我们做好了登录并且顺利获取到了sessionId，接下来是考虑怎么把sessionId通过请求带上去。 sessionId 为了将状态与数据区分开来，我们决定不通过data，而是通过header的方式来携带sessionId，我们对原本的requestP稍稍进行修改，使得它每次调用都自动在header里携带sessionId： [代码]function requestP(options = {}) { const { success, fail, } = options; // 统一注入约定的header let header = Object.assign({ sessionId: sessionId }, options.header); return new Promise((res, rej) => { ... }); } [代码] 好的，现在请求会自动带上sessionId了； 但是，革命尚未完成： 我们什么时候去登录呢？或者说，我们什么时候去获取sessionId？ 假如还没登录就发起请求了怎么办呢？ 登录过期了怎么办呢？ 我设想有这样一个逻辑： 当我发起一个请求的时候，如果这个请求不需要sessionId，则直接发出； 如果这个请求需要携带sessionId，就去检查现在是否有sessionId，有的话直接携带，发起请求； 如果没有，自动去走登录的流程，登录成功，拿到sessionId，再去发送这个请求； 如果有，但是最后请求返回结果是sessionId过期了，那么程序自动走登录的流程，然后再发起一遍。 其实上面的那么多逻辑，中心思想只有一个：都是为了拿到sessionId！ 我们需要对请求做一层更高级的封装。 首先我们需要一个函数专门去获取sessionId，它将解决上面提到的2、3点： [代码]/** * 获取sessionId * 参数：undefined * 返回值：[promise]sessionId */ function getSessionId() { return new Promise((res, rej) => { // 本地sessionId缺失，重新登录 if (!sessionId) { login() .then((r1) => { res(r1.data.sessionId); }) .catch(rej); } } else { res(sessionId); } }); } [代码] 好的，接下来我们解决第1、4点，我们先假定：sessionId过期的时候，接口会返回[代码]code=401[代码]。 整合了getSessionId，得到一个更高级的request方法： [代码]/** * ajax高级封装 * 参数：[Object]option = {}，参考wx.request； * [Boolen]keepLogin = false * 返回值：[promise]res */ function request(options = {}, keepLogin = true) { if (keepLogin) { return new Promise((res, rej) => { getSessionId() .then((r1) => { // 获取sessionId成功之后，发起请求 requestP(options) .then((r2) => { if (r2.rcode === 401) { // 登录状态无效，则重新走一遍登录流程 // 销毁本地已失效的sessionId sessionId = ''; getSessionId() .then((r3) => { requestP(options) .then(res) .catch(rej); }); } else { res(r2); } }) .catch(rej); }) .catch(rej); }); } else { // 不需要sessionId，直接发起请求 return requestP(options); } } [代码] 留意req的第二参数keepLogin，是为了适配有些接口不需要sessionId，但因为我的业务里大部分接口都需要登录状态，所以我默认值为true。 这差不多就是我们封装request的最终形态了。 并发处理 这里其实我们还需要考虑一个问题，那就是并发。 试想一下，当我们的小程序刚打开的时候，假设页面会同时发出5个请求，而此时没有sessionId，那么，这5个请求按照上面的逻辑，都会先去调用login去登录，于是乎，我们就会发现，登录接口被同步调用了5次！并且后面的调用将导致前面的登录返回的sessionId过期~ 这bug是很严重的，理论上来说，登录我们只需要调用一次，然后一直到过期为止，我们都不需要再去登录一遍了。 ——那么也就是说，同一时间里的所有接口其实只需要登录一次就可以了。 ——也就是说，当有登录的请求发出的时候，其他那些也需要登录状态的接口，不需要再去走登录的流程，而是等待这次登录回来即可，他们共享一次登录操作就可以了！ 解决这个问题，我们需要用到队列。 我们修改一下getSessionId这里的逻辑： [代码]const loginQueue = []; let isLoginning = false; /** * 获取sessionId * 参数：undefined * 返回值：[promise]sessionId */ function getSessionId() { return new Promise((res, rej) => { // 本地sessionId缺失，重新登录 if (!sessionId) { loginQueue.push({ res, rej }); if (!isLoginning) { isLoginning = true; login() .then((r1) => { isLoginning = false; while (loginQueue.length) { loginQueue.shift().res(r1); } }) .catch((err) => { isLoginning = false; while (loginQueue.length) { loginQueue.shift().rej(err); } }); } } else { res(sessionId); } }); } [代码] 使用了isLoginning这个变量来充当锁的角色，锁的目的就是当登录正在进行中的时候，告诉程序“我已经在登录了，你先把回调都加队列里去吧”，当登录结束之后，回来将锁解开，把回调全部执行并清空队列。 这样我们就解决了问题，同时提高了性能。 封装 在做完以上工作以后，我们都很清楚的封装结果就是[代码]request[代码]，所以我们把request暴露出去就好了： [代码]function request() { ... } module.exports = request; [代码] 这般如此之后，我们使用起来就可以这样子： [代码]const request = require('request.js'); Page({ ready() { // 获取热门列表 request({ url: 'https://jack-lo.github.io/api/hotList', data: { page: 1 } }) .then((res) => { console.log(res); }) .catch((err) => { console.log(err); }); // 获取最新信息 request({ url: 'https://jack-lo.github.io/api/latestList', data: { page: 1 } }) .then((res) => { console.log(res); }) .catch((err) => { console.log(err); }); }, }); [代码] 是不是很方便，可以用promise的方式，又不必关心登录的问题。 然而可达鸭眉头一皱，发现事情并不简单，一个接口有可能在多个地方被多次调用，每次我们都去手写这么一串[代码]url[代码]参数，并不那么方便，有时候还不好找，并且容易出错。 如果能有个地方专门记录这些url就好了；如果每次调用接口，都能像调用一个函数那么简单就好了。 基于这个想法，我们还可以再做一层封装，我们可以把所有的后端接口，都封装成一个方法，调用接口就相对应调用这个方法： [代码]const apiUrl = 'https://jack-lo.github.io'; const req = { // 获取热门列表 getHotList(data) { const url = `${apiUrl}/api/hotList` return request({ url, data }); }, // 获取最新列表 getLatestList(data) { const url = `${apiUrl}/api/latestList` return request({ url, data }); } } module.exports = req; // 注意这里暴露的已经不是request，而是req [代码] 那么我们的调用方式就变成了： [代码]const req = require('request.js'); Page({ ready() { // 获取热门列表 req.getHotList({ page: 1 }) .then((res) => { console.log(res); }) .catch((err) => { console.log(err); }); // 获取最新信息 req.getLatestList({ page: 1 }) .then((res) => { console.log(res); }) .catch((err) => { console.log(err); }); } }); [代码] 这样一来就方便了很多，而且有一个很大的好处，那就是当某个接口的地址需要统一修改的时候，我们只需要对[代码]request.js[代码]进行修改，其他调用的地方都不需要动了。 错误信息的提炼 最后的最后，我们再补充一个可轻可重的点，那就是错误信息的提炼。 当我们在封装这么一个[代码]req[代码]对象的时候，我们的promise曾经reject过很多的错误信息，这些错误信息有可能来自： [代码]wx.request[代码]的fail； 不符合[代码]isHttpSuccess[代码]的网络错误； getSessionId失败； … 等等的一切可能。 这就导致了我们在提炼错误信息的时候陷入困境，到底catch到的会是哪种[代码]error[代码]对象？ 这么看你可能不觉得有问题，我们来看看下面的例子： [代码]req.getHotList({ page: 1 }) .then((res) => { console.log(res); }) .catch((err) => { console.log(err); }); [代码] 假如上面的例子中，我想要的不仅仅是[代码]console.log(err)[代码]，而是想将对应的错误信息弹窗出来，我应该怎么做？ 我们只能将所有可能出现的错误都检查一遍： [代码]req.getHotList({ page: 1 }) .then((res) => { if (res.code !== 0) { // 后端接口报错格式 wx.showModal({ content: res.msg }); } }) .catch((err) => { let msg = '未知错误'; // 文本信息直接使用 if (typeof err === 'string') { msg = err; } // 小程序接口报错 if (err.errMsg) { msg = err.errMsg; } // 自定义接口的报错，比如网络错误 if (err.detail && err.detail.errMsg) { msg = err.detail.errMsg; } // 未知错误 wx.showModal({ content: msg }); }); [代码] 这就有点尴尬了，提炼错误信息的代码量都比业务还多几倍，而且还是每个接口调用都要写一遍~ 为了解决这个问题，我们需要封装一个方法来专门做提炼的工作： [代码]/** * 提炼错误信息 * 参数：err * 返回值：[string]errMsg */ function errPicker(err) { if (typeof err === 'string') { return err; } return err.msg || err.errMsg || (err.detail && err.detail.errMsg) || '未知错误'; } [代码] 那么过程会变成： [代码]req.getHotList({ page: 1 }) .then((res) => { console.log(res); }) .catch((err) => { const msg = req.errPicker(err); // 未知错误 wx.showModal({ content: msg }); }); [代码] 好吧，我们再偷懒一下，把wx.showModal也省去了： [代码]/** * 错误弹窗 */ function showErr(err) { const msg = errPicker(err); console.log(err); wx.showModal({ showCancel: false, content: msg }); } [代码] 最后就变成了： [代码]req.getHotList({ page: 1 }) .then((res) => { console.log(res); }) .catch(req.showErr); [代码] 至此，一个简单的wx.request封装过程便完成了，封装过的[代码]req[代码]比起原来，使用上更加方便，扩展性和可维护性也更好。 结尾 以上内容其实是简化版的[代码]mp-req[代码]，介绍了[代码]mp-req[代码]这一工具的实现初衷以及思路，使用[代码]mp-req[代码]来管理接口会更加的便捷，同时[代码]mp-req[代码]也提供了更加丰富的功能，比如插件机制、接口的缓存，以及接口分类等，欢迎大家关注mp-req了解更多内容。 以上最终代码可以在这里获取：req.js。

https://developers.weixin.qq.com/s/47VZSGmR7Q7w 这是代码片段链接 项目中有好多地方都需要用到 navbar ，一个项目中重复的使用同一段代码感觉很烦人，所以就自己写了一个，适合 2-4 个 tab，【支持多个】多个的话稍微修改一下布局就可以了 ━((′д｀)爻(′д｀))━!!!-图片传不上去 大家可以 打开代码链接看一下 如果感觉写的还凑合的 帮忙点个赞！ 有什么可以改进的也可以 在下方评论

微信小程序发送短信验证码后60秒倒计时功能，效果图： [图片]   完整代码 index.wxml [代码]<!--index.wxml-->[代码][代码]<view class=[代码][代码]"container"[代码][代码]>[代码][代码]  [代码][代码]<view class=[代码][代码]"section"[代码][代码]>[代码][代码]    [代码][代码]<text>手机号码:</text>[代码][代码]        [代码][代码]<input placeholder=[代码][代码]"请输入手机号码"[代码] [代码]type=[代码][代码]"number"[代码] [代码]maxlength=[代码][代码]"11"[代码] [代码]bindinput=[代码][代码]"inputPhoneNum"[代码] [代码]auto-focus />[代码][代码]        [代码][代码]<text wx:if=[代码][代码]"{{send}}"[代码] [代码]class=[代码][代码]"sendMsg"[代码] [代码]bindtap=[代码][代码]"sendMsg"[代码][代码]>发送</text>[代码][代码]        [代码][代码]<text wx:if=[代码][代码]"{{alreadySend}}"[代码] [代码]class=[代码][代码]"sendMsg"[代码] [代码]>{{second+[代码][代码]"s"[代码][代码]}}</text>[代码][代码]    [代码][代码]</view>[代码][代码]</view>[代码] index.wxss [代码]/**index.wxss**/[代码][代码].userinfo {[代码][代码]  [代码][代码]display[代码][代码]: flex;[代码][代码]  [代码][代码]flex-[代码][代码]direction[代码][代码]: column;[代码][代码]  [代码][代码]align-items: [代码][代码]center[代码][代码];[代码][代码]}[代码][代码].section {[代码][代码]display[代码][代码]: flex;[代码][代码]margin[代码][代码]: [代码][代码]16[代码][代码]rpx;[代码][代码]padding[代码][代码]: [代码][代码]16[代码][代码]rpx;[代码][代码]border-bottom[代码][代码]: [代码][代码]1[代码][代码]rpx [代码][代码]solid[代码] [代码]#CFD8DC[代码][代码];[代码][代码]}[代码][代码] [代码] [代码]text {[代码][代码]  [代码][代码]width[代码][代码]: [代码][代码]200[代码][代码]rpx;[代码][代码]}[代码][代码] [代码] [代码]button {[代码][代码]  [代码][代码]margin[代码][代码]: [代码][代码]16[代码][代码]rpx;[代码][代码]}[代码][代码] [代码] [代码].sendMsg {[代码][代码]  [代码][代码]font-size[代码][代码]: [代码][代码]12[代码][代码];[代码][代码]  [代码][代码]margin-right[代码][代码]: [代码][代码]0[代码][代码];[代码][代码]  [代码][代码]padding[代码][代码]: [代码][代码]0[代码][代码];[代码][代码]  [代码][代码]height[代码][代码]: inherit;[代码][代码]  [代码][代码]width[代码][代码]: [代码][代码]80[代码][代码]rpx;[代码][代码]}[代码]index.js [代码]//index.js[代码][代码]//获取应用实例[代码][代码]const app = getApp()[代码][代码] [代码] [代码]Page({[代码][代码]  [代码][代码]data: {[代码][代码]    [代码][代码]send: true,[代码][代码]    [代码][代码]alreadySend: false,[代码][代码]    [代码][代码]second: [代码][代码]60[代码][代码],[代码][代码]    [代码][代码]disabled: true,[代码][代码]    [代码][代码]phoneNum: [代码][代码]''[代码][代码]  [代码][代码]},[代码][代码]  [代码][代码]// 手机号部分[代码][代码]  [代码][代码]inputPhoneNum: function (e) {[代码][代码]    [代码][代码]let phoneNum = e.detail.value[代码][代码]    [代码][代码]this.setData({[代码][代码]      [代码][代码]phoneNum: phoneNum[代码][代码]    [代码][代码]})[代码][代码]  [代码][代码]},[代码][代码]  [代码][代码]sendMsg: function () {[代码][代码]    [代码][代码]var phoneNum = this.data.phoneNum;[代码][代码]    [代码][代码]if(phoneNum == [代码][代码]''[代码][代码]){[代码][代码]      [代码][代码]wx.showToast({[代码][代码]        [代码][代码]title: [代码][代码]'请输入手机号码'[代码][代码],[代码][代码]        [代码][代码]icon: [代码][代码]'none'[代码][代码],[代码][代码]        [代码][代码]duration: [代码][代码]2000[代码][代码]      [代码][代码]})[代码][代码]      [代码][代码]return ;[代码][代码]    [代码][代码]}[代码][代码]    [代码][代码]//此处省略发送短信验证码功能[代码][代码]    [代码][代码]this.setData({[代码][代码]      [代码][代码]alreadySend: true,[代码][代码]      [代码][代码]send: false[代码][代码]    [代码][代码]})[代码][代码]    [代码][代码]this.timer()[代码][代码]  [代码][代码]},[代码][代码]  [代码][代码]showSendMsg: function () {[代码][代码]    [代码][代码]if (!this.data.alreadySend) {[代码][代码]      [代码][代码]this.setData({[代码][代码]        [代码][代码]send: true[代码][代码]      [代码][代码]})[代码][代码]    [代码][代码]}[代码][代码]  [代码][代码]},[代码][代码]  [代码][代码]hideSendMsg: function () {[代码][代码]    [代码][代码]this.setData({[代码][代码]      [代码][代码]send: false,[代码][代码]      [代码][代码]disabled: true,[代码][代码]      [代码][代码]buttonType: [代码][代码]'default'[代码][代码]    [代码][代码]})[代码][代码]  [代码][代码]},[代码][代码]  [代码][代码]timer: function () {[代码][代码]    [代码][代码]let promise = new Promise((resolve, reject) => {[代码][代码]      [代码][代码]let setTimer = setInterval([代码][代码]        [代码][代码]() => {[代码][代码]          [代码][代码]this.setData({[代码][代码]            [代码][代码]second: this.data.second - [代码][代码]1[代码][代码]          [代码][代码]})[代码][代码]          [代码][代码]if (this.data.second <= [代码][代码]0[代码][代码]) {[代码][代码]            [代码][代码]this.setData({[代码][代码]              [代码][代码]second: [代码][代码]60[代码][代码],[代码][代码]              [代码][代码]alreadySend: false,[代码][代码]              [代码][代码]send: true[代码][代码]            [代码][代码]})[代码][代码]            [代码][代码]resolve(setTimer)[代码][代码]          [代码][代码]}[代码][代码]        [代码][代码]}[代码][代码]        [代码][代码], [代码][代码]1000[代码][代码])[代码][代码]    [代码][代码]})[代码][代码]    [代码][代码]promise.then((setTimer) => {[代码][代码]      [代码][代码]clearInterval(setTimer)[代码][代码]    [代码][代码]})[代码][代码]  [代码][代码]},[代码][代码]})[代码]完整的短信验证码登录实例参考: https://blog.csdn.net/zuoliangzhu/article/details/81219900

使用node环境，在vscode 工具中，创建 app.js 文件 ，代码如下，记得安装 npm install websocket 和 npm install http 模块 . 开启 websocket接口服务后，就可以去封装 官方提供的 wx.sendSocketMessage 等接口了。 [代码]const http = require("http"); const WebSocketServer = require("websocket").server; const httpServer = http.createServer((request, response) => { console.log("[" + new Date() + "] Received request for " + request.url); response.writeHead(404); response.end(); }); const wsServer = new WebSocketServer({ httpServer, autoAcceptConnections: true }); wsServer.on("connect", connection => { connection .on("message", message => { if (message.type === "utf8") { console.log(">> message content from client: " + message.utf8Data); connection.sendUTF(message.utf8Data); // 输出内容返回给前端接口调用 } }) .on("close", (reasonCode, description) => { console.log( "[" + new Date() + "] Peer " + connection.remoteAddress + " disconnected." ); }); }); httpServer.listen(8080, () => { console.log("[" + new Date() + "] Serveris listening on port 8080"); }); #小程序页面示例代码，请参考文档 const socketOpen = false const socketMsgQueue = [] wx.connectSocket({ // url: 'test.php', url ：“ws://localhost:8080/” }) wx.onSocketOpen(function (res) { socketOpen = true for (let i = 0; i < socketMsgQueue.length; i++) { sendSocketMessage(socketMsgQueue[i]) } socketMsgQueue = [] }) function sendSocketMessage(msg) { if (socketOpen) { wx.sendSocketMessage({ data: msg }) } else { socketMsgQueue.push(msg) } }[代码]

小程序提供了路由功能来实现页面跳转，但是在使用的过程中我们还是发现有些不方便的地方，通过封装，我们可以实现诸如路由管理、简化api等功能。 页面的跳转存在哪些问题呢？ 与接口的调用一样面临url的管理问题； 传递参数的方式不太友好，只能拼装url； 参数类型单一，只支持string。 alias 第一个问题很好解决，我们做一个集中管理，比如新建一个[代码]router/routes.js[代码]文件来实现alias： [代码]// routes.js module.exports = { // 主页 home: '/pages/index/index', // 个人中心 uc: '/pages/user_center/index', }; [代码] 然后使用的时候变成这样： [代码]const routes = require('../../router/routes.js'); Page({ onReady() { wx.navigateTo({ url: routes.uc, }); }, }); [代码] query 第二个问题，我们先来看个例子，假如我们跳转[代码]pages/user_center/index[代码]页面的同时还要传[代码]userId[代码]过去，正常情况下是这么来操作的： [代码]const routes = require('../../router/routes.js'); Page({ onReady() { const userId = '123456'; wx.navigateTo({ url: `${routes.uc}?userId=${userId}`, }); }, }); [代码] 这样确实不好看，我能不能把参数部分单独拿出来，不用拼接到url上呢？ 可以，我们试着实现一个[代码]navigateTo[代码]函数： [代码]const routes = require('../../router/routes.js'); function navigateTo({ url, query }) { const queryStr = Object.keys(query).map(k => `${k}=${query[k]}`).join('&'); wx.navigateTo({ url: `${url}?${queryStr}`, }); } Page({ onReady() { const userId = '123456'; navigateTo({ url: routes.uc, query: { userId, }, }); }, }); [代码] 嗯，这样貌似舒服一点。 参数保真 第三个问题的情况是，当我们传递的参数argument不是[代码]string[代码]，而是[代码]number[代码]或者[代码]boolean[代码]时，也只能在下个页面得到一个[代码]string[代码]值： [代码]// pages/index/index.js Page({ onReady() { navigateTo({ url: routes.uc, query: { isActive: true, }, }); }, }); // pages/user_center/index.js Page({ onLoad(options) { console.log(options.isActive); // => "true" console.log(typeof options.isActive); // => "string" console.log(options.isActive === true); // => false }, }); [代码] 上面这种情况想必很多人都遇到过，而且感到很抓狂，本来就想传递一个boolean，结果不管传什么都会变成string。 有什么办法可以让数据变成字符串之后，还能还原成原来的类型？ 好熟悉，这不就是json吗？我们把要传的数据转成json字符串（[代码]JSON.stringify[代码]），然后在下个页面把它转回json数据（[代码]JSON.parse[代码]）不就好了嘛！ 我们试着修改原来的[代码]navigateTo[代码]： [代码]const routes = require('../../router/routes.js'); function navigateTo({ url, data }) { const dataStr = JSON.stringify(data); wx.navigateTo({ url: `${url}?jsonStr=${dataStr}`, }); } Page({ onReady() { navigateTo({ url: routes.uc, data: { isActive: true, }, }); }, }); [代码] 这样我们在页面中接受json字符串并转换它： [代码]// pages/user_center/index.js Page({ onLoad(options) { const json = JSON.parse(options.jsonStr); console.log(json.isActive); // => true console.log(typeof json.isActive); // => "boolean" console.log(json.isActive === true); // => true }, }); [代码] 这里其实隐藏了一个问题，那就是url的转义，假如json字符串中包含了类似[代码]?[代码]、[代码]&[代码]之类的符号，可能导致我们参数解析出错，所以我们要把json字符串encode一下： [代码]function navigateTo({ url, data }) { const dataStr = encodeURIComponent(JSON.stringify(data)); wx.navigateTo({ url: `${url}?encodedData=${dataStr}`, }); } // pages/user_center/index.js Page({ onLoad(options) { const json = JSON.parse(decodeURIComponent(options.encodedData)); console.log(json.isActive); // => true console.log(typeof json.isActive); // => "boolean" console.log(json.isActive === true); // => true }, }); [代码] 这样使用起来不方便，我们封装一下，新建文件[代码]router/index.js[代码]： [代码]const routes = require('./routes.js'); function navigateTo({ url, data }) { const dataStr = encodeURIComponent(JSON.stringify(data)); wx.navigateTo({ url: `${url}?encodedData=${dataStr}`, }); } function extract(options) { return JSON.parse(decodeURIComponent(options.encodedData)); } module.exports = { routes, navigateTo, extract, }; [代码] 页面中我们这样来使用： [代码]const router = require('../../router/index.js'); // page home Page({ onLoad(options) { router.navigateTo({ url: router.routes.uc, data: { isActive: true, }, }); }, }); // page uc Page({ onLoad(options) { const json = router.extract(options); console.log(json.isActive); // => true console.log(typeof json.isActive); // => "boolean" console.log(json.isActive === true); // => true }, }); [代码] route name 这样貌似还不错，但是[代码]router.navigateTo[代码]不太好记，[代码]router.routes.uc[代码]有点冗长，我们考虑把[代码]navigateTo[代码]换成简单的[代码]push[代码]，至于路由，我们可以使用[代码]name[代码]的方式来替换原来[代码]url[代码]参数： [代码]const routes = require('./routes.js'); function push({ name, data }) { const dataStr = encodeURIComponent(JSON.stringify(data)); const url = routes[name]; wx.navigateTo({ url: `${url}?encodedData=${dataStr}`, }); } function extract(options) { return JSON.parse(decodeURIComponent(options.encodedData)); } module.exports = { push, extract, }; [代码] 在页面中使用： [代码]const router = require('../../router/index.js'); Page({ onLoad(options) { router.push({ name: 'uc', data: { isActive: true, }, }); }, }); [代码] navigateTo or switchTab 页面跳转除了navigateTo之外还有switchTab，我们是不是可以把这个差异抹掉？答案是肯定的，如果我们在配置routes的时候就已经指定是普通页面还是tab页面，那么程序完全可以切换到对应的跳转方式。 我们修改一下[代码]router/routes.js[代码]，假设home是一个tab页面： [代码]module.exports = { // 主页 home: { type: 'tab', path: '/pages/index/index', }, uc: { path: '/pages/a/index', }, }; [代码] 然后修改[代码]router/index.js[代码]中[代码]push[代码]的实现： [代码]function push({ name, data }) { const dataStr = encodeURIComponent(JSON.stringify(data)); const route = routes[name]; if (route.type === 'tab') { wx.switchTab({ url: `${route.path}`, // 注意tab页面是不支持传参的 }); return; } wx.navigateTo({ url: `${route.path}?encodedData=${dataStr}`, }); } [代码] 搞定，这样我们一个[代码]router.push[代码]就能自动切换两种跳转方式了，而且之后一旦页面类型有变动，我们也只需要修改[代码]route[代码]的定义就可以了。 直接寻址 alias用着很不错，但是有一点挺麻烦得就是每新建一个页面都要写一个alias，即使没有别名的需要，我们是不是可以处理一下，如果在alias没命中，那就直接把name转化成url？这也是阔以的。 [代码]function push({ name, data }) { const dataStr = encodeURIComponent(JSON.stringify(data)); const route = routes[name]; const url = route ? route.path : name; if (route.type === 'tab') { wx.switchTab({ url: `${url}`, // 注意tab页面是不支持传参的 }); return; } wx.navigateTo({ url: `${url}?encodedData=${dataStr}`, }); } [代码] 在页面中使用： [代码]Page({ onLoad(options) { router.push({ name: 'pages/user_center/a/index', data: { isActive: true, }, }); }, }); [代码] 注意，为了方便维护，我们规定了每个页面都必须存放在一个特定的文件夹，一个文件夹的当前路径下只能存在一个index页面，比如[代码]pages/index[代码]下面会存放[代码]pages/index/index.js[代码]、[代码]pages/index/index.wxml[代码]、[代码]pages/index/index.wxss[代码]、[代码]pages/index/index.json[代码]，这时候你就不能继续在这个文件夹根路径存放另外一个页面，而必须是新建一个文件夹来存放，比如[代码]pages/index/pageB/index.js[代码]、[代码]pages/index/pageB/index.wxml[代码]、[代码]pages/index/pageB/index.wxss[代码]、[代码]pages/index/pageB/index.json[代码]。 这样是能实现功能，但是这个name怎么看都跟alias风格差太多，我们试着定义一套转化规则，让直接寻址的name与alias风格统一一些，[代码]pages[代码]和[代码]index[代码]其实我们可以省略掉，[代码]/[代码]我们可以用[代码].[代码]来替换，那么原来的name就变成了[代码]user_center.a[代码]： [代码]Page({ onLoad(options) { router.push({ name: 'user_center.a', data: { isActive: true, }, }); }, }); [代码] 我们再来改进[代码]router/index.js[代码]中[代码]push[代码]的实现： [代码]function push({ name, data }) { const dataStr = encodeURIComponent(JSON.stringify(data)); const route = routes[name]; const url = route ? route.path : `pages/${name.replace(/\./g, '/')}/index`; if (route.type === 'tab') { wx.switchTab({ url: `${url}`, // 注意tab页面是不支持传参的 }); return; } wx.navigateTo({ url: `${url}?encodedData=${dataStr}`, }); } [代码] 这样一来，由于支持直接寻址，跳转home和uc还可以写成这样： [代码]router.push({ name: 'index', // => /pages/index/index }); router.push({ name: 'user_center', // => /pages/user_center/index }); [代码] 这样一来，除了一些tab页面以及特定的路由需要写alias之外，我们也不需要新增一个页面就写一条alias这么麻烦了。 其他 除了上面介绍的navigateTo和switchTab外，其实还有[代码]wx.redirectTo[代码]、[代码]wx.navigateBack[代码]以及[代码]wx.reLaunch[代码]等，我们也可以做一层封装，过程雷同，所以我们就不再一个个介绍，这里贴一下最终简化后的api以及原生api的映射关系： [代码]router.push => wx.navigateTo router.replace => wx.redirectTo router.pop => wx.navigateBack router.relaunch => wx.reLaunch [代码] 最终实现已经在发布在github上，感兴趣的朋友可以移步了解：mp-router。

fetch.js [代码]const api = 'www.qq.com' export const Fetch = ({ url = '', data = {}, header = { "content-type": "application/json" }, method = 'GET', api = Api }) => { return new Promise((resolve, reject) => { wx.request({ url: api + url, header: header, method: method, data: data, success: res => { // 成功时的处理 if (res.data.error == 0) { resolve(res.data); } else { reject(res.data); } }, fail: err => { reject(err); } }) }) } [代码] api.js [代码]import { Fetch } from './fetch.js'; export const PostMiniList = data => { return Fetch({ url: '/post/post_mini_list.json', data: data, method: 'POST', header: { 'content-type': 'application/x-www-form-urlencoded' } }) } export const GetMiniList = data => { return Fetch({ url: '/get/get_mini_list.json', data: data }) } [代码] index.js [代码]import { PostMiniList, GetMiniList } from './api.js'; PostMiniList({ a:1, b:2 }).then( res => { // 成功处理 }, err => { // 失败处理 } ) GetMiniList({ a:1, b:2 }).then( res => { // 成功处理 }, err => { // 失败处理 } ) [代码] 把所有api放在api.js里统一管理，利用promise使我们只关注返回的结果

我们在做小程序开发时，难免会遇到图片上传的功能，我们如果自己搭建图片服务器的话，成功太大了，并且还要写后台程序来接收上传的图片，还要有存储服务器。好在小程序云开发为我们提供了云存储的功能，这样我们就可以轻松的实现小程序图片的上传和存储。 老规矩，先看效果图 [图片] 本节知识点 1，小程序图片的选取 2，小程序图片的上传 3，小程序图片的存储 4，获取云端图片并显示 下面就来具体讲解下具体实现步骤 图片的选择和上传 index.wxml文件如下 [代码] <view class='item_root' bindtap='chuantupian'> <text>{{zhaopian}}</text> <view class='right_arrow' /> </view> [代码] index.js文件如下 [代码] //上传图片 chuantupian() { let that = this; let timestamp = (new Date()).valueOf(); wx.chooseImage({ success: chooseResult => { wx.showLoading({ title: '上传中。。。', }) // 将图片上传至云存储空间 wx.cloud.uploadFile({ // 指定上传到的云路径 cloudPath: timestamp + '.png', // 指定要上传的文件的小程序临时文件路径 filePath: chooseResult.tempFilePaths[0], // 成功回调 success: res => { console.log('上传成功', res) wx.hideLoading() wx.showToast({ title: '上传图片成功', }) if (res.fileID) { that.setData({ zhaopian: '图片如下', imgUrl: res.fileID }) } }, }) }, }) }, [代码] 到这里其实我们就可以实现图片的选取和上传功能了。 下面讲讲具体是如何实现的 首先我们通过wx.chooseImage来获取相册里的图片 再获取照片成功后，我们用当前时间戳命名图片，然后使用 wx.cloud.uploadFile方法来实现图片的上传 在上传成功后，会有如下回调。下图中的filenId就是我们在云存储中的路径，可以直接用这个路径来获取图片并显示的。 [图片] 到这里我们就轻松的实现了小程序图片上传的功能，是不是很简单。 有任何关于编程的问题都可以加我微信2501902696（备注编程开发） 编程小石头，码农一枚，非著名全栈开发人员。分享自己的一些经验，学习心得，希望后来人少走弯路，少填坑。 视频讲解地址：https://edu.csdn.net/course/play/9604/281187 [图片]

经过一段时间对微信小程序的研发后 总结出以下三种授权登录的方式，我给他们命名为‘一次性授权’‘永久授权’‘不授权’ 1.一次性授权 常规写法，需要获取用户公开信息（头像，昵称等）时，判断调取授权登录接口，但是此方法如果不经处理的话 用户如果拒绝授权或者删除该微信小程序后 需要重新调取并获取用户公开信息（头像，昵称等），此方法用户体验较差，不建议使用； 2.永久授权 在不必要使用用户公开信息（头像，昵称等）时，不调取授权登录接口，只有在必要的时候再去判断调取授权登录接口并把获取到的用户公开信息存入数据库，这样在每次登录时直接先运行指定函数从数据库索取需要的用户公开信息（头像，昵称等）即可，此方法在删除小程序后不用再次去授权登录（因为在用户第一次授权登录时已经把用户的公开信息存入数据库了以后直接向数据库索取即可），建议使用； 3.不授权 不需要授权登录获取用户公开信息（头像，昵称等），使用wx.login获取用户code并传入后台，后台可以通过用户的code值向微信要一个值（具体需要问后台，我只是个小前端，后台的东西不是很懂，只是知道一些逻辑而且也已经成功实现）然后通过这个用code换取的值就可以识别到指定用户，如果需要的话，前端要显示的头像、昵称等这些信息可以使用自定义可编辑的功能，当然，也可以通过<open-data type=“userAvatarUrl”></open-data><open-data type=“userNickName”></open-data>小程序提供的这个组件显示用户的头像及昵称（不过这个组件只有显示功能），用户如果想直接使用自己的头像昵称，也可以自行授权（比如添加个引导按钮什么之类的），建议使用； [图片][图片] 文中使用的微信自带接口、组件及函数： <open-data type=“userAvatarUrl”></open-data> <open-data type=“userNickName”></open-data> wx.login({ success(res){ console.log(res.code) } }) 微信授权登录 以上三种方式可以灵活运用，也可以把需要的结合到一起，并不冲突； 当然，大佬很多，我也只是个小前端而已，第一次发表技术方面的帖子，希望互相学习，互相指导，如有说的不对的地方还望大佬们及时指出！！！ 谢谢