[图片] [图片]

小程序自定义 navigationBar Wux UI 正常跑起来后接下来应该做 navigationBar 自定义 navigationBar 小程序原生 navigationBar 不能满足项目需求，需要折腾一下。 现在用了 Wux UI 那 navbar 应该很舒服了，直接引用，嗯～～跟想象的差太多，好像不是一个意思，不香了～ 之前项目也是自定义了 navigationBar 但是后来改需求加了很多功能，代码写的乱的很，今天从新撸一个。 需求： 返回首页 统一样式 自定义返回箭头 title居左或居中 产品酝酿中～ 遵守不造轮子原则，有需求第一步应该是去社区找答案。 搜索文章 [图片] 嗯～第一个就是，查看后发现功能有的多，不很适合我，pass。 [图片] 很完善,有点复杂，没有耐心看～。。 [图片] 我秀哥，直接上片段 [图片] 简单的组件，值得一试 [图片] 写的很清晰，值得一试 总结： 社区干货真的多！ 开始自定义 navigationBar 各种尝试后选择了两个组件最后这两个，稍微改造了一下。 链接： https://developers.weixin.qq.com/community/develop/article/doc/000804d4ce4370bfdcb80cbdb51013 https://developers.weixin.qq.com/community/develop/article/doc/000862ff684eb80e52983b9ad52813 第一个组件的使用方法很清晰，但是貌似好多功能用不到 [图片] 第二个就简单了，跟我之前项目用的差不多，撸起来。 [代码]const app = getApp() Component({ properties: { text: { type: String, value: 'Wechat' }, back: { type: Boolean, value: false }, home: { type: Boolean, value: false } }, data: { statusBarHeight: app.globalData.statusBarHeight + 'px', navigationBarHeight: (app.globalData.statusBarHeight + 44) + 'px' }, methods: { backHome: function () { let pages = getCurrentPages() wx.navigateBack({ delta: pages.length }) }, back: function () { wx.navigateBack({ delta: 1 }) } } }) [代码] 看起来就很舒服。back，home，在加一个textLeft就能满足需求了 第一种方案的计算方式 [代码]const MenuRect = wx.getMenuButtonBoundingClientRect() const statusBarHeight = wx.getSystemInfoSync().statusBarHeight; const height = (MenuRect.top - statusBarHeight) * 2 + MenuRect.height +MenuRect.top [代码] 第二种方案的计算方式 [代码]statusBarHeight，用来获取手机状态栏的高度，这个需要在全局app.js中的onLaunch，调用wx.getSystemInfo获取，navigationBarHeight+默认的高度，这个是设定整个导航栏的高度， [代码] en~ 结合一下 [代码]const SysInfo = wx.getSystemInfoSync() const MenuRect = wx.getMenuButtonBoundingClientRect() Component({ properties: { text: { type: String, value: 'Wechat' }, back: { type: Boolean, value: false }, textLeft: { type: Boolean, value: false }, home: { type: Boolean, value: false } }, data: { statusBarHeight: '', navigationBarHeight: '' }, attached() { this.initLayout(); }, methods: { initLayout() { const statusBarHeight = SysInfo.statusBarHeight; const height = (MenuRect.top - statusBarHeight) * 2 + MenuRect.height this.setData({ statusBarHeight: statusBarHeight + 'px', navigationBarHeight: `height:${height + statusBarHeight}px;line-height:${height}px;font-size:${SysInfo.fontSizeSetting - 2}pt;`, }) }, backHome: function () { console.log('你点击首页') let pages = getCurrentPages() wx.navigateBack({ delta: pages.length }) }, back: function () { console.log('你点击返回') wx.navigateBack({ delta: 1 }) } } }) [代码] 然后简单的修改下 wxml，返回+首页同时存在的情况应该不需要，一般都是单独存在。新增 textLeft 这个css。替换图标，从阿里妈妈找了两个图标。https://www.iconfont.cn/ 修改过程中发现作者 title 使用的 position。我习惯用flex，测试发现会有1px的误差抖动，忽略了～～，较真儿的话让设计去比对下吧。。 然后小程序进行配置,以下复制自： https://developers.weixin.qq.com/community/develop/article/doc/000804d4ce4370bfdcb80cbdb51013 先说下两种配置方法： [代码]①全局配置navigationStyle： 调试基础库>=1.9.0 微信客户端>=6.6.0 app.json { "usingComponents": { "navigationBar": "/components/navigationBar/navigationBar" }, "window": { "navigationStyle": "custom" } } ②单页面配置navigationStyle 调试基础库>=2.4.3 微信客户端版本>=7.0.0 自定义的页面.json { "window": { "navigationStyle": "default" } } { "navigationStyle": "custom", "usingComponents": { "navigationBar": "/components/navigationBar/navigationBar" } } [代码] 两者的区别就是，全局配置放在app.json文件里，单页面配置放在自定义页面配置文件里 demo： https://github.com/Grainfills/Wux-Weapp 总结 基于以上两位老哥的代码进行了简单拼接，满足了我的需求。链接贴在了上面👆。再写小程序的时候已经没之前那么慌了，学会了借鉴大佬的代码，节省了很多头发，丰富了开发过程，感谢。接下来常见的功能应该还是借鉴大佬的思路或者用 wux 直接实现。 总之一句话社区干货真的多。

这篇文章主要是解决小程序无限滚动瀑布流页面引起的ios内存不足，自动退出问题 问题回顾：我们有一个列表展示页，是无限瀑布流式的，展示的元素我们封装成了单个组件，暂且叫它[代码]Item组件[代码]。这个瀑布流包含若干个Item组件，并且这个Item组件也比较复杂，包含各种展示样式（根据不同类型，大概有9种吧，反正渲染节点很多），在进行滑动的过程中，item大概加载30-40个以后，就会造成小程序内存不足而退出，蓝瘦香菇… 点击此处查看二期 解决思路： 将超出屏幕一定部分的列表内的组件进行不渲染的处理（也就是用wx:if卸载掉组件），当到达渲染临界点时再开始渲染；保证每次少量的数据展示。 我们的项目中是保持15条Item，我们是每次分页请求5条，按照前5条，中间5条和后5条来划分，如果不在这个范围，则用一个等高度的骨架代替，并且卸载这些组件 实现方式 使用曝光监听，当一个Item曝光时，记录Item高度，并放到数组里面，作为骨架的填充高度，如果已经记录了高度，则不再重复记录；曝光时向外传递一个当前渲染范围的中心值（比如当前Item所属页码，或者当前Item索引），以此进行处理； 这里有一点要注意，如果你的列表item组件比较复杂，需要在ready的时候将记录的高度设置为item最小高度，不然组件重新装载时会有一定的渲染时间，在临界点会造成跳屏【此处已经通过骨架组件解决，可以忽略，只是作为踩坑记录】 此时优化点 为避免频繁setData和渲染，做了防抖函数，时间是600ms 此时缺点 滑动特别快时，会出现白屏，是因为曝光监听是在组件里面，而超快速滚动时，组件没有装载进来，也无法进行曝光监听，所以无法触发，这里考虑用骨架组件进行二次监听曝光 优化迭代 将骨架组件作为外壳套在Item外面（用[代码]slot[代码]），并对骨架进行监听曝光，可以解决上面缺点 给骨架组件做一个常规骨架屏样式，而不是纯白色，看起来更优雅 最后，还是尽量减少节点数，优化代码

[图片] 为什么要做这个？ 主要是在项目中，智酷君发现的一些问题 一些页面是通过扫码和订阅消息访问后，没有直接可以点击去首页的，需要添加一个home链接 需要添加自定义搜索功能 需要自定义一些功能按钮 [图片] 其实,第一个问题，在最近的微信版本更新中已经优化了，通过 小程序模板消息 过来的，系统会自动加上home按钮，但对于其他的访问方式则没有支持~ 一个不大不小的问题：两边ICON不对齐问题 [图片] 智酷君之前尝试了各种解决方法，发现有一个问题，就是现在手机屏幕太多种多样，有 传统头部、宽/窄刘海屏、水滴屏等等，无法八门，很多解决方案都无法解决特殊头部，系统**“胶囊按钮”** 和 自定义按钮在Android屏幕可能有 几像素不对齐 的问题（强迫症的噩梦）。 下面分享下一个相对比较完善的解决方案： [图片] 小程序代码段DEMO Link: https://developers.weixin.qq.com/s/cuUaCimT72cH ID: cuUaCimT72cH 智酷君做了一个demo代码段，方便大家直接用IDE工具查看源码~ [图片] 页面配置 1、页面JSON配置 [代码]{ "usingComponents": { "NavComponent": "/components/nav/common" //以插件的方式引入 }, "navigationStyle": "custom" //自定义头部需要设置 } [代码] 如果需要自定义头部，需要设置navigationStyle为 “custom” 2、页面代码 [代码]<!-- home 类型的菜单 --> <NavComponent v-title="自定义头部" bind:commonNavAttr="commonNavAttr"></NavComponent> <!-- 搜索菜单 --> <NavComponent is-search="true" bind:commonNavAttr="commonNavAttr"></NavComponent> [代码] 可以在自定义导航标签上添加属性配置来设置功能，具体按照实际需要来 3、目录结构 [代码]│ ├─components │ └─nav │ common.js │ common.json │ common.wxml │ common.wxss │ ├─images │ back.png │ home.png │ └─index index.js index.json index.wxml index.wxss search.js search.json search.wxml search.wxss [代码] 仅供参考 插件对应的JS部分 components/nav/common.js部分 [代码]const app = getApp(); Component({ properties: { vTitle: { type: String, value: "" }, isSearch:{ type: Boolean, value: false } }, data: { haveBack: true, // 是否有返回按钮，true 有 false 没有 若从分享页进入则没有返回按钮 statusBarHeight: 0, // 状态栏高度 navbarHeight: 0, // 顶部导航栏高度 navbarBtn: { // 胶囊位置信息 height: 0, width: 0, top: 0, bottom: 0, right: 0 }, cusnavH: 0, //title高度 }, // 微信7.0.0支持wx.getMenuButtonBoundingClientRect()获得胶囊按钮高度 attached: function () { if (!app.globalData.systeminfo) { app.globalData.systeminfo = wx.getSystemInfoSync(); } if (!app.globalData.headerBtnPosi) app.globalData.headerBtnPosi = wx.getMenuButtonBoundingClientRect(); console.log(app.globalData) let statusBarHeight = app.globalData.systeminfo.statusBarHeight // 状态栏高度 let headerPosi = app.globalData.headerBtnPosi // 胶囊位置信息 console.log(statusBarHeight) console.log(headerPosi) let btnPosi = { // 胶囊实际位置，坐标信息不是左上角原点 height: headerPosi.height, width: headerPosi.width, top: headerPosi.top - statusBarHeight, // 胶囊top - 状态栏高度 bottom: headerPosi.bottom - headerPosi.height - statusBarHeight, // 胶囊bottom - 胶囊height - 状态栏height （胶囊实际bottom 为距离导航栏底部的长度） right: app.globalData.systeminfo.windowWidth - headerPosi.right // 这里不能获取 屏幕宽度，PC端打开小程序会有BUG，要获取窗口高度 - 胶囊right } let haveBack; if (getCurrentPages().length != 1) { // 当只有一个页面时，并且是从分享页进入 haveBack = false; } else { haveBack = true; } var cusnavH = btnPosi.height + btnPosi.top + btnPosi.bottom // 导航高度 console.log( app.globalData.systeminfo.windowWidth, headerPosi.width) this.setData({ haveBack: haveBack, // 获取是否是通过分享进入的小程序 statusBarHeight: statusBarHeight, navbarHeight: headerPosi.bottom + btnPosi.bottom, // 胶囊bottom + 胶囊实际bottom navbarBtn: btnPosi, cusnavH: cusnavH }); //将实际nav高度传给父类页面 this.triggerEvent('commonNavAttr',{ height: headerPosi.bottom + btnPosi.bottom }); }, methods: { _goBack: function () { wx.navigateBack({ delta: 1 }); }, bindKeyInput:function(e){ console.log(e.detail.value); } } }) [代码] 解决不同屏幕头部不对齐问题的终极办法是 wx.getMenuButtonBoundingClientRect() 这个方法从微信7.0.0开始支持，通过这个方法我们可以获取到右边系统胶囊的top、height、right等属性，这样无论是水滴屏、刘海屏、异形屏，都能完美对齐右边系统默认的胶囊bar，完美治愈强迫症~ APP.js 部分 [代码]//app.js App({ /** * 加载页面 * @param {*} options */ onShow: function (options) { }, onLaunch: async function () { let self = this; //设置默认分享 this.globalData.shareData = { title: "智酷方程式" } // this.getSysInfo(); }, globalData: { //默认分享文案 shareData: {}, qrCodeScene: false, //二维码扫码进入传参 systeminfo: false, //系统信息 headerBtnPosi: false, //头部菜单高度 } }); [代码] 将获取的参数存储在一个全局变量globalData中，可以减少反复调用的性能消耗。 插件HTML部分 [代码]<view class="custom_nav" style="height:{{navbarHeight}}px;"> <view class="custom_nav_box" style="height:{{navbarHeight}}px;"> <view class="custom_nav_bar" style="top:{{statusBarHeight}}px; height:{{cusnavH}}px;"> <!-- 搜索部分--> <block wx:if="{{isSearch}}"> <input class="navSearch" style="height:{{navbarBtn.height-2}}px;line-height:{{navbarBtn.height-4}}px; top:{{navbarBtn.top+1}}px; left:{{navbarBtn.right}}px; border-radius:{{navbarBtn.height/2}}px;" maxlength="10" bindinput="bindKeyInput" placeholder="输入文字搜索" /> </block> <!-- HOME 部分--> <block wx:else> <view class="custom_nav_icon {{!haveBack||'borderLine'}}" style="height:{{navbarBtn.height}}px;line-height:{{navbarBtn.height-2}}px; top:{{navbarBtn.top}}px; left:{{navbarBtn.right}}px; border-radius:{{navbarBtn.height/2}}px;"> <view wx:if="{{haveBack}}" class="icon-back" bindtap='_goBack'> <image src='/images/back.png' mode='aspectFill' class='back-pre'></image> </view> <view wx:if="{{haveBack}}" class='navbar-v-line'></view> <view class="icon-home"> <navigator class="home_a" url="/pages/home/index" open-type="switchTab"> <image src='/images/home.png' mode='aspectFill' class='back-home'></image> </navigator> </view> </view> <view class="nav_title" style="height:{{cusnavH}}px; line-height:{{cusnavH}}px;"> {{vTitle}} </view> </block> </view> </view> </view> [代码] 主要是对几种状态的判断和定位的计算。 插件CSS部分 [代码]/* components/nav/test.wxss */ .custom_nav { width: 100%; background: #3a7dd7; position: relative; z-index: 99999; } .custom_nav_box { position: fixed; width: 100%; background: #3a7dd7; z-index: 99999; border-bottom: 1rpx solid rgba(255, 255, 255, 0.3); } .custom_nav_bar { position: relative; z-index: 9; } .custom_nav_box .nav_title { font-size: 28rpx; color: #fff; text-align: center; position: absolute; max-width: 360rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 1; } .custom_nav_box .custom_nav_icon { position:absolute; z-index: 2; display: inline-block; border-radius: 50%; vertical-align: top; font-size:0; box-sizing: border-box; } .custom_nav_box .custom_nav_icon.borderLine { border: 1rpx solid rgba(255, 255, 255, 0.3); background: rgba(0, 0, 0, 0.1); } .navbar-v-line { width: 1px; margin-top: 14rpx; height: 32rpx; background-color: rgba(255, 255, 255, 0.3); display: inline-block; vertical-align: top; } .icon-back { display: inline-block; width: 74rpx; padding-left: 20rpx; vertical-align: top; /* margin-top: 12rpx; vertical-align: top; */ height: 100%; } .icon-home { /* margin-top: 8rpx; vertical-align: top; */ display: inline-block; width: 80rpx; text-align: center; vertical-align: top; height: 100%; } .icon-home .home_a { height: 100%; display: inline-block; vertical-align: top; width: 35rpx; } .custom_nav_box .back-pre, .custom_nav_box .back-home { width: 35rpx; height: 35rpx; vertical-align: middle; } .navSearch { width: 200px; background: #fff; font-size: 14px; position: absolute; padding: 0 20rpx; z-index: 9; } [代码] 总结： 通过微信API: getMenuButtonBoundingClientRect(),结果各类手机屏幕的适配问题 将算好的参数存储在全局变量中，一次计算全局使用，爽YY~ ​ 往期回顾： [填坑手册]小程序PC版来了，如何做PC端的兼容？！ [填坑手册]小程序Canvas生成海报（一） [拆弹时刻]小程序Canvas生成海报（二）

在小程序中，常常有些数据需要在几个页面或组件中共享。对于这样的数据，在 web 开发中，有些朋友使用过 redux 、 vuex 之类的 状态管理 框架。在小程序开发中，也有不少朋友喜欢用 MobX ，说明这类框架在实际开发中非常实用。 小程序团队近期也开源了 MobX 的辅助模块，使用 MobX 也更加方便。那么，在这篇文章中就来介绍一下 MobX 在小程序中的一个简单用例！ 在小程序中引入 MobX 在小程序项目中，可以通过 npm 的方式引入 MobX 。如果你还没有在小程序中使用过 npm ，那先在小程序目录中执行命令： [代码]npm init -y [代码] 引入 MobX ： [代码]npm install --save mobx-miniprogram mobx-miniprogram-bindings [代码] （这里用到了 mobx-miniprogram-bindings 模块，模块说明在这里： https://developers.weixin.qq.com/miniprogram/dev/extended/functional/mobx.html 。） npm 命令执行完后，记得在开发者工具的项目中点一下菜单栏中的 [代码]工具[代码] - [代码]构建 npm[代码] 。 MobX 有什么用呢？ 试想这样一个场景：制作一个天气预报资讯小程序，首页是列表，点击列表中的项目可以进入到详情页。 首页如下： [图片] 详情页如下： [图片] 每次进入首页时，需要使用 [代码]wx.request[代码] 获取天气列表数据，之后将数据使用 setData 应用到界面上。进入详情页之后，再次获取指定日期的天气详情数据，展示在详情页中。 这样做的坏处是，进入了详情页之后需要再次通过网络获取一次数据，等待网络返回后才能将数据展示出来。 事实上，可以在首页获取天气列表数据时，就一并将所有的天气详情数据一同获取回来，存放在一个 数据仓库 中，需要的时候从仓库中取出来就可以了。这样，只需要进入首页时获取一次网络数据就可以了。 MobX 可以帮助我们很方便地建立数据仓库。接下来就讲解一下具体怎么建立和使用 MobX 数据仓库。 建立数据仓库 数据仓库通常专门写在一个独立的 js 文件中。 [代码]import { observable, action } from 'mobx-miniprogram' // 数据仓库 export const store = observable({ list: [], // 天气数据（包含列表和详情） // 设置天气列表，从网络上获取到数据之后调用 setList: action(function (list) { this.list = list }), }) [代码] 在上面数据仓库中，包含有数据 [代码]list[代码] （即天气数据），还包括了一个名为 [代码]setList[代码] 的 action ，用于更改数据仓库中的数据。 在首页中使用数据仓库 如果需要在页面中使用数据仓库里的数据，需要调用 [代码]createStoreBindings[代码] 来将仓库中的数据绑定到页面数据中，然后就可以在页面中直接使用仓库数据了。 [代码]import { createStoreBindings } from 'mobx-miniprogram-bindings' import { store } from './store' Page({ onLoad() { // 绑定 MobX store this.storeBindings = createStoreBindings(this, { store, // 需要绑定的数据仓库 fields: ['list'], // 将 this.data.list 绑定为仓库中的 list ，即天气数据 actions: ['setList'], // 将 this.setList 绑定为仓库中的 setList action }) // 从服务器端读取数据 wx.showLoading() wx.request({ // 请求网络数据 // ... success: (data) => { wx.hideLoading() // 调用 setList action ，将数据写入 store this.setList(data) } }) }, onUnload() { // 解绑 this.storeBindings.destroyStoreBindings() }, }) [代码] 这样，可以在 wxml 中直接使用 list ： [代码]<view class="item" wx:for="{{list}}" wx:key="date" data-index="{{index}}"> <!-- 这里可以使用 list 中的数据了！ --> <view class="title">{{item.date}} {{item.summary}}</view> <view class="abstract">{{item.temperature}}</view> </view> [代码] 在详情页中使用数据仓库 在详情页中，同样可以使用 [代码]createStoreBindings[代码] 来将仓库中的数据绑定到页面数据中： [代码]import { createStoreBindings } from 'mobx-miniprogram-bindings' import { store } from './store' Page({ onLoad(args) { // 绑定 MobX store this.storeBindings = createStoreBindings(this, { store, // 需要绑定的数据仓库 fields: ['list'], // 将 this.data.list 绑定为仓库中的 list ，即天气数据 }) // 页面参数 `index` 表示要展示哪一条天气详情数据，将它用 setData 设置到界面上 this.setData({ index: args.index }) }, onUnload() { // 解绑 this.storeBindings.destroyStoreBindings() }, }) [代码] 这样，这个页面 wxml 中也可以直接使用 list ： [代码]<view class="title">{{list[index].date}}</view> <view class="content">温度 {{list[index].temperature}}</view> <view class="content">天气 {{list[index].weather}}</view> <view class="content">空气质量 {{list[index].airQuality}}</view> <view class="content">{{list[index].details}}</view> [代码] 完整示例 完整例子可以在这个代码片段中体验： https://developers.weixin.qq.com/s/YhfvpxmN7HcV 这个就是 MobX 在小程序中最基础的玩法了。相关的 npm 模块文档可参考 mobx-miniprogram-bindings 和 mobx-miniprogram 。 MobX 在实际使用时还有很多好的实践经验，感兴趣的话，可以阅读一些其他相关的文章。

开门见山 工具地址 点我直达>>painter-custom-poster 由于挂载在github page上，打开速度会慢一些，请耐心等待或自行解决git网速问题 背景 在做小程序时候，我们经常会有一个需求，需要将小程序分享到朋友圈，但是朋友圈是不允许直接分享小程序，那我们还有其他的办法解决吗?答案肯定是有的，即 canvas 生成个性化海报分享图片到朋友圈 分析 小程序中有大量的生成图片需求，但是使用过 canvas 的人，都会发现一些难以预料的问题>>有关小程序的坑 直接在 canvas 上绘制图形，对于普通开发者来说代码会特别凌乱并且难以维护，经常会花费很久的时间去优化代码 不同的环境渲染问题，例如在开发者工具看起来好好的，一到 Android 真机，就出现图片不显示，位置不对应等等问题 解决 那可不可以开发一款生成海报的插件库呢? 首先，只需要提供一份简单的参数配置文件即可 解决掉小程序Canvas遇到的一些大大小小的坑 有严苛的测试环节，解决各种环境和各种机型遇到的问题，并提供稳定的线上版本 长期维护，并有专人更新迭代更新颖的功能 以上的要求当然是可以的，曾经的我也想尝试开发一款出来，但是后来尝试了几款现成的工具之后就放弃了，毕竟轮子这个东西，是需要不断维护更新的，另外已经有这么多优秀现成的插件了，我为何还要费力去写呢，贡献代码岂不更美哉，以下是我收集的几款 小程序生成图片库，轻松通过 json 方式绘制一张可以发到朋友圈的图片>>Painter 小程序组件-小程序海报组件>>wxa-plugin-canvas 微信小程序：一个 json 帮你完成分享朋友圈图片>>mp_canvas_drawer 我想干什么 唠了这么多，好像提供给大家插件就没我什么事情了…想走是不可能的 为了能够制作出更酷炫的海报，我思考了许久 虽然有了插件后，只需要提供配置代码就能够制作出一款海报来，但是我发现还是有些许问题 制作海报效率还是不够高，微调一个元素的大小和位置，就需要不断的修改保存代码，等待片刻，查看效果，真的烦 一个小小的位置调整可能就需要来回调整无数次，这种最简单的机械化劳动，这辈子是不可能的 拿着完美的稿子，递给设计师看，这个位置不对，这个线太粗，这个颜色太重…你信不信我打死你 对于一些精美复杂的海报，实现起来真的不太现实 那我需要怎么做呢，请点击这个链接体验>>painter-custom-poster 点击左侧例子展示中的任意一个例子，然后导入代码就能看到效果图，这下你应该能猜到了我的想法了 如何实现 刚开始我想用简单的html和css加拖动功能实现，通过简单尝试之后就放弃了，因为这个功能真的太复杂了，简单的工具肯定是不行的 中间这个计划停滞了很长时间，一度已经放弃 直到发现了这个库fabric.js，真的太太优秀了，赞美之词无以言表，唯一的缺点就是中文教程太少，必须生啃英文加谷歌翻译 fabric介绍，你可以很容易地创建任何一个简单的形状，复杂的形状，图像;将它们添加到画布中，并以任何你想要的方式进行修改：位置、尺寸、角度、颜色、笔画、不透明度等 How To Use 目前工具一共分成4部分 例子展示 用来将一些用户设计的精美海报显示出来，通过点击对应的例子并将代码导入画布中 画布区 显示真实的海报效果，画布里添加的元素，都可以直接用鼠标进行拖动，旋转，缩放操作 操作区 第一排四个按钮 复制代码 将画布的展示效果转化成小程序海报插件库所需要的json配置代码，目前我使用的是Painter库，默认会转化成这个插件的配置代码，将代码直接复制到card.js即可 查看代码 这个功能用不用无所谓，可以直观的看到生成的代码 导出json 将画布转化成fabric所需要的json代码，方便将自己设计的海报代码保存下来 导入json 将第3步导出的json代码导入，会在画布上显示已设计的海报样式 第二排五个按钮 画布 画布的属性参数 详解见下方 文字 添加文字的属性参数 详解见下方 矩形 添加矩形的属性参数 详解见下方 图片 添加图片的属性参数 详解见下方 二维码 添加二维码的属性参数 详解见下方 第三排 各种元素的详细设置参数 激活区 激活对象是指鼠标点击画布上的元素，该对象会被蓝色的边框覆盖，此时该对象被激活，可以执行拖动 旋转 缩放等操作 激活区只有对象被激活才会出来，用来设置激活对象的各种配置参数，修改value值后，实时更新当前激活对象的对应状态，点击其他区域，此模块将隐藏 快捷键 ‘←’ 左移一像素 ‘→’ 右移一像素 ‘↑’ 上移一像素 ‘↓’ 下移一像素 ‘ctrl + z’ 撤销 ‘ctrl + y’ 恢复 ‘delete’ 删除 ‘[’ 提高元素的层级 ‘]’ 降低元素的层级 布局属性 通用布局属性 属性 说明 默认 rotate 旋转，按照顺时针旋转的度数 0 width、height view 的宽度和高度 top、left 如 css 中为 absolute 布局时的作用 0 background 背景颜色 rgba(0，0，0，0) borderRadius 边框圆角 0 borderWidth 边框宽 0 borderColor 边框颜色 #000000 shadow 阴影 ‘’ shadow 可以同时修饰 image、rect、text 等 。在修饰 text 时则相当于 text-shadow；修饰 image 和 rect 时相当于 box-shadow 使用方法： [代码]shadow: 'h-shadow v-shadow blur color'; h-shadow: 必需。水平阴影的位置。允许负值。 v-shadow: 必需。垂直阴影的位置。允许负值。 blur: 必需。模糊的距离。 color: 必需。阴影的颜色。 举例: shadow:10 10 5 #888888 [代码] 渐变色支持 你可以在画布的 background 属性中使用以下方式实现 css 3 的渐变色，其中 radial-gradient 渐变的圆心为 中点，半径为最长边，目前不支持自己设置。 [代码]linear-gradient(-135deg, blue 0%, rgba(18, 52, 86, 1) 20%, #987 80%) radial-gradient(rgba(0, 0, 0, 0) 5%, #0ff 15%, #f0f 60%) [代码] ！！！注意：颜色后面的百分比一定得写。 画布属性 属性 说明 默认 times 控制生成插件代码的宽度大小，比如画布宽100，times为2，生成的值为200 1 文字属性 属性名称 说明 默认值 text 字体内容 别跟我谈感情，谈感情伤钱 maxLines 最大行数 不限，根据 width 来 lineHeight 行高（上下两行文字baseline的距离） 1.3 fontSize 字体大小 30 color 字体颜色 #000000 fontWeight 字体粗细。仅支持 normal， bold normal textDecoration 文本修饰，支持none underline、 overline、 linethrough none textStyle fill： 填充样式，stroke：镂空样式 fill fontFamily 字体 sans-serif textAlign 文字的对齐方式，分为 left， center， right left 备注: fontFamily，工具中的第一个例子支持文字字体，但是导入小程序为什么看不到呢，小程序官网加载网络字体方法>> 加载字体教程>> 文字高度 是maxLines lineHeight2个字段一起计算出来的 图片属性 属性 说明 默认 url 图片路径 mode 图片裁剪、缩放的模式 aspectFill mode参数详解 scaleToFill 缩放图片到固定的宽高 aspectFill 图片裁剪显示对应的宽高 auto 自动填充 宽度全显示 高度自适应居中显示 Tips（一定要看哦～） 本工具不考虑兼容性，如发现不兼容请使用google浏览器 painter现在只支持这几种图形，所以暂不支持圆，线等 如果编辑过程，一个元素被挡住了，无法操作，请选择对象并通过[ ]快捷键提高降低元素的层级 文字暂不支持直接缩放操作，因为文字大小和元素高度不容易计算，可以通过修改激活栏目maxLines lineHeight fontSize值来动态改变元素 如发现导出的代码一个元素被另一个元素挡住了，请手动调整元素的位置，json数组中元素越往后层级显示就越高，由于painter没有提供层级参数，所以目前只能这样做 本工具导出代码全是以px为单位，为什么不支持rpx， 因为painter在rpx单位下，阴影和边框宽会出现大小计算问题，由于原例子没有提供px生成图片方案，可以下载我这里修改过的demo>>Painter即可解决 文本宽度随着字数不同而动态变化，想在文本后面加个图标根据文本区域长度布局， 请参考Painter文档这块教程直接修改源码 由于本工具开发有些许难度，如出现bug，建议或者使用上的问题，请提issue，源码地址>>painter-custom-poster 海报贡献 如果你设计的海报很好看，并且愿意开源贡献，可以贡献你的海报代码和缩略图，例子代码文件在example中，按顺序排列，例如现在库里例子是example2.js，那你添加example3.js和example3.jpg图片，事例可以参考一下文件夹中源码，然后在index.js中导出一下 导出代码 代码不要格式化，会报错，请原模原样复制到json字段里 生成缩略图 刚开始我想在此工具中直接生成图片，但是由于浏览器图片跨域问题导致报错失败 所以请去小程序中生成保存图片，图片质量设置0.2，并去tinypng压缩一下图片 找到painter.js，替换下边这个方法，可以生成0.2质量的图片，代码如下 [代码] saveImgToLocal() { const that = this; setTimeout(() => { wx.canvasToTempFilePath( { canvasId: 'k-canvas', fileType: 'jpg', quality: 0.2, success: function(res) { that.getImageInfo(res.tempFilePath); }, fail: function(error) { console.error(`canvasToTempFilePath failed, ${JSON.stringify(error)}`); that.triggerEvent('imgErr', { error: error }); } }, this ); }, 300); } [代码] TODO 颜色值选择支持调色板工具 文字padding支持 缩放位置弹跳问题优化 假如需求大的话，支持其他几款插件库代码的生成 ~ 创作不易，如果对你有帮助，请给个星星 star✨✨ 谢谢 ~

博客 写作的过程其实就是思考的字面化，梳理知识体系的同时反思知识的内化程度，分清楚哪些是“知道了”，哪些是“掌握了”。 通过博客的形式分享是学习的一种技巧，内化知识的同时也从分享中得到快乐。 用写作来记录成长的过程，保持这种习惯能让你听到意志力成长的声音。 怎么搭建自己的博客 个人主页注册。指的是在博客网站、论坛或社区上注册个人主页。例如知乎、掘金、csdn、简书 静态网站生成。通常是由jekyll、hugo或hexo等技术生成静态网站，然后通过git上传到Github Pages、Coding Pages等平台 内容管理系统。带有后台管理的博客系统，需要服务器、数据库以及域名等，然后安装成熟的WordPress、ghost等等 个人主页注册 注册形式的缺点是平台风格单一、自定义基本不存在、广告困扰、优势是没有技术门槛，注册即可、拥有成熟的平台支持，利于推广。 静态网站 涉及内容 Markdown / Linux命令 / git / Github Pages / 域名解析 静态网站的缺点是每次发布要重新编译、容易入坑、各家平台换来换去会中毒、解析速度不是很完美、自己搞定站长收录等等麻烦，优势是快速搭建、自定义程度高、扩展性强、主题丰富，高颜值、更新速度快。 比较流行的有jekyll、hugo以及hexo等。一般将网站搭在Github Pages或Coding Pages上。 内容管理系统 涉及内容 服务器 / 域名解析 / 数据库 / Linux命令 / ftp 管理系统的缺点是臃肿、扩展性差、需要自己购买服务器、一定的时间成本、一定的web知识支撑、当初搞wordpress真的太难了。。。优势是成熟的后台管理、功能丰富、内置搜索、评论等常用功能，各种插件。 痛并快乐着 以上几种都尝试过了，成宿成宿的折腾，当然收获也是并存的，丰富了自己的知识面。最痛心的是两年并没有产出多少内容，白折腾。近期瞄上了 [代码]docsify[代码] 简洁、舒服看对眼了，在搞最后一次。 基础搭建 docsify + coding + coding pages. 基础搭建参照文档全局安装docsify、创建仓库、上传coding，自动部署至coding pages。一气呵成。码云自定义域名收费，github自动部署要配置、访问速度比不上国内服务商，coding pages 还支持收录，只需要 git push 自动部署，不要太舒服。 [图片] 为什么不用coding pages 这几天说要和朋友增加友链，加上之前在手机看自己博客感觉打开速度有点儿慢，索性在折腾一次吧。 ping 一下coding page速度延迟确实有点高。 [图片] 准备工作 docsify + coding pages + CDN 自己有一个腾讯云服务器、cos有免费额度、之前配置过CDN已经很熟悉操作、coding自动部署确实舒服，所以我选择了上述方案。 一顿操作后在ping 一下，嗯，还可以。 [图片] 踩到一个坑 （子域名负载均衡数量超出限制） 在一顿百度后的得到的答案全部都xxxx，最后求助腾讯云机器人客服。。 [图片] 嗯，这解释就很明白了，因为自定义域名要添加一条CNAME记录去指向coding pages，还需要在添加添加一条CNAME记录去指向CDN。不能相同主机值、相同线路类型下默认只能添加一条CNAME记录 那就好办了。 [图片] 升级工作 cos + cos 静态网站 + github + CDN + Serverless + github Actions 不知道为什么，感觉两条CNAME别扭，怪怪的，不妥。一阵搜索后制定了新的方案。 本地编写 --> git push github --> github update cos --> cos + CDN展示 --> cos资源变更，CDN刷新 准备 整理将要进行的操作步骤 新建 Github 仓库存放代码 添加 Github Secrets 创建 GitHub Actions 新建 cos 储存桶 存储桶开启静态网页 github Actions 使用 coscmd 自动同步至cos储存桶 创建 云函数 scf 使用云函数检测储存桶自动刷新CDN 测试 github Actions、 scf、CDN Github 相关配置 正常新建仓库，添加 Secrets 密钥（关键密钥使用明文很危险），创建 GitHub Actions 新建仓库 略过 添加 Secrets [图片] 创建 GitHub Actions [图片] [代码]name: push-upload-cos on: [push] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v1 - name: Run a one-line script && install cos cmd # 使用 coscmd 上传 run: sudo pip install coscmd - name: Run a multi-line script && cos config # 配置 coscmd 相关参数、Id、key、BUCKET、REGION env: Secret_Id: ${{ secrets.Secret_Id }} Secret_key: ${{ secrets.Secret_Key }} BUCKET: www-1257003685 REGION: ap-guangzhou # coscmd 使用--> coscmd config -a AChT4ThiXAbpBDEFGhT4ThiXAbp**** -s WE54wreefvds3462refgwewe**** -b examplebucket-1250000000 -r ap-beijing run: coscmd config -a $Secret_Id -s $Secret_key -b $BUCKET -r $REGION - name: Start Upload # coscmd 使用--> coscmd upload -r <localpath> <cospath> # coscmd upload -rs 同步上传，跳过md5相同的文件，用 -r 每次全部写入，没有必要 # 运行后发现 ./.git/* 下的文件特别大 每次同步耗时很久，没有必要同步， 使用 --ignore 忽略； # 详情 查看coscmd 文档：https://cloud.tencent.com/document/product/436/10976 run: coscmd upload -rs ./ / --ignore "./.git/*" [代码] 错误整理 [图片] [图片] 403 错误为 key 错误，检查没发现问题，用明文key的话正常，然后更新了一遍 secrets 还不行，最后发现是大小写问题。。。（吐血） coscmd 安装 需要 sudo pip ，直接pip报错 配置结束后，更新 github 仓库看有没有同步 [图片] 可以看到使用 -rs 跳过了md5相同的文件，忽略了.git/的文件。github 配置结束 腾讯云相关配置 创建储存桶 开启静态网页 配置CDN 新建云函数 测试 创建储存桶 && 开启静态网页 略过，按照腾讯云文档就可以操作 配置CDN 略过，一般不会有什么问题 新建云函数 需要注意 角色 和 地区。 去 SCF控制台 创建函数。地区需要和存储桶为相同地区 [图片] 创建角色，权限搜索scf即可。最好在外面创建角色，在创建函数那里跳出来新建怎么都是失败，角色无权限（给什么权限都没用。。困扰了很久）。外面新建角色后进入scf 会弹窗要授权，点击确定成功即可。 [图片] 新建函数 [图片] 配置函数，下载这个 demo 的代码，解压后修改里面的几个配置信息，包括secretId、secretKey、以及你的cdn域名 下载地址：https://ftp-1257003685.cos.ap-guangzhou.myqcloud.com/腾讯云/scf_about_cdn_refresh.zip 修改好过后，添加，可以测试一下运行是否成功。 [图片] [图片] 配置触发方式，cos 触发，对应的储存桶。一般配置两个，新增和删除，查看 coscmd 文档可以知道 它的上传方式为 put 而不是 post 。 [图片] 测试 全部配置完毕后进行以下几项测试 CDN 加速 Github git push GitHub Actions 运行结果 cos 储存桶更新记录 云函数触发 CDN 自助诊断 查看CDN刷新日志，确认流程无误 检查CDN，ping 一下网址。可以看到已经成功，响应速度提升明显。 [图片] GitHub Actions 运行结果 成功 [图片] 储存桶更新记录 && 云函数触发 成功 [图片] CDN 自助诊断 有问题就修复问题，直到成功 [图片] [图片] CDN刷新日志，确认流程无误 成功 [图片] 完结 [图片] 至此整个流程结束，可以愉快的玩耍了. GitHub Actions 以及 云函数 有更多的玩法，大家可以举一反三搞起来。 参考文章链接：https://cloud.tencent.com/developer/article/1114117

client-lib 文档 基础库和客户端的关系 小程序的能力需要微信客户端来支撑，每一个基础库都只能在对应的客户端版本上运行，高版本的基础库无法兼容低版本的微信客户端。文档 基础库更新 为了避免新版本的基础库给线上小程序带来未知的影响，微信客户端都是携带 上一个稳定版 的基础库发布的 文档 如何选择基础库 官方基础库分布数据 第一应该关注微信版本基础库分布数据，了解用户占比 [图片] 根据受用户UV影响占比选择 登陆微信公众平台–> 设置 —> 设置最低基础库版本。低于此版本微信会提示升级微信才能使用小程序。在配置前，查看近 30 天内访问当前小程序的用户所使用的基础库版本占比。 [图片] 选择合适的基础库 默认最低基础库为1.0.0.如果使用了类似tabbar等这些就需要选择基础库了。低于2.5.0打开小程序会发生错误相关功能无法使用。 [图片] [图片] 2.9.3 input textarea 是否会影响线上 开发工具本地调试选择基础库与移动设备无关。 [图片] 兼容 程序的功能不断的增加，但是旧版本的微信客户端并不支持新功能，所以在使用这些新能力的时候需要做兼容。文档 开发者可以在小程序中通过调用 wx.getSystemInfo 或者 wx.getSystemInfoSync 获取到当前小程序运行的基础库的版本号。通过版本号比较的方式进行运行低版本兼容逻辑。注意：不要直接使用字符串比较的方法进行版本号比较。 总结 以上内容全部来自开发文档。论看文档的重要性。同时建议大家多多登陆管理后台查看统计等模块。了解用户分布用户画像，以及自定义分析等等。

目录与页面模块 读代码首先应该认真阅读文档的[代码]README.md[代码]。 看下小书架页面模块、目录结构清晰，虽然模块不多，实际业务开发中首先应该构思拆解业务模块，确定目录结构。小程序包大小超过 2M 需要分包，所以从一开始确定目录结构的时候就要考虑进去，不然线上跑起来再去分包会有点小麻烦。 目录结构 [代码]├── config │ └── config.js ├── images ├── pages │ ├── books │ │ ├── books.js │ │ ├── books.json │ │ ├── books.wxml │ │ └── books.wxss │ ├── comment │ │ ├── comment.js │ │ ├── comment.js │ │ ├── comment.js │ │ └── comment.wxss │ ├── detail │ │ ├── detail.js │ │ ├── detail.js │ │ ├── detail.js │ │ └── detail.wxss │ ├── my │ │ ├── my.js │ │ ├── my.js │ │ ├── my.js │ │ └── my.wxss │ └── myBooks │ ├── myBooks.js │ ├── myBooks.js │ ├── myBooks.js │ └── myBooks.wxss ├── utils │ └── util.js ├── app.js ├── app.json ├── app.wxss └── project.config.json [代码] 各页面模块 页面 描述 books 首页/书籍列表页 comment 评论页面 detail 书籍详情页 my 个人中心页 myBooks 已购书籍页 接口封装 小书架没有对 wx.request 封装。考虑到是入门教程，没做处理也是正常。接口请求路径封装在 config.js [代码]// 服务器域名 const baseUrl = 'http://127.0.0.1:[your port]/'; // 获取书籍信息接口地址(可选择全部或单个书籍) const getBooksUrl = baseUrl + 'api/book/getBooks'; //... module.exports = { getBooksUrl: getBooksUrl //... }; [代码] 也可以根据个人习惯进行封装，这里一定要写注释以及考虑后期维护 [代码]let returnCancel = (memberId, refundId) => http.post(`api/return/goods/cancel`, { memberId: memberId, refundId: refundId}) export default { returnCancel }; [代码] 页面 book book.js 代码干净、整洁。注释很详细，虽然这是入门教程，但我们开发的时候也要养成这样的好习惯。 data [代码]data: { bookList: [], // 书籍列表数组 indicatorDots: false, // 是否显示轮播指示点 autoplay: false, // 是否自动播放轮播 sideMargin: '100rpx', // 幻灯片前后边距 showLoading: true // 是否显示loading态 //... }, [代码] onLoad getBookList 方法获取所有书籍列表，不要把所有的 wx.request 都写在load里面，简单封装下可维护性大大提高 [代码]/** * 获取所有书籍列表 */ getBookList: function() { let that = this; wx.request({ url: api.getBooksUrl, data: { is_all: 1 }, success: function(res) { let data = res.data; // console.log(data); if (data.result === 0) { setTimeout(function() { that.setData({ bookList: data.data, showLoading: false }); }, 800); } }, error: function(err) { console.log(err); } }); }, onLoad: function(options) { let that = this; that.getBookList(); }, [代码] loading处理 [代码]<block wx:if="{{showLoading}}"> <view class="donut-container"> <view class="donut"></view> </view> </block> // 默认 true 。getBookList 方法成功回调里设为 false。没有错误处，接口请求失败的话应该也做下处理的 [代码] comment comment.js 封装了检查用户输入的方法，实际业务中如果输入较多的话，可以提炼到 unit.js。封装了 wx.showToast [代码]// 检查输入是否为空，起名称注意语义话 checkEmpty: function(input) { return input === ''; }, /** * 检查用户是否输入了非法字符 */ checkIllegal: function(input) { let patern = /[`#^<>:"?{}\/;'[\]]/im; let _result = patern.test(input); return _result; }, /** * 检查用户输入 */ checkUserInput: function() { /* * 检测用户输入 * 1. 是否包含非法字符 * 2. 是否为空 * 3. 是否超出长度限制 */ let that = this; let comment = that.data.comment; let showToastFlag = false; let toastWording = ''; if (that.checkEmpty(comment)) { showToastFlag = true; toastWording = '输入不能为空'; } else if (that.checkIllegal(comment)) { showToastFlag = true; toastWording = '含有非法字符'; } else if (comment.length > 140) { showToastFlag = true; toastWording = '长度超出限制'; } if (showToastFlag) { that.showInfo(toastWording); return false; } else { return true; } }, [代码] 封装toast [代码]showInfo: function(info, icon = 'none', callback = () => {}) { wx.showToast({ title: info, icon: icon, duration: 1500, mask: true, success: callback }); }, [代码] detail 简单的返回刷新处理以及下载进度条 [代码]// 从上级页面返回时 重新拉去评论列表 backRefreshPage: function() { let that = this; that.setData({ commentLoading: true }); that.getPageData(); }, /** * 生命周期函数--监听页面显示 */ onShow: function() { if (wx.getStorageSync('isFromBack')) { wx.removeStorageSync('isFromBack') this.backRefreshPage(); } } [代码] 进度条（这个还是很少见的需求，很可爱） [代码]<!-- 下载进度条 --> <view class="loading-container" wx:if="{{downloading}}"> <progress percent="{{downloadPercent}}" stroke-width="6" activeColor="#1aad19" backgroundColor="#cdcdcd" show-info /> </view> [代码] my 主要是检查登陆。myBooks没有什么亮眼的操作，就不上场了。 [代码]data: { userInfo: {}, // 用户信息 hasLogin: wx.getStorageSync('loginFlag') ? true : false // 是否登录，根据后台返回的skey判断 }, [代码] app.js 主要负责检查处理登陆信息 [代码]App({ // 小程序启动生命周期 onLaunch: function () { let that = this; // 检查登录状态 that.checkLoginStatus(); }, // 检查本地 storage 中是否有登录态标识 checkLoginStatus: function () { let that = this; let loginFlag = wx.getStorageSync('loginFlag'); if (loginFlag) { // 检查 session_key 是否过期 wx.checkSession({ // session_key 有效(为过期) success: function () { // 直接从Storage中获取用户信息 let userStorageInfo = wx.getStorageSync('userInfo'); if (userStorageInfo) { that.globalData.userInfo = JSON.parse(userStorageInfo); } else { that.showInfo('缓存信息缺失'); console.error('登录成功后将用户信息存在Storage的userStorageInfo字段中，该字段丢失'); } }, // session_key 过期 fail: function () { // session_key过期 that.doLogin(); } }); } else { // 无登录态 that.doLogin(); } }, // 登录动作 doLogin: function (callback = () => {}) { let that = this; wx.login({ success: function (loginRes) { if (loginRes.code) { /* * @desc: 获取用户信息 期望数据如下 * * @param: userInfo [Object] * @param: rawData [String] * @param: signature [String] * @param: encryptedData [String] * @param: iv [String] **/ wx.getUserInfo({ withCredentials: true, // 非必填, 默认为true success: function (infoRes) { console.log(infoRes,'>>>') // 请求服务端的登录接口 wx.request({ url: api.loginUrl, data: { code: loginRes.code, // 临时登录凭证 rawData: infoRes.rawData, // 用户非敏感信息 signature: infoRes.signature, // 签名 encryptedData: infoRes.encryptedData, // 用户敏感信息 iv: infoRes.iv // 解密算法的向量 }, success: function (res) { console.log('login success'); res = res.data; if (res.result == 0) { that.globalData.userInfo = res.userInfo; wx.setStorageSync('userInfo', JSON.stringify(res.userInfo)); wx.setStorageSync('loginFlag', res.skey); callback(); } else { that.showInfo(res.errmsg); } }, fail: function (error) { // 调用服务端登录接口失败 that.showInfo('调用接口失败'); console.log(error); } }); }, fail: function (error) { // 获取 userInfo 失败，去检查是否未开启权限 wx.hideLoading(); that.checkUserInfoPermission(); } }); } else { // 获取 code 失败 that.showInfo('登录失败'); console.log('调用wx.login获取code失败'); } }, fail: function (error) { // 调用 wx.login 接口失败 that.showInfo('接口调用失败'); console.log(error); } }); }, // 检查用户信息授权设置 checkUserInfoPermission: function (callback = () => { }) { wx.getSetting({ success: function (res) { if (!res.authSetting['scope.userInfo']) { wx.openSetting({ success: function (authSetting) { console.log(authSetting) } }); } }, fail: function (error) { console.log(error); } }); }, // 获取用户登录标示 供全局调用 getLoginFlag: function () { return wx.getStorageSync('loginFlag'); }, // app全局数据 globalData: { userInfo: null } }); [代码] 中规中矩的小程序，入门还是可以的，代码简洁干净。新手的话撸一遍还是可以的。这样不知道算不算侵权，侵删。

什么是kbone 微信小程序开发过程中，许多开发者会遇到 小程序 与 Web 端一起的需求，由于 小程序 与 Web 端的运行环境不同，开发者往往需要维护两套类似的代码，这对开发者来说比较耗费力气，并且会出现不同步的情况。 为了解决上述问题，微信小程序推出了同构解决方案 [代码]kbone[代码] 来解决此问题。 那么，[代码]kbone[代码] 要怎么使用呢？这里我们将通过一个 [代码]todo[代码] 的例子来跟大家讲解。 基本结构 首先，我们来看下一个基本的 kbone 项目的目录结构（这里的 [代码]todo[代码] 是基于 [代码]Vue[代码] 的示例，[代码]kbone[代码] 也有 [代码]React[代码]，[代码]Preact[代码]，[代码]Omi[代码] 等版本，详情可移步 kbone github）。 因为 kbone 是为了解决 小程序 与 Web 端的问题，所以每个目录下的配置都会有两份（小程序 与 Web 端各一份） [图片] 入口 不管是 小程序 端还是 Web 端，都需要入口文件。在 [代码]src/index[代码] 目录下，[代码]main.js[代码] 为 Web 端用主入口，[代码]main.mp.js[代码] 则为 小程序 端用主入口。 当然，Web 端会比 小程序 多一个入口页面，即 [代码]index.html[代码]（位于根目录下）。 [图片] 下面两段代码分别是 小程序端 入口与 Web 端入口的代码，可以看到 小程序端的入口代码封装在 [代码]createApp[代码] 函数里面（这里固定即可），内部会比 Web 端多一个创建 [代码]app[代码] 节点的操作，其他的基本就是一致的。 [代码]// 小程序端入口 import Vue from 'vue' import todo from './todo.vue' export default function createApp() { // 创建app节点用于绑定 const container = document.createElement('div') container.id = 'app' document.body.appendChild(container) return new Vue({ el: '#app', render: h => h(todo) }) } [代码] [代码]// web端入口 import Vue from 'vue' import todo from './todo.vue' new Vue({ el: '#app', render: h => h(todo) }) [代码] todo.vue 在上面的入口图可以看到，源码目录中，除了入口文件分开之前，页面文件就是共用的了，这里直接使用 Vue 的写法即可，不用做特殊的适应。 配置 写完代码之后，我们要怎么跑项目呢？这时，配置就派上用场啦。 Web 端配置为正常的 Vue 配置，小程序端配置与 Web 端配置的唯一不同就是需要引入 [代码]mp-webpack-plugin[代码] 插件来将 Vue 组件转化为小程序代码。 [图片] 构建代码 接着，我们需要构建代码，让代码可以运行到各自的运行环境中去。构建完成后，生产代码会位于 dist 目录中。 [代码]// 构建 web 端代码 // 目标代码在 dist/web npm run build // 构建小程序端代码 // 目标代码在 dist/mp npm run mp [代码] 小程序端 的构建会比 Web 端的构建多一个步骤，就是 npm 构建。 进入 [代码]dist/mp[代码] 目录，执行 [代码]npm install[代码] 安装依赖，用开发者工具将 [代码]dist/mp[代码] 目录作为小程序项目导入之后，点击工具栏下的 [代码]构建 npm[代码]，即可预览效果。 效果 最后，我们来看一下 todo 的效果。kbone 初体验，done~ todo 代码可到 kbone/demo13 自提。 [图片] 最后 如果你想了解更多 kbone 相关的使用及详情，可移步 kbone github。 如有疑问，可到 Kbone小主页 发帖沟通。

1.背景 如今信息流业务是各大互联网公司争先抢占的一个大面包，为了提高用户的后续消费，产品想出了各种各样的方法，例如在微视中，用户可以无限上拉出下一条视频；在知乎中，也可以无限上拉出下一条回答。这样的操作方式用户体验更好，后续消费也更多。最近几年的时间，微信小程序已经从一颗小小的萌芽成长为参天大树，形成了较大规模的生态，小程序也拥有了一个很大的流量入口。 2.demo体验 那如何才能在小程序中实现类原生APP效果的下一条无限刷体验？ 这篇文章详细记录了下一条无限刷效果的实现原理，以及细节和体验优化，并将相关代码抽象成一个微信小程序代码片段，有需要的同学可查看demo源码。 线上效果请用微信扫码体验： [图片] 小程序demo体验请点击：https://developers.weixin.qq.com/s/vIfPUomP7f9a 3.实现原理 出于性能和兼容性考虑，我们尽量采用小程序官方提供的原生组件来实现下一条无限刷效果。我们发现，可以将无限上拉下一篇的文章看作一个竖向滚动的轮播图，又由于每一篇文章的内容长度高于一屏幕高度，所以需要实现文章内部可滚动，以及文章之间可以上拉和下拉切换的功能。 在多次尝试后，我们最终采用了在[代码]<swiper>[代码]组件内部嵌套一个[代码]<scroll-view>[代码]组件的方式实现，利用[代码]<swiper>[代码]组件来实现文章之间上拉和下拉切换的功能，利用[代码]<scroll-view>[代码]来实现一篇文章内部可上下滚动的功能。 所以页面的dom结构如下所示： [代码]<swiper class='scroll-swiper' circular="{{false}}" vertical="{{true}}" bindchange="bindChange" skip-hidden-item-layout="{{true}}" duration="{{500}}" easing-function="easeInCubic" > <block wx:for="{{articleData}}"> <swiper-item> <scroll-view scroll-top="0" scroll-with-animation="{{false}}" scroll-y > content </scroll-view> </swiper-item> </block> </swiper> [代码] 4.性能优化 我们知道view部分是运行在webview上的，所以前端领域的大多数优化方式都有用。例如减少代码包体积，使用分包，渲染性能优化等。下面主要讲一下渲染性能优化。 4.1 dom优化 由于页面需要无限上拉刷新，所以要在[代码]<swiper>[代码]组件中不断的增加[代码]<swiper-item>[代码]，这样必然会导致页面的dom节点成倍数的增加，最后非常卡顿。 为了优化页面的dom节点，我们利用[代码]<swiper>[代码]的[代码]current[代码]和[代码]<swiper-item>[代码]的[代码]index[代码]来做优化，控制是否渲染dom节点。首先，仅当[代码]index <= current + 1[代码]时渲染[代码]<swiper-item>[代码]，也就是页面中最多预先加载出下一条，而不是将接口返回的所有后续数据都渲染出来；其次，对于用户已经消费过的之前的[代码]<swiper-item>[代码]，不能直接销毁dom节点，否则会导致[代码]<swiper>[代码]的[代码]current[代码]值出现错乱，但是我们可以控制是否渲染[代码]<swiper-item>[代码]内部的子节点，我们设置了仅当[代码]current <= index + 1 && index -1 <= current[代码]时才会渲染[代码]<swiper-item>[代码]中的内容，也就是仅渲染当先文章，及上一篇和下一篇的文章内容，其他文章的dom节点都被销毁了。 这样，无论用户上拉刷新了多少次，页面中最多只会渲染3篇文章的内容，避免了因为上拉次数太多导致的页面卡顿。 4.2 分页时setData的优化 setData工作原理 [图片] 小程序的视图层目前使用[代码]WebView[代码]作为渲染载体，而逻辑层是由独立的 [代码]JavascriptCore[代码] 作为运行环境。在架构上，[代码]WebView[代码] 和 [代码]JavascriptCore[代码] 都是独立的模块，并不具备数据直接共享的通道。当前，视图层和逻辑层的数据传输，实际上通过两边提供的 [代码]evaluateJavascript[代码] 所实现。即用户传输的数据，需要将其转换为字符串形式传递，同时把转换后的数据内容拼接成一份 [代码]JS[代码] 脚本，再通过执行 [代码]JS[代码] 脚本的形式传递到两边独立环境。 而 [代码]evaluateJavascript[代码] 的执行会受很多方面的影响，数据到达视图层并不是实时的。 每次 [代码]setData[代码] 的调用都是一次进程间通信过程，通信开销与 setData 的数据量正相关。 [代码]setData[代码] 会引发视图层页面内容的更新，这一耗时操作一定时间中会阻塞用户交互。 [代码]setData[代码] 是小程序开发中使用最频繁的接口，也是最容易引发性能问题的接口。 避免不当使用setData [代码]data[代码] 应仅包括与页面渲染相关的数据，其他数据可绑定在this上。使用 [代码]data[代码] 在方法间共享数据，会增加 setData 传输的数据量，。 使用 [代码]setData[代码] 传输大量数据，通讯耗时与数据正相关，页面更新延迟可能造成页面更新开销增加。仅传输页面中发生变化的数据，使用 [代码]setData[代码] 的特殊 [代码]key[代码] 实现局部更新。 避免不必要的 [代码]setData[代码]，避免短时间内频繁调用 [代码]setData[代码]，对连续的setData调用进行合并。不然会导致操作卡顿，交互延迟，阻塞通信，页面渲染延迟。 避免在后台页面进行 [代码]setData[代码]，这样会抢占前台页面的渲染资源。可将页面切入后台后的[代码]setData[代码]调用延迟到页面重新展示时执行。 优化示例 无限上拉刷新的数据会采用分页接口的形式，分多次请求回来。在使用分页接口拉取到下一刷的数据后，我们需要调用[代码]setData[代码]将数据写进[代码]data[代码]的[代码]articleData[代码]中，这个[代码]articleData[代码]是一个数组，里面存放着所有的文章数据，数据量十分庞大，如果直接[代码]setData[代码]会增加通讯耗时和页面更新开销，导致操作卡顿，交互延迟。 为了避免这个问题，我们将[代码]articleData[代码]改进为一个二维数组，每一次[代码]setData[代码]通过分页的 [代码]cachedCount[代码]标识来实现局部更新，具体代码如下： [代码]this.setData({ [`articleData[${cachedCount}]`]: [...data], cachedCount: cachedCount + 1, }) [代码] [代码]articleData[代码]的结构如下： [图片] 4.3 体验优化 解决了操作卡顿，交互延迟等问题，我们还需要对动画和交互的体验进行优化，以达到类原生APP效果的体验。 在文章间上拉切换时，我们使用了[代码]<swiper>[代码]组件自带的动画效果，并通过设置[代码]duration[代码]和[代码]easing-function[代码]来优化滚动细节和动画。 当用户阅读文章到底部时，会提示下一篇文章的标题等信息，而在页面上拉时，由于下一篇文章的内容已经加载出来了，这样在滑动过程中会出现两个重复的标题。为了避免这种情况出现，我们通过一个占满屏幕宽高的空白[代码]<view>[代码]来将下一篇文章的内容撑出屏幕，并在滚动结束时，通过[代码]hidden="{{index !== current && index !== current + 1}}"[代码]来隐藏这个空白[代码]<view>[代码]，并对这个空白[代码]<view>[代码]的高度变化增加动画，来实现下一篇文章从屏幕底部滚动到屏幕顶部的效果： [代码].fake-scroll { height: 100%; width: 100%; transition: height 0.3s cubic-bezier(0.167,0.167,0.4,1); } [代码] [图片] 而当用户想要上拉查看之前阅读过的文章时，我们需要给用户一个“下滑查看上一条”提示，所以也可以采用同上的方式，通过一个占满屏幕宽高的提示语[代码]<view>[代码]来将上一篇文章的内容撑出屏幕，并在滚动结束时，通过[代码]wx:if="{{index + 1 === current}}"[代码]来隐藏这个提示语[代码]<view>[代码]，并对这个提示语[代码]<view>[代码]的透明度变化增加动画，来实现下拉时提示“下滑查看上一条”的效果： [代码].fake-previous { height: 100%; width: 100%; opacity: 0; transition: opacity 1s ease-in; } .fake-previous.show-fake-previous { opacity: 1; } [代码] 至此，这个类原生APP效果的下一条无限刷体验的需求的所有要点和细节都已实现。 记录在此，欢迎交流和讨论。 小程序demo体验请点击：https://developers.weixin.qq.com/s/vIfPUomP7f9a

小程序开发小技巧 --webview 记录下webview 开发调试相关问题，包括常见的小tip，社区相关问题以及本地调试等基本操作。前一段打算写总结，写着发现没有什么干货，今天看见社区朋友提问 webview调试 难道搞个测试还需要去办理后台配置业务不成吗？是的一开始我就是配业务域名，不停的往服务器传包。。。历历在目所以还是梳理记录一下，希望能对社区小伙伴开发有帮助。 常见的 Bug & Tip 常见的小问题 tip：个人类型的小程序暂不支持使用。 tip: navigationStyle: custom 对 web-view 组件无效,也就是自定义导航栏。 tip: src 指向，可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。 tip: 不希望webview缓存，配置NG或者src后面加随机数。 tip：保持登陆状态传递cookie、token等，简单的可以拼接URL完成。 tip：webview无法进行分享或者支付，常规操作是触发状态后，传递相关信息跳转回小程序进行下一步分享或者支付。 tip：动态改变web-view的标题，直接[代码]document.title[代码]。 tip：需要刷新webview，简单暴力点[代码]windows.onload[代码]。复杂点操作history。 tip：监听web-view返回。一般场景：分享给朋友后，朋友打开进入webview活动页，如果是直接进入的wenview需要点击返回调转至首页。 tip：先调用[代码]wx.miniProgram.navigateBack[代码]在调用[代码]wx.miniProgram.postMessage[代码]。 tip：src中带有中文字符或者特殊字符的，在 iOS 中会有打开白屏的问题，需要转码，建议加一下 encodeURIComponent。 tip: 玄学问题，引入了[代码]weixin-js-sdk[代码],但是怎么也找不到，我后面用npm安装后就ok了。 tip：网页内 iframe 的域名也需要配置到域名白名单。 tip：开发者工具上，可以在 web-view 组件上通过右键 - 调试，打开 web-view 组件的调试。 tip：每个页面只能有一个 web-view，web-view 会自动铺满整个页面，并覆盖其他组件。 tip：web-view 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。 tip：在 iOS 中，若存在JSSDK接口调用无响应的情况，可在 web-view 的 src 后面加个#wechat_redirect解决。 tip: web-view 官方文档 webview 本地调试 难道搞个测试还需要去办理后台配置业务不成吗？配业务确实特别麻烦，为什么我最初一直自己往服务器传，，，纯属装X。。。其实本地起个web服务器美滋滋。 快速的起个本地web服务。 下面是常用的几种方法、具体用法操作可以百度。 http-server 编辑器或者浏览器中的插件、例如vscode 中的 [代码]live Server[代码]。等等 动手写一个。。 我自己用的是http-server和live Server，用了很久了，能满足需求，就没有关注其它的方法了。 vue开发单页面。 本地开发完成后在打包、进入dist文件、启动http-server、浏览器打开ok、把链接写死在webview的src，像这样 [代码] let url = 'http://127.0.0.1:8080'; // let url = options.url ? options.url : wx.getStorageSync('bargainURL') [代码] 正常的话我们可以先在chrome中调试，基本完成后在进行真机调试。在chrome中可能会涉及到跨域问题，可以开启一个chrome跨域浏览器进行调试，像这样 我是mac上这样，先创建/Users/jinxm/Documents/ChromeData 目录，然后命令行跑一下下面这个命令就OK了。window自行百度就好了。 [代码]open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/jinxm/Documents/ChromeData[代码] 这个跨域用的的还蛮多的，于是我配了个输入法快捷输入，像这样👇，方便了很多。 [图片] 真机测试 上面基本ok后，webview 路径写死，手机上看效果。这个时候会不停的改动，然后就会发现不停的npm run build 、 cd dist 、http-server 也变得很繁琐了，那就简单的配置下cli，像这样👇，修改完点一下server就ok了。 [图片] 具体cil配置也就一段话搞定，像这样 ，修改package.json. 配置有点简单，这个cli主要是做单页面使用，可以忽略。使用vue-cli的自己添加个配置文件就好了 [图片] 完结 简单的问题可以私信下。有关webview相关问题欢迎大家一起讨论👏👏👏

小程序开发另类小技巧 --用户授权篇 getUserInfo较为特殊，不包含在本文范围内，主要针对需要授权的功能性api，例如：wx.startRecord，wx.saveImageToPhotosAlbum， wx.getLocation 原文地址：https://www.yuque.com/jinxuanzheng/gvhmm5/arexcn 仓库地址：https://github.com/jinxuanzheng01/weapp-auth-demo 背景 小程序内如果要调用部分接口需要用户进行授权，例如获取地理位置信息，收获地址，录音等等，但是小程序对于这些需要授权的接口并不是特别友好，最明显的有两点： 如果用户已拒绝授权，则不会出现弹窗，而是直接进入接口 fail 回调， 没有统一的错误信息提示，例如错误码 一般情况而言，每次授权时都应该激活弹窗进行提示，是否进行授权，例如： [图片] 而小程序内只有第一次进行授权时才会主动激活弹窗（微信提供的），其他情况下都会直接走fail回调，微信文档也在句末添加了一句请开发者兼容用户拒绝授权的场景, 这种未做兼容的情况下如果用户想要使用录音功能，第一次点击拒绝授权，那么之后无论如何也无法再次开启录音权限**，很明显不符合我们的预期。 所以我们需要一个可以进行二次授权的解决方案 常见处理方法 官方demo 下面这段代码是微信官方提供的授权代码, 可以看到也并没有兼容拒绝过授权的场景查询是否授权（即无法再次调起授权） [代码]// 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope wx.getSetting({ success(res) { if (!res.authSetting['scope.record']) { wx.authorize({ scope: 'scope.record', success () { // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问 wx.startRecord() } }) } } }) [代码] 一般处理方式 那么正常情况下我们该怎么做呢？以地理位置信息授权为例： [代码]wx.getLocation({ success(res) { console.log('success', res); }, fail(err) { // 检查是否是因为未授权引起的错误 wx.getSetting({ success (res) { // 当未授权时直接调用modal窗进行提示 !res.authSetting['scope.userLocation'] && wx.showModal({ content: '您暂未开启权限，是否开启', confirmColor: '#72bd4a', success: res => { // 用户确认授权后，进入设置列表 if (res.confirm) { wx.openSetting({ success(res){ // 查看设置结果 console.log(!!res.authSetting['scope.userLocation'] ? '设置成功' : '设置失败'); }, }); } } }); } }); } }); [代码] 上面代码，有些同学可能会对在fail回调里直接使用wx.getSetting有些疑问，这里主要是因为 微信返回的错误信息没有一个统一code errMsg又在不同平台有不同的表现 从埋点数据得出结论，调用这些api接口出错率基本集中在未授权的状态下 这里为了方便就直接调用权限检查了 ，也可以稍微封装一下，方便扩展和复用，变成： [代码] bindGetLocation(e) { let that = this; wx.getLocation({ success(res) { console.log('success', res); }, fail(err) { that.__authorization('scope.userLocation'); } }); }, bindGetAddress(e) { let that = this; wx.chooseAddress({ success(res) { console.log('success', res); }, fail(err) { that.__authorization('scope.address'); } }); }, __authorization(scope) { /** 为了节省行数，不细写了，可以参考上面的fail回调，大致替换了下变量res.authSetting[scope] **/ } [代码] 看上去好像没有什么问题，fail里只引入了一行代码， 这里如果只针对较少页面的话我认为已经够用了，毕竟**‘如非必要，勿增实体’，但是对于小打卡这个小程序来说可能涉及到的页面，需要调用的场景偏多**，我并不希望每次都人工去调用这些方法，毕竟人总会犯错 梳理目标 上文已经提到了背景和常见的处理方法，那么梳理一下我们的目标，我们到底是为了解决什么问题？列了下大致为下面三点： 兼容用户拒绝授权的场景，即提供二次授权 解决多场景，多页面调用没有统一规范的问题 在底层解决，业务层不需要关心二次授权的问题 扩展wx[funcName]方法 为了节省认知成本和减少出错概率，我希望他是这个api默认携带的功能，也就是说因未授权出现错误时自动调起是否开启授权的弹窗 为了实现这个功能，我们可能需要对wx的原生api进行一层包装了（关于页面的包装可以看：如何基于微信原生构建应用级小程序底层架构） 为wx.getLocation添加自己的方法 这里需要注意的一点是直接使用常见的装饰模式是会出现报错，因为wx这个对象在设置属性时没有设置set方法，这里需要单独处理一下 [代码]// 直接装饰，会报错 Cannot set property getLocation of #<Object> which has only a getter let $getLocation = wx.getLocation; wx.getLocation = function (obj) { $getLocation(obj); }; // 需要做一些小处理 wx = {...wx}; // 对wx对象重新赋值 let $getLocation = wx.getLocation; wx.getLocation = function (obj) { console.log('调用了wx.getLocation'); $getLocation(obj); }; // 再次调用时会在控制台打印出 '调用了wx.getLocation' 字样 wx.getLocation() [代码] 劫持fail方法 第一步我们已经控制了wx.getLocation这个api，接下来就是对于fail方法的劫持，因为我们需要在fail里加入我们自己的授权逻辑 [代码]// 方法劫持 wx.getLocation = function (obj) { let originFail = obj.fail; obj.fail = async function (errMsg) { // 0 => 已授权 1 => 拒绝授权 2 => 授权成功 let authState = await authorization('scope.userLocation'); // 已授权报错说明并不是权限问题引起，所以继续抛出错误 // 拒绝授权，走已有逻辑，继续排除错误 authState !== 2 && originFail(errMsg); }; $getLocation(obj); }; // 定义检查授权方法 function authorization(scope) { return new Promise((resolve, reject) => { wx.getSetting({ success (res) { !res.authSetting[scope] ? wx.showModal({ content: '您暂未开启权限，是否开启', confirmColor: '#72bd4a', success: res => { if (res.confirm) { wx.openSetting({ success(res){ !!res.authSetting[scope] ? resolve(2) : resolve(1) }, }); }else { resolve(1); } } }) : resolve(0); } }) }); } // 业务代码中的调用 bindGetLocation(e) { let that = this; wx.getLocation({ type: 'wgs84', success(res) { console.log('success', res); }, fail(err) { console.warn('fail', err); } }); } [代码] 可以看到现在已实现的功能已经达到了我们最开始的预期，即因授权报错作为了wx.getLocation默认携带的功能，我们在业务代码里再也不需要处理任何再次授权的逻辑 也意味着wx.getLocation这个api不论在任何页面，组件，出现频次如何，**我们都不需要关心它的授权逻辑（**效果本来想贴gif图的，后面发现有图点大，具体效果去git仓库跑一下demo吧） 让我们再优化一波 上面所述大致是整个原理的一个思路，但是应用到实际项目中还需要考虑到整体的扩展性和维护成本，那么就让我们再来优化一波 代码包结构： 本质上只要在app.js这个启动文件内，引用./x-wxx/index文件对原有的wx对象进行覆盖即可 [图片] **简单的代码逻辑： ** [代码]// 大致流程： //app.js wx = require('./x-wxx/index'); // 入口处引入文件 // x-wxx/index const apiExtend = require('./lib/api-extend')； module.exports = (function (wxx) { // 对原有方法进行扩展 wxx = {...wxx}; for (let key in wxx) { !!apiExtend[key] && (()=> { // 缓存原有函数 let originFunc = wxx[key]; // 装饰扩展的函数 wxx[key] = (...args) => apiExtend[key](...args, originFunc); })(); } return wxx; })(wx); // lib/api-extend const Func = require('./Func'); (function (exports) { // 需要扩展的api（类似于config） // 获取权限 exports.authorize = function (opts, done) { // 当调用为"确认授权方法时"直接执行，避免死循环 if (opts.$callee === 'isCheckAuthApiSetting') { console.log('optsopts', opts); done(opts); return; } Func.isCheckAuthApiSetting(opts.scope, () => done(opts)); }; // 选择地址 exports.chooseAddress = function (opts, done) { Func.isCheckAuthApiSetting('scope.address', () => done(opts)); }; // 获取位置信息 exports.getLocation = function (opts, done) { Func.isCheckAuthApiSetting('scope.userLocation', () => done(opts)); }; // 保存到相册 exports.saveImageToPhotosAlbum = function (opts, done) { Func.isCheckAuthApiSetting('scope.writePhotosAlbum', () => done(opts)); } // ...more })(module.exports); [代码] 更多的玩法 可以看到我们无论后续扩展任何的微信api，都只需要在lib/api-extend.js 配置即可，这里不仅仅局限于授权，也可以做一些日志，传参的调整，例如： [代码] // 读取本地缓存(同步) exports.getStorageSync = (key, done) => { let storage = null; try { storage = done(key); } catch (e) { wx.$logger.error('getStorageSync', {msg: e.type}); } return storage; }; [代码] 这样是不是很方便呢，至于Func.isCheckAuthApiSetting这个方法具体实现，为了节省文章行数请自行去git仓库里查看吧 关于音频授权 录音授权略为特殊，以wx.getRecorderManager为例，它并不能直接调起录音授权，所以并不能直接用上述的这种方法，不过我们可以曲线救国，达到类似的效果，还记得我们对于wx.authorize的包装么，本质上我们是可以直接使用它来进行授权的，比如将它用在我们已经封装好的录音管理器的start方法进行校验 [代码]wx.authorize({ scope: 'scope.record' }); [代码] 实际上，为方便统一管理，Func.isCheckAuthApiSetting方法其实都是使用wx.authorize来实现授权的 [代码]exports.isCheckAuthApiSetting = async function(type, cb) { // 简单的类型校验 if(!type && typeof type !== 'string') return; // 声明 let err, result; // 获取本地配置项 [err, result] = await to(getSetting()); // 这里可以做一层缓存，检查缓存的状态，如果已授权可以不必再次走下面的流程，直接return出去即可 if (err) { return cb('fail'); } // 当授权成功时，直接执行 if (result.authSetting[type]) { return cb('success'); } // 调用获取权限 [err, result] = await to(authorize({scope: type, $callee: 'isCheckAuthApiSetting'})); if (!err) { return cb('success'); } } [代码] 关于用户授权 用户授权极为特殊，因为微信将wx.getUserInfo升级了一版，没有办法直接唤起了，详见《公告》，所以需要单独处理，关于这里会拆出单独的一篇文章来写一些有趣的玩法 总结 最后稍微总结下，通过上述的方案，我们解决了最开始目标的同时，也为wx这个对象上的方法提供了统一的装饰接口（lib/api-extend文件），便于后续其他行为的操作比如埋点，日志，参数校验 还是那么一句话吧，小程序不管和web开发有多少不同，本质上都是在js环境上进行开发的，希望小程序的社区环境更加活跃，带来更多有趣的东西

9月份社区为更好地保护用户隐私信息，优化用户体验，平台将会对小程序内的帐号登录功能进行规范、然后总结下关于新规以及社区的常见问题、不定时增加社区重要公告 增加小程序违规公告：https://developers.weixin.qq.com/community/operate 增加小程序模版消息公告：https://developers.weixin.qq.com/community/develop/doc/00008a8a7d8310b6bf4975b635a401?blockType=1 增加微信外部链接内容管理规范：https://weixin.qq.com/cgi-bin/readtemplate?t=weixin_external_links_content_management_specification&from=timeline&isappinstalled=0 相关链接模版消息公告 新规范链接 类目资质 恶意对抗平台规则的违规行为公告 小程序修改名称说明 小程序账号相关问题 小程序常见违规整改处理方案 微信外部链接内容管理规范 常见问题 服务范围开放的小程序？ 对于用户注册流程是对外开放、无需验证特定范围用户，且注册后即可提供线上服务的小程序，不得在用户清楚知悉、了解小程序的功能之前，要求用户进行帐号登录。 若小程序属于第一种服务范围开放的小程序，还是建议可以在体验小程序功能后，用户主动点击登录按钮后触发登录流程，且为用户提供暂不登录选项 服务范围特定的小程序？ 对于客观上服务范围特定、未完全开放用户注册，需通过更多方式完成身份验证后才能提供服务的小程序，可以直接引导用户进行帐号登录。例如为学校系统、员工系统、社保卡信息系统等提供服务的小程序 只用于公司内部使用的小程序，应该怎么改？ 公司内部小程序，只限公司内部使用。如果是公司内部人员，授权微信会自动登录，或者后台数据库存在的手机号码，利用手机验证码登录也可以，这个并没有账号密码登录模式。 你好，经核实，贵方小程序功能无法体验，建议增加一种登录方式（如：账号、密码），并提供可登录体验的测试账号信息，填写在 版本描述处提交，以便审核人员及时体验到小程序功能 经核实，贵方小程序打开即要求授权信息，且点击取消授权后仍强制授权，为企业内部工具，建议在小程序的登录页面明确介绍小程序的具体功能，并且在登录及授权界面为用户提供接受/拒绝登录的权利，由用户自主选择是否进一步授权登录。 类似本地化生活服务的小程序只开通了部分城市，审核被拒绝？ 经核实，贵方小程序打开提示：该地区暂未开放，功能无法体验，建议增加手动定位，并在版本描述中写明已上架正式内容的城市，以便审核人员审核。 审核团队的测试微信或手机号并未在我们数据库存在，导致审核失败？ 或者类似的问题：我们可以提供测试手机号，或者测试微信账号密码，但是这都涉及到手机验证码，请问当你们登录的时候，我如何把验证码发送给你们？ 请将测试信息填写在版本描述处提交审核，审核人员不能对外联系，所以请提供一个写死的验证码，感谢您的支持和理解！ 因为小程序特殊性，用户打开必须要获取用户位置。地理位置授权影响登陆规范要求？ 你好，如小程序仅要求地理位置授权，暂不属于帐号登录规范要求内 关键字搜索排序与审核通过后搜索不到小程序？ 系统会根据query和小程序的相关性来判断召回和排序，后续我们会优化搜索策略，感谢反馈。有异议，提供appid、搜索词、搜索入口、搜索页面截图 刚审核通过发布后搜索不到是有延迟的，大概半天左右的延迟。如果着急可以发帖，注意发帖规范、附上小程序的APPID 仅提供注册服务的小程序，审核拒绝？ 你好，如果你的小程序仅提供线上注册功能，后续服务是需要以其他方式提供的话，可以在说明要求使用帐号登录功能的原因后，引导用户进行帐号注册或登录。 然后官方加了一句⬇️。说明让用户体验小程序功能是很重要的。 而如果你的小程序除了线上注册外，还同时提供其他线上服务，建议先让用户体验、知悉小程序的功能后，再要求用户进行注册、登录。 审核好几天了，官方可以加急审核吗？？ 你好，暂不支持加急审核，请耐心等待审核结果。根据社区规定，提审时间为7个工作日内的催审问题暂不予反馈，故此贴隐藏 关于 企业信息或法定代表人信息不一致？ 建议发帖联系客服。注意发帖格式 等15个工作日，平台是拉取的工商局的数据。 可以联系客服工作人员吗，急在线等。 联系客服工作人员的正确姿势 是想咨询什么问题呢？不方便发帖咨询的话可以私信哦（进入个人主页私信功能） 审核超过7天了还是没有消息？？ 审核时间为7个工作日，和7天还是有点不一样。 审核超过7个工作日，请刷新页面注意查看站内信，点击小🔔查看最新审核消息。 为什么审核我的小程序这么久，别人可以那么快？ 官方整理回答 为什么你以前可以2-3小时通过审核，是因为你在运营/性能/用户等指标都达到优秀，所以符合小程序评测——优秀的标准，因此拥有急速审核的权益。常见问题见：https://kf.qq.com/faq/190108BJnmUN190108RrEnqE.html 你在某一次提交版本之后，小程序的性能存在问题，被我们检测到，所以便失去急速审核的权益，如果你需要急速审核，请你优化好小程序的性能再重新提交，你们可以自己在开发阶段利用工具的体验评分面板先自查一次，详细见https://developers.weixin.qq.com/miniprogram/dev/devtools/audits.html 最后补充一点，如果没有达到优秀的标准，日常承诺处理的审核时间是7个工作日内，如果没有超过7个工作日，催提审是不受理的 好消息是：官方加急审核的权益已经在开发，估计不久后会上线。 同一开放平台账号，绑定的移动应用和公众号，获取的unionid为什么不一致？ 只要绑在一个开发者帐号下，即使主体不一样，也允许获取到统一的unionID。绑定同一个微信开放平台帐号下，同一个用户的unionID如果不同的，原因只能是开发者搞混openid。openid要对应所属的AppID，才会相同。 举个例子： 1. 小程序AppID：wxc104eb635b8cxxxx ——帐号A， 公众号AppID：wx311a2a9a8e1dxxxx ——帐号B， 2.核实帐号A和帐号B 绑定同一个微信开放平台帐号是：xxxxxx@sina.com ，所以用一个用户的unionID相同， 3.而开发者所反馈的出现unionID不同，原因是：所提供的openid不属于帐号A，也不属于帐号B，而是属于帐号C或帐号D，而帐号C或帐号D并没有绑定在同一个微信开放平台帐号下，所以unionID不同。