微信小程序开发文档 第2页

sm-crypto 小程序 js 库。国密算法 sm2、sm3 和 sm4 的实现。 使用此组件需要依赖小程序基础库 2.2.1 以上版本，同时依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档。 安装 npm install --save miniprogram-sm-crypto sm2 获取密钥对 const sm2 = require('miniprogram-sm-crypto').sm2; let keypair = sm2.generateKeyPairHex(); publicKey = keypair.publicKey; // 公钥 privateKey = keypair.privateKey; // 私钥 加密解密 const sm2 = require('miniprogram-sm-crypto').sm2; const cipherMode = 1; // 1 - C1C3C2，0 - C1C2C3，默认为1 let encryptData = sm2.doEncrypt(msgString, publicKey, cipherMode); // 加密结果 let decryptData = sm2.doDecrypt(encryptData, privateKey, cipherMode); // 解密结果 签名验签 ps：理论上来说，只做纯签名是最快的。 const sm2 = require('miniprogram-sm-crypto').sm2; // 纯签名 + 生成椭圆曲线点 let sigValueHex = sm2.doSignature(msg, privateKey); // 签名 let verifyResult = sm2.doVerifySignature(msg, sigValueHex, publicKey); // 验签结果 // 纯签名 let sigValueHex2 = sm2.doSignature(msg, privateKey, { pointPool: [sm2.getPoint(), sm2.getPoint(), sm2.getPoint(), sm2.getPoint()], // 传入事先已生成好的椭圆曲线点，可加快签名速度 }); // 签名 let verifyResult2 = sm2.doVerifySignature(msg, sigValueHex2, publicKey);...

lottie-miniprogram lottie 动画库适配小程序的版本。 lottie 的相关介绍与动画生成方法等请参考 官方说明 依赖小程序基础库版本 >= 2.8.0 的环境 使用 可参考该代码片段：https://developers.weixin.qq.com/s/2TYvm9mJ75bF。大致步骤如下： 通过 npm 安装： npm install --save lottie-miniprogram 传入 canvas 对象用于适配 <canvas id="canvas" type="2d"></canvas> import lottie from 'lottie-miniprogram' Page({ onReady() { wx.createSelectorQuery().select('#canvas').node(res => { const canvas = res.node lottie.setup(canvas) }).exec() } }) 使用 lottie 接口 lottie.setup(canvas) lottie.loadAnimation({ ... }) 接口 目前提供两个接口： lottie.setup(canvas) 需要在任何 lottie 接口调用之前调用，传入 canvas 对象 lottie.loadAnimation(options) 与原来的 loadAnimation 有些不同，支持的参数有： loop autoplay animationData path （只支持网络地址） rendererSettings.context （必填） 说明 本项目是以 npm 的方式依赖原 lottie-web 项目，若原项目有新版本，可直接改变依赖的版本号。 本项目依赖小程序基础库 2.8.0 里性能更好的 canvas 实现，由于还有些小问题没有正式开放，但目前用在此处暂无发现问题。 由于小程序本身不支持动态执行脚本，因此 lottie 的 expression 功能也是不支持的。

threejs-miniprogram Three.js 小程序 WebGL 的适配版本。 使用 可参考 example 目录下的示例项目或参照以下流程： 通过 npm 安装 npm install --save threejs-miniprogram 安装完成之后在微信开发者工具中点击构建 npm。 导入小程序适配版本的 Three.js import {createScopedThreejs} from 'threejs-miniprogram' Page({ onReady() { wx.createSelectorQuery() .select('#webgl') .node() .exec((res) => { const canvas = res[0].node // 创建一个与 canvas 绑定的 three.js const THREE = createScopedThreejs(canvas) // 传递并使用 THREE 变量 }) } }) 说明 本项目当前使用的 Three.js 版本号为 0.108.0，如要更新 threejs 版本可发 PR 修改或 fork 后自行修改。 该适配版本的 THREE 不在全局环境中，如使用 Three.js 的其他配套类库，需要自行传入 THREE 到类库中。 如在使用过程中发现有适配问题，可通过 issue 反馈或发 PR 修复。

API Promise化 扩展微信小程序api支持promise 安装 npm install --save miniprogram-api-promise 使用 在小程序入口（app.js）调用一次promisifyAll，只需要调用一次。 示例: import { promisifyAll, promisify } from 'miniprogram-api-promise'; const wxp = {} // promisify all wx's api promisifyAll(wx, wxp) console.log(wxp.getSystemInfoSync()) wxp.getSystemInfo().then(console.log) wxp.showModal().then(wxp.openSetting()) // compatible usage wxp.getSystemInfo({success(res) {console.log(res)}}) // promisify single api promisify(wx.getSystemInfo)().then(console.log)

小程序的 MobX 绑定辅助库 小程序的 MobX 绑定辅助库。 此 behavior 依赖开发者工具的 npm 构建。具体详情可查阅 官方 npm 文档 。 可配合 MobX 的小程序构建版 npm 模块 mobx-miniprogram 使用。 使用方法 需要小程序基础库版本 >= 2.2.3 的环境。 也可以直接参考这个代码片段（在微信开发者工具中打开）： https://developers.weixin.qq.com/s/36j8NZmC74ac 。 安装 mobx-miniprogram 和 mobx-miniprogram-bindings ： npm install --save mobx-miniprogram mobx-miniprogram-bindings 创建 MobX Store。 // store.js import { observable, action } from 'mobx-miniprogram' export const store = observable({ // 数据字段 numA: 1, numB: 2, // 计算属性 get sum() { return this.numA + this.numB }, // actions update: action(function () { const sum = this.sum this.numA = this.numB this.numB = sum }) }) 在 Component 构造器中使用： import { storeBindingsBehavior } from 'mobx-miniprogram-bindings' import { store } from './store' Component({ behaviors: [storeBindingsBehavior], data: { someData: '...' }, storeBindings: { store, fields: { numA: () => store.numA, numB: (store) => store.numB, sum: 'sum' },...

computed 小程序自定义组件扩展 behavior，计算属性 computed 和监听器 watch 的实现。在 data 或者 properties 改变时，会重新计算 computed 字段并触发 watch 监听器。 此 behavior 依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档。 使用方法 需要小程序基础库版本 >= 2.6.1 的环境。 你可以直接体验一下这个代码片段，它包含了基本用法示例：https://developers.weixin.qq.com/s/gXK31mmZ73dd 安装 npm install --save miniprogram-computed computed 基本用法 const computedBehavior = require('miniprogram-computed') Component({ behaviors: [computedBehavior], data: { a: 1, b: 1, }, computed: { sum(data) { // 注意： computed 函数中不能访问 this ，只有 data 对象可供访问 // 这个函数的返回值会被设置到 this.data.sum 字段中 return data.a + data.b }, }, methods: { onTap() { this.setData({ a: this.data.b, b: this.data.a + this.data.b, }) } } }) <view>A = {{a}}</view> <view>B = {{b}}</view> <view>SUM = {{sum}}</view> <button bindtap="onTap">click</button> watch 基本用法 const computedBehavior = require('miniprogram-computed') Component({ behaviors: [computedBehavior], data: { a: 1, b: 1, sum: 2, }, watch: { 'a, b': function(a, b) { this.setData({ sum: a + b })...

wxml-to-canvas 小程序内通过静态模板和样式绘制 canvas ，导出图片，可用于生成分享图等场景。 使用方法 Step1. npm 安装 npm install --save wxml-to-canvas Step2. JSON 组件声明 { "usingComponents": { "wxml-to-canvas": "wxml-to-canvas", } } Step3. wxml 引入组件 <video class="video" src="{{src}}"> <wxml-to-canvas class="widget"></wxml-to-canvas> </video> <image src="{{src}}" style="width: {{width}}px; height: {{height}}px"></image> Step4. js 获取实例 const {wxml, style} = require('./demo.js') Page({ data: { src: '' }, onLoad() { this.widget = this.selectComponent('.widget') }, renderToCanvas() { const p1 = this.widget.renderToCanvas({ wxml, style }) p1.then((res) => { this.container = res this.extraImage() }) }, extraImage() { const p2 = this.widget.canvasToTempFilePath() p2.then(res => { this.setData({ src: res.tempFilePath, width: this.container.layoutBox.width, height: this.container.layoutBox.height }) }) } }) wxml 模板 支持 view、text、image 三种标签，通过 class 匹配 style 对象中的样式。 <view class="container" > <view class="item-box red"> </view> <view class="item-box green" > <text class="text">yeah!</text> </view> <view class="item-box blue"> <image...

select-text 可选文本组件。该组件有两种使用模式：长按出现选区，与浏览器默认效果一致；长按出现复制按钮，点击复制拷贝全部内容至剪贴板，常见于聊天对话框等场景。 需注意的时，为实现点击其它区域隐藏复制按钮，开发者可在页面最外层监听 tap 事件，并将 evt 对象赋值给 on-document-tap。 <view bind:tap="handleTap"> <view class="demo-block"> <block wx:for="{{arr}}" wx:key="placement"> <view class="list-item"> <mp-select-text show-copy-btn placement="{{item.placement}}" value="{{item.value}}" data-id="{{index}}" bindcopy="onCopy" on-document-tap="{{evt}}" > </mp-select-text> </view> </block> <view class="list-item"> <mp-select-text value="默认的长按效果与浏览器一致"></mp-select-text> </view> </view> </view> Page({ data: { arr: [{ value: '长按，上侧复制', placement: 'top' }, { value: '长按，右侧复制', placement: 'right' }, { value: '长按，左侧复制', placement: 'left' }, { value: '长按，下侧复制', placement: 'bottom' }] }, onLoad() { }, onCopy(e) { console.log('onCopy', e) }, handleTouchStart(e) { console.log('@@ touchstart', e) }, handleTap(e) { console.log('@@ tap', e) this.setData({ evt: e }) } }) 属性列表 属性 类型 默认值 必填 说明 value String 是 文本组件内容 space String 否 显示连续空格 decode Boolean false 否 是否解码 show-copy-btn Boolean false 否 长按显示复制按钮 z-index Number 99 否 复制按钮的层级 active-bg-color String #DEDEDE 否 长按复制时文本区背景色 on-document-tap Object...

Barrage for MiniProgram 小程序弹幕组件。通过 view 的 transform 移动弹幕，覆盖在 原生组件上时，请确保组件已经同层化。参考用例 使用方法 npm 安装 npm install --save miniprogram-barrage JSON 组件声明 { "usingComponents": { "barrage": "miniprogram-barrage", } } wxml 引入弹幕组件 <video class="video" src="{{src}}"> <barrage class="barrage"></barrage> </video> js 获取实例 Page({ onReady() { this.addBarrage() }, addBarrage() { const barrageComp = this.selectComponent('.barrage') this.barrage = barrageComp.getBarrageInstance({ font: 'bold 16px sans-serif', duration: 10, lineHeight: 2, mode: 'separate', padding: [10, 0, 10, 0], tunnelShow: false }) this.barrage.open() this.barrage.addData(data) } }) 配置 Barrage 默认配置 { duration: 10, // 弹幕动画时长 (移动 2000px 所需时长) lineHeight: 1.2, // 弹幕行高 padding: [0, 0, 0, 0], // 弹幕区四周留白 alpha: 1, // 全局透明度 font: '10px sans-serif', // 全局字体 mode: 'separate', // 弹幕重叠 overlap 不重叠 separate range: [0, 1], // 弹幕显示的垂直范围，支持两个值。[0,1]表示弹幕整个随机分布， tunnelShow: false, // 显示轨道线 tunnelMaxNum: 30,...

index-list 索引列表组件，可实现类似通讯录效果。组件内节点将被添加到列表上方。 示例代码： const res = { result: [ [{ cidx: [0, 15], fullname: "北京市", id: "110000", location: { lat: 39.90469, lng: 116.40717 }, name: "北京", pinyin: ["bei", "jing"] }, { cidx: [16, 31], fullname: "天津市", id: "120000", location: {lat: 39.0851, lng: 117.19937}, name: "天津", pinyin: ["tian", "jin"] }, { cidx: [32, 42], fullname: "河北省", id: "130000", location: {lat: 38.03599, lng: 114.46979}, name: "河北", pinyin: ["he", "bei"], }, { cidx: [43, 53], fullname: "山西省", id: "140000", location: {lat: 37.87343, lng: 112.56272}, name: "山西", pinyin: ["shan", "xi"], }] ] } Page({ onLoad(options) { this.getCitys() }, onChoose(e) { console.log('onChoose', e) }, getCitys() { const _this = this const cities = res.result[0] // 按拼音排序 cities.sort((c1, c2) => { let pinyin1 = c1.pinyin.join('') let...