自定义顶部标题和左上角按钮方法解析及实践 前言 之前有兄台发过设置custom的方法 但是没有具体的实现方法 以至于很多不了解小程序的开发者不能循序渐进的理解制作自定义标题的方法 在这里详细总结了计算各参数的方法 我也写了一个自定义标题组件 只需要引用 直接在页面中调用即可 但因为掺杂了业务代码 需要整理过后会放出来 具体方法 首先在app.json中 将window.navigateionStyle 设置为custom [图片] 使用 wx.getSystemInfoSync 获取系统的属性 其中有顶部状态栏的高度 使用 wx.getMenuButtonBoundingClientRect 获取右上角胶囊菜单的相关属性 包括胶囊菜单的高度、相距上下左右屏幕的绝对位置 [图片] 如上图 我们需要获取四个参数 来确定整个标题栏的各项参数和左侧自定义胶囊的位置 获取顶部状态栏高度sys.statusBarHeight 具体代码 [代码]var sys= wx.getSystemInfoSync() var menu = wx.getMenuButtonBoundingClientRect() var statusHeight = menu.statusBarHeight var titleHeight = menu.height var titleRowWidth = sys.right - menu.right var titleColumnHeight = menu.top - menu.statusBarHeight [代码] 注意 小程序原生组件会遮挡自定义头部组件 如 canvas组件 input textarea的提示信息placeholder 该问题可以使用cover-view将头部定义为原生组件 设置层级解决 20191125后续更新 wx.getMenuButtonBoundingClientRect()返回undefined的情况 wx.getMenuButtonBoundingClientRect()在安卓和IOS端均会出现获取不到值的情况（返回undefined） 官方给出的答案是已经修复了该问题 但实际测试还是会出现类似问题 该问题与 平台 和 微信基础库 （随微信版本更新）无关 导致我们无法获取胶囊按钮的属性 进而无法计算header的高度 该问题极难复现 我在自己的真机上遇到过2次 在我的应用中出现概率不到1% 应对方法1: 官方建议延迟100MS 或 在返回undefined的情况下 重新获取一次 应对方法2: 判断平台 给与预估的默认值 IOS端和不同安卓端 IOS各机型的高度为44px 安卓端我测试最多的情况是48px 但安卓端实际情况需要具体测试 做进一步兼容 代码如下 [图片] 这里wx.getMenuButtonBoundingClientRect()方法在低版本微信中是不能用的 而且低版本的微信中不能使用wx.canIUse方法判断该方法是否存在 因此用捕获错误的方式兼容 在menu的属性返回undefined时 用我们预估的值去兼容 另外github.com有一个通过手机型号 返回手机各项参数的库 其中一项就是头部状态栏的高度 如果你想更准确的适配更多机型 可以使用这个库 无论哪种方法都不是最优的解决方案 大家酌情按照场景进行适配

简介 作为前端er，我们的工作与web是分不开的，随着HTML5的日益壮大，浏览器自带的webapi也随着增多。本篇文章主要选取了几个有趣且有用的webapi进行介绍，分别介绍其用法、用处以及浏览器支持度，同时我也分别为这几个api都做了一个简单的demo（真的很简单，样式等于没有~）这几个api分别是： page lifecycle onlineState 利用deviceOrientation制作一个随着手机旋转的正方体 battery status custom event 利用execCommand完成一个简单的富文本 page lifecycle(网页生命周期) 介绍 我们可以用document.visibitilityState来监听网页可见度，是否卸载，但是在手机和电脑上都会现这种情况，就是比如说页面打开过了很久没有打开，这时你看在浏览器的tab页中看着是可以看到内容的，但是点进去却需要加载。chrome68添加了 freeze和 resume事件，来完善的描述一个网页从加载到卸载，包括浏览器停止后台进程，释放资源各种生命阶段。从一个生命周期阶段到另外一个生命周期阶段会触发不同的事件，比如onfocus，onblur，onvisibilitychange，onfreeze等等，通过这些事件我们可以响应网页状态的转换。具体的教程推荐大家看看阮一峰大神的教程。 用法 [代码]window.addEventListener('blur',() => {}) window.addEventListener('visibilitychange',() => { // 通过这个方法来获取当前标签页在浏览器中的激活状态。 switch(document.visibilityState){ case'prerender': // 网页预渲染 但内容不可见 case'hidden': // 内容不可见 处于后台状态，最小化，或者锁屏状态 case'visible': // 内容可见 case'unloaded': // 文档被卸载 } }); [代码] 用处 大家可以看下这个demo [图片] 所以说，这个API的用处就是用来响应我们网页的状态，比如说我们的页面是在播放视频或者是一个网页的游戏，你可以通过这个API来去做出对应的响应，暂停视频，游戏暂停等等。 浏览器支持度 page visibilituState [图片] online state（网络状态） 这个API就很简单了，就是获取当前的网络状态，同时也有对应的事件去响应网络状态的变化。 用法 [代码]window.addEventListener('online',onlineHandler) window.addEventListener('offline',offlineHandler) [代码] 用处 比如说我们的网站是视频网站，正在播放的时候，网络中断了，我们可以通过这个API去响应，给用户相应的提示等等。 浏览器支持度 [图片] Vibration（震动） 让手机震动~~~ 嗯，就这么简单。 用法 [代码]// 可以传入一个大于0的数字，表示让手机震动相应的时间长度，单位为ms navigator.vibrate(100) // 也可以传入一个包含数字的数组，比如下面这样就是代表震动300ms，暂停200ms，震动100ms，暂停400ms，震动100ms navigator.vibrate([300,200,100,400,100]) // 也可以传入0或者一个全是0的数组，表示暂停震动 navigator.vibrate(0) [代码] 用处 用来给用户一个提示，比如说数据校验失败，当然震动不止这点作用，大家自己去扩展吧~~~ 浏览器支持度 [图片] device orientation（陀螺仪） 通过绑定事件来获取设备的物理朝向，可以获取到三个数值，分别是： alpha：设备沿着Z轴的旋转角度 [图片] beta：设备沿着X轴的旋转角度 [图片] gamma：设备沿着Y轴的旋转角度 [图片] 用法 [代码]window.addEventListener('deviceorientation',e => { console.log('Gamma:',e.gamma); console.log('Beta:',e.beta); console.log('Alpha:',e.Alpha); }) [代码] 用处 这种自然是web VR 中的使用场景会相对较多。这是我写的一个小demo [图片] 浏览器支持度 [图片] battery status 这个API就使用来获取当前的电池状态 用法 [代码]// 首先去判断当前浏览器是否支持此API if ('getBattery' in navigator) { // 通过这个方法来获取battery对象 navigator.getBattery().then(battery => { // battery 对象包括中含有四个属性 // charging 是否在充电 // level 剩余电量 // chargingTime 充满电所需事件 // dischargingTime 当前电量可使用时间 const { charging, level, chargingTime, dischargingTime } = battery; // 同时可以给当前battery对象添加事件 对应的分别时充电状态变化 和 电量变化 battery.onchargingchange = ev => { const { currentTarget } = ev; const { charging } = currentTarget; }; battery.onlevelchange = ev => { const { currentTarget } = ev; const { level } = ev; } }) } else { alert('当前浏览器不支持~~~') } [代码] 用处 用来温馨的提示用户当前电量~~~ 浏览器支持度 这个浏览器的支持度很低。。。。 [图片] execCommand 执行命令 当将HTML文档切换成设计模式时，就会暴露出 execcommand 方法，然后我们可以通过使用这个方法来执行一些命令，比如复制，剪切，修改选中文字粗体、斜体、背景色、颜色，缩进，插入图片等等等等。 用法 用法也很简单，这里简单介绍几个，详细的介绍大家可以去MDN上看看。 这个API接受三个参数，第一个是要执行的命令，第二个参数mdn上说是Boolean用来表示是否展现用户界面，但我也没测试出来有什么不同，第三个参数就是使用对应命令所需要传递的参数。 [代码]// 一般不会直接去操作我们本身的HTML文档，可以去插入一个iframe然后通过contentDocument来获取、操作iframe中的HTML文档。 let iframe = document.createElement('ifram'); let doc = iframe.contentDocument; // 首先要将HTML文档切换成设计模式 doc.designMode = 'on'; // 然后就可以使用execCommand 这个命令了； // 执行复制命令，复制选中区域 doc.execCommand('copy') // 剪切选中区域 doc.execCommand('cut') // 全选 doc.execCommand('selectAll') // 将选中文字变成粗体，同时接下来输入的文字也会成为粗体， doc.execCommand('bold') // 将选中文字变成斜体，同时接下来输入的文字也会成为斜体， doc.execCommand('italic') // 设置背景颜色，，比如设置背景色为红色，就传入 'red'即可 doc.execCommand('backColor',true,'red') [代码] 用处 我用这些命令简单的写了一个富文本的demo，大家可以看一下Demo，效果如下： [图片] 浏览器支持度 CustomEvent （自定义事件） 大家都知道各种事件是如何绑定的，但是有时候这些事件不够用呢，custom event就可以解决这样的问题。 用法 [代码]let dom = document.querySelector('#app'); // 绑定事件， 传递过来的值可以通过ev.detail 来获取 dom.addEventListener('log-in',(ev) => { const { detail } = ev; console.log(detail); // hello }) // 派发事件，需要传入两个参数，一个是事件类型，另外一个是一个对象，detail就是传递过去的值 dom.dispatchEvent(new CustomEvent('log-in',{ detail:'hello' })) [代码] 用处 绑定自定义事件，最近很火的框架Omi，其中的自定义事件就是基于customEvent实现的。 浏览器支持度 [图片] 最后 就先介绍到这些，web api越来越多，当然每个人不可能全都熟记于心，这篇文章也只是简单介绍一下，还有很多有意思而且很重要的API，比如：web components， service worker，genric sensor等等，不过这些都有很多人在钻研，同时文档相对较多。 相信你看完这些至少已经知道这些API的大概用法了，如果有兴趣了解用法的话，可以去看下我写的demo，也可以去看看MDN文档去深入研究一下。 参考 MDN文档 阮一峰大神的博客 web-api-you-dont-know 视频演讲 http://www.zhangyunling.com/725.html Omi WeElement源码

前言 源码看这里 [图片] 技术栈是 [代码]Taro + mobx + TypeScript[代码]，接口来自 Yahoo Weather API，当然设计也是参 (chao) 考 (xi) 的 Yahoo Weather. 接口有时会访问失败，尤其是晚上，我也没办法啊。🤷 功能 下拉刷新 华氏温度、摄氏温度切换 分时展示一天的天气预报 展示未来10天的天气预报 展示当前风向、风速 展示日出日落、月相等信息 展示一天内的降水预报 城市天气检索 TODO 国际化 性能优化 图片加载优化 Jest 搞起来（初始化已搭好） Travis CI 搞起来（初始化已搭好） 将搜索模块放到一个新页面（强行加个路由😂） 踩坑 小程序篇 云开发解决 Bei An 问题 由于众所周知的原因，wx 小程序无法调用未 bei an 的接口，哪怕是在开发环境。所以我们用云开发的云函数来 “反代” 接口，下面通过一个例子说一下技术要点。 首先在根目录的 [代码]project.config.json[代码] 文件里添加 [代码]"cloudfunctionRoot": "functions/"[代码]，然后在根目录创建文件夹 [代码]functions[代码]. 并点击右键创建一个新的云函数，比如我们叫 [代码]getRegion[代码]。 [图片] 因为我们的目标是通过云函数请求一个未 bei an 的接口，所以为了更方便的处理异步请求，我们引入 [代码]request-promise[代码] 这个库。 通过[代码]硬盘打开[代码]进入到这个云函数的文件夹，然后安装依赖： [代码]yarn add request request-promise [代码] 接下来我们在 [代码]index.js[代码] 中写逻辑，直接上代码。云函数通过 [代码]event[代码] 对象来获取前端传过来的参数，然后通过 Promise 对象将结果返回。这个例子中我们需要拿到[代码]region[代码]， [代码]// 云函数入口文件 const cloud = require('wx-server-sdk') const rp = require('request-promise') cloud.init() exports.main = async (event, context) => { const region = event.region; const res = await rp({ method: 'get', uri: `https://www.yahoo.com/news/_tdnews/api/resource/WeatherSearch;text=${region}`, json: true }).then((body) => { return { regionList: body } }).catch(err => { return err; }) return res; } [代码] 接下来是前端发请求了，注意这里不能再用 [代码]Taro.request()[代码], 而是云函数独有的 [代码]wx.cloud.callFunction()[代码], 因为我现在的 Taro 版本尚未实现 [代码]Taro.cloud.callFunction()[代码]，所以直接用 [代码]wx[代码] 打头即可。 首先封装一下 [代码]wx.cloud.callFunction()[代码]，其实感觉什么卵用🤪： [代码]export const httpClient = (url: string, data: any) => new Promise((resolve, reject): void => { wx.cloud.callFunction({ name: url, data, }).then(res => { resolve(res.result); }).catch(e => { reject(e) }); }); [代码] 然后我们在 store 里面写逻辑，这样基本上就解决了数据请求的坑。 [代码] public getRegion = (text: string) => { httpClient('getRegion', { region: encodeURI(text), }) .then((res: any) => { runInAction(() => { if (res.regionList) { this.regionList = res.regionList; } }); }) .catch(() => { setToast(toastTxt.cityFail); }); }; [代码] 🔔题外话：因为当前版本尚未实现 [代码]Taro.cloud.callFunction()[代码]，所以 lint 会报错，虽然不影响使用，大家有什么好的方法，可以说一下。 地理信息授权问题 在这个项目里，我们需要通过小程序拿到的经纬度来反查城市信息，而小程序获取经纬度需要用户授权。这里有个坑，当用户拒绝授权后，小程序默认询问授权的 dialog 在一段时间内不会重复弹出，所以我们必须手动将用户引导到授权页面。 以前小程序有个接口叫做 [代码]wx.openSetting()[代码]，但 tx 把它废掉了，现在只能让用户点击一个特定的按钮。 为此我做了一个 modal，这里贴出关键代码。 [代码]<Button openType='openSetting' onOpenSetting={() => this.onOpenSetting()}> OK </Button> [代码] 首先我们必须给按钮声明 [代码]openType='openSetting'[代码]，这样当用户点击了之后就会跳转到设置页面。 其次，我们需要在用户离开授权页面时，也就是点击了左上角那个返回按钮时，再次去检查一下用户的授权情况。所以我们要添加 [代码]onOpenSetting={() => this.onOpenSetting()[代码]，不得不吐槽这个事件命名，明明应该叫做 [代码]onLeaveSetting[代码]才合理。 在 [代码]onOpenSetting()[代码] 方法中我们再次执行判断用户是否授权的方法，未授权的话接着弹 modal，否则放行请求相应的数据接口。 文字有些累，直接看图。 [图片] 无法用传统方式清空文本框文字 当用户关闭[代码]搜索[代码] dialog 时，文本框的文字应当被清空，所以一开始写成下面的这样，即点击关闭按钮时将 [代码]inputValue = ''[代码] ，然而发现不行。 [代码]<Input type='text' value={inputValue} placeholder='Enter City or ZIP code' onInput={e => handleInputTextChange(e)} /> <Button onClick={() => hideSearchDialog()}>Close</Button> [代码] 查了一下官方文档，必须将 [代码]Input[代码] 和 [代码]Button[代码] 包裹在一个 [代码]Form[代码] 下，且要给关闭按钮加上 [代码]formType='reset'[代码]，最后给 [代码]Form[代码] 添加 [代码]onReset[代码] 事件指向关闭 dialog 的方法。 [代码]<Form onReset={() => hideSearchDialog()}> <Input className={styles.input} type='text' placeholder='Enter City or ZIP code' onInput={e => handleInputTextChange(e)} /> <Button formType='reset'>Close</Button> </Form>; [代码] Taro篇 大多是编译问题和它 webpack 配的问题，相应的我都提了 issue，有兴趣的话可以跟进。 Taro 编译会忽略模版两个之间的空格 举个例子，[代码]<Text>day - night</Text>[代码]，可以正常编译，页面可以正常看到 [代码]day - night[代码]，但是假如是变量，就会被编译成 [代码]day- night[代码]，注意，空格被吃掉了。 [代码]const day = 'day' const night = 'night' <Text>{day} - {night}</Text> [代码] 我提了个 issue #2261，然并没人鸟我，有兴趣可以跟进一下。 ts 不能识别[代码]wx[代码] 因为用到了云开发，而 Taro 现阶段还没有[代码]Taro.cloud(...)[代码],所以在使用原生的[代码]wx.cloud(...)[代码]时, ts 肯定会报错。 css module 等静态文件 找不到路径 一开始用的[代码]import[代码]来引入静态文件，但报“找不到路径”，可以看下图（但不影响使用）。提了个 issue #2213, 按照大佬的回复修改也没解决问题，实在受不了一片红，索性改成了[代码]commonJS[代码]. [图片] Problem 下面是项目中存在的一些问题，有兴趣的话欢迎大家一起讨论。 图片加载不友好 接口图片的 url 来自[代码]aws[代码]，因为众所周知的原因，图片经常会挂掉， 所以有必要在图片挂掉的时候触发[代码]onError[代码]事件，然后给用户一个提示。 因为小程序不支持[代码]new Image()[代码]，所以只能用官方提供的[代码]Image[代码]组件，幸好这个 组件支持[代码]onLoad[代码]和[代码]onError[代码]事件。 加载失败的问题解决了，但因为[代码]aws[代码]的速度太慢，所以正常加载时也很不友好（可以自行体会） 做了一些尝试，比如先加载缩略图，再展示完整图片，但接口提供的最小尺寸的图片也已经达到了 70 多 k，并且该死的 Yahoo 恰好将图片 url 控制大小的那段用了加密，所以这个方式 pass 掉了。 搜索输入框加个节流 现在的做法是在 store 的 构造器加个节流，但不知道这样合不合理。 [代码] construtor() { this.getRegion = _.debounce(this.getRegion, 150); } [代码] 最后 老子再也不写小程序了！ [图片]

微信小程序发送短信验证码后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

因为公司要在小程序上加蓝牙打印标签功能，所以就开始接触小程序的蓝牙打印，看文档还是蛮详细的，而且还有demo，顺着demo，一步一步下来还是蛮顺畅的，原以为很快就能完成。没想到坑来了，由于demo中writeBLECharacteristicValue只是写入了一个16进制的数据，而现实中是需要发送字符串的，而且小程序必须要是arrayBuffer,就必须将字符串转arrayBuffer了，好，网上搜下，准备打印了吱吱吱咦，怎么有乱码啊，怎么中文都乱码了。。这下可糟了！于是就去各种找答案。最后知道问题了：原来是因为我们公司用的打印机是智能支持GB2312编码格式的二进制的，但是字符串是utf-8，诶，又得爬坑。经过一天的努力，终于找到解决方法啦，感谢csdn的大大们。实现的代码如下 //计算arraybuffer的长度 sumStrLength(str) { var length = 0; var data = str.toString(); for (var i = 0; i < data.length; i++) { if (this.isCN(data[i])) { //是中文 length += 2; } else { length += 1; } } return length; }, //混杂 hexStringToBuff(str) { //str=‘中国：WXHSH’ const buffer = new ArrayBuffer((this.sumStrLength(str)) + 1); const dataView = new DataView(buffer) var data = str.toString(); var p = 0; //ArrayBuffer 偏移量 for (var i = 0; i < data.length; i++) { if (this.isCN(data[i])) { //是中文 //调用GBK 转码 var t = gbk.$URL.encode(data[i]); for (var j = 0; j < 2; j++) { var temp = parseInt(t[j * 2] + t[j * 2 + 1], 16) dataView.setUint8(p++, temp) } } else { var temp = parseInt(data.charCodeAt(i).toString(16), 16) dataView.setUint8(p++, temp) } } console.log(String.fromCharCode.apply(null, new Uint8Array(buffer))); return buffer; }, //js正则验证中文 isCN(str) { if (/[1]+$/.test(str)) { return true; } else { return false; } }, 将中文转化为GB2312编码格式再转成arrayBuffer就大功告成啦，把这个文章记录下来，希望可以帮助到其他小程程们。如有需要，加我Q：786914253 \u3220-\uFA29 ↩︎

小程序提供了路由功能来实现页面跳转，但是在使用的过程中我们还是发现有些不方便的地方，通过封装，我们可以实现诸如路由管理、简化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。