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

wx:if 在框架中，我们用wx:if="{{condition}}"来判断是否需要渲染该代码块： <view wx:if="{{condition}}"> True </view> 也可以用wx:elif和wx:else来添加一个else块： <view wx:if="{{length > 5}}"> 1 </view> <view wx:elif="{{length > 2}}"> 2 </view> <view wx:else> 3 </view> block wx:if 因为wx:if是一个控制属性，需要将它添加到一个标签上。但是如果我们想一次性判断多个组件标签，我们可以使用一个<block/>标签将多个组件包装起来，并在上边使用wx:if控制属性。 <block wx:if="{{true}}"> <view> view1 </view> <view> view2 </view> </block> 注意：<block/>并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。 实例： wxml：使用view <!--index.wxml--> <button bindtap="EventHandle">按钮</button> <!-- wx:if --> <view wx:if="{{boolean==true}}"> <view class="bg_black"></view> </view> <view wx:elif="{{boolean==false}}"> <view class="bg_red"></view> </view> wxss： /**index.wxss**/ .bg_black { height: 200rpx; background: lightskyblue; } .bg_red { height: 200rpx; background: lightpink; } js： // index.js Page({ data: { boolean:false }, EventHandle: function(){ var bol = this.data.boolean; this.setData({ boolean: !bol }) } }) 运行： wx:ifvshidden 因为wx:if之中的模板也可能包含数据绑定，所以当wx:if的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。 同时wx:if也是惰性的，如果在初始渲染条件为false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。 相比之下，hidden就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。 一般来说，wx:if有更高的切换消耗而hidden有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用hidden更好，如果在运行时条件不大可能改变则wx:if较好。

wx:for 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item <view wx:for="{{array}}"> {{index}}: {{item.message}} </view> Page({ data: { array: [{ message: 'foo', }, { message: 'bar' }] } }) 使用 wx:for-item 可以指定数组当前元素的变量名， 使用 wx:for-index 可以指定数组当前下标的变量名： <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"> {{idx}}: {{itemName.message}} </view> 如下，是一个轮播的图片列表循环，使用了wx:for方法：  这个注意了。wx:key还是要加上的，不然一直报这个提示错误 wx:for 也可以嵌套，下边是一个九九乘法表 <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"> <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j"> <view wx:if="{{i <= j}}"> {{i}} * {{j}} = {{i * j}} </view> </view> </view> block wx:for 类似 block wx:if，也可以将 wx:for 用在<block/>标签上，以渲染一个包含多节点的结构块。例如： <block wx:for="{{[1, 2, 3]}}"> <view> {{index}}: </view> <view> {{item}} </view> </block> wx:key 如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input/> 中的输入内容，<switch/> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。 wx:key 的值以两种形式提供 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。 保留关键字 *this 代表在 for 循环中的...

数据绑定 WXML中的动态数据均来自对应Page的data。 简单绑定 数据绑定使用”Mustache”语法（双大括号）将变量包起来，可以作用于： 内容 <view> {{ message }} </view> Page({ data: { message: 'Hello MINA!' } }) 组件属性(需要在双引号之内) <view id="item-{{id}}"> </view> Page({ data: { id: 0 } }) 控制属性(需要在双引号之内) <view wx:if="{{condition}}"> </view> Page({ data: { condition: true } }) 关键字(需要在双引号之内) true：boolean 类型的 true，代表真值。 false： boolean 类型的 false，代表假值。 <checkbox checked="{{false}}"> </checkbox> 特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。 运算 可以在{{}}内进行简单的运算，支持的有如下几种方式： 三元运算 <view hidden="{{flag ? true : false}}"> Hidden </view> 算数运算 <view> {{a + b}} + {{c}} + d </view> Page({ data: { a: 1, b: 2, c: 3 } }) view中的内容为3 + 3 + d。 逻辑判断 <view wx:if="{{length > 5}}"> </view> 字符串运算 <view>{{"hello" + name}}</view> Page({ data:{ name:"MINA" } }) 数据路径运算 <view>{{object.key}} {{array[0]}}</view> Page({ data: { object: { key: 'Hello ' }, array: ['MINA']...

小程序API 小程序开发框架MINA提供丰富的微信原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。 详细介绍请参考微信小程序API文档

文件作用域 在JavaScript文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。 通过全局函数getApp()可以获取全局的应用实例，如果需要全局的数据可以在App()中设置，如： // app.js App({ globalData: 1 }) // a.js // The localValue can only be used in file a.js. var localValue = 'a' // Get the app instance. var app = getApp() // Get the global data and change it. app.globalData++ // b.js // You can redefine localValue in file b.js, without interference with the localValue in a.js. var localValue = 'b' // If a.js it run before b.js, now the globalData shoule be 2. console.log(getApp().globalData) 模块化 我们可以将一些公共的代码抽离成为一个单独的js文件，作为一个模块。模块只有通过module.exports或者 exports才能对外暴露接口。 需要注意的是： exports是module.exports的一个引用，因此在模块里边随意更改exports的指向会造成未知的错误。所以我们更推荐开发者采用module.exports来暴露模块接口，除非你已经清晰知道这两者的关系。 小程序目前不支持直接引入node_modules，开发者需要使用到node_modules时候建议拷贝出相关的代码到小程序的目录中。 // common.js function sayHello(name) { console.log('Hello ${name} !') } function sayGoodbye(name) { console.log('Goodbye ${name} !') } module.exports.sayHello = sayHello exports.sayGoodbye = sayGoodbye ​在需要使用这些模块的文件中，使用require(path)将公共代码引入。 var common = require('common.js') Page({ helloMINA: function() { common.sayHello('MINA') } goodbyeMINA: function() { common.sayGoodbye('MINA')...

框架 小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。 框架提供了自己的视图层描述语言WXML和WXSS，以及基于JavaScript的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。 响应的数据绑定 框架的核心是一个响应的数据绑定系统。 整个系统分为两块视图层(View)和逻辑层(App Service) 框架可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。 通过这个简单的例子来看： <!-- Thie is our View --> <view> Hello {{name}}! </view> <button bindtap="changeName"> Click me! </button> // This is our App Service. // This is our data. var helloData = { name: 'WeChat' } // Register a Page. Page({ data: helloData, changeName: function(e) { // sent data change to view. this.setData({ name: 'MINA' }) } }) 开发者通过框架将逻辑层数据中的name与视图层的name进行了绑定，所以在页面一打开的时候会显示Hello WeChat! 当点击按钮的时候，视图层会发送changeName的事件给逻辑层，逻辑层找到对应的事件处理函数 逻辑层执行了setData的操作，将name从weChat变为MINA，因为该数据和视图层已经绑定了，从而视图层会自动响应改变为Hello MINA! 。 页面管理 框架管理了整个小程序的页面路由，可以做到页面间的无缝切换，并给以页面完整的生命周期。开发者需要做的只是将页面的数据，方法，生命周期函数注册进框架中，其他的一切复杂的操作都交由框架处理。 基础组件 框架提供了一套基础的组件，这些组件自带微信风格的样式以及特殊的逻辑，开发者可以通过组合基础组件，创建出强大的微信小程序 。 丰富的API 框架提供丰富的微信原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。

版本更新日志 1.3.2 修复WebGLCanvasContext2d报错导致动画不播放问题 1.3.1 修复 getShareParams 接口无法获取直播间分享海报的参数问题 1.3.0 新增助力榜功能 1.2.10 优化getShareParams接口（新增扫码/广告等场景获取参数） 1.2.9 新增智能回复功能 新增评论支持微信表情功能 新增分享直播间海报到会话功能 1.2.8 新增手机号兑奖方式 新增自定义兑奖说明 直播间小程序昵称展示长度自适应 1.2.7 修复部分用户微信版本过低导致的白屏问题 1.2.6 新增直播预告功能 新增直播挂件组件 直播间组队抽奖优化 直播间启动性能优化 直播间色调设计优化 直播间点赞素材更新 1.2.5 新增组队抽奖功能 1.2.4 直播间详情页优化 连麦小窗画面支持移动 直播间新增下载海报功能 1.2.3 新增直播间公告功能 新增购物袋动画效果 优化点赞动画同步效果 优化清屏热区体验 1.2.2 新增连麦功能 新增点赞动画同步功能 新增直播间拍一拍彩蛋 PC端支持全屏 安卓直播间分享面板新增分享到朋友圈功能 优化朋友圈中间页交互体验 1.2.0 直播间客服聊天窗支持发送直播间卡片 优化直播间清屏/回放快进等体验 优化直播间点赞动画性能 1.1.10 优化长期订阅直播能力 修复回放偶现丢评论问题 1.1.9 新增长期订阅直播功能 直播间UI改版 推流直播支持自定义背景墙 优化群分享样式 1.1.8 新增商品讲解功能 新增商品点赞功能 1.1.4 直播间可配置小程序客服 直播间分享能力可配置 修复分包引入小程序直播组件导致样式错乱问题 修复直播结束页滚动时商品展示不全问题 1.1.3 支持分享朋友圈功能（灰度安卓用户） 订阅组件支持自定义颜色和大小 开播提醒和订阅组件支持携带自定义参数 优化回放进度条拖动精度 优化评论体验 1.1.0 修复推流回放样式相关问题 1.0.18 优化直播间打开速度 1.0.16 优惠券功能全面上线 优化竖屏推流直播画面显示 1.0.15 优化手机发烫问题 修复部分用户点赞无动画效果问题 1.0.13 适配iPad及PC 修复清屏相关问题 订阅组件新增stopPropagation属性控制事件冒泡 1.0.11 修复弹起评论框后点直播画面区域无法收起问题 修复清屏回来打开货架无法收起问题 1.0.10 修复横屏下点击清屏再返回竖屏后互动按钮失效问题 修复从左往右滑时出现清屏动画问题 1.0.9 修复进直播间闪现货架问题 1.0.8 新增竖屏清屏功能 新增回放视频小窗功能 优化评论区域卡顿问题 修复商品链接type参数被覆盖问题 修复商品链接参数里的html被去掉问题 1.0.6 新增小助手功能 1.0.5 优化部分机型回放拉伸等问题 修复直播小窗重音问题 修复客户端导致点赞动画显示问题 修复跳转其他页面提示“当前处于非WiFi环境，请注意流量消耗”问题 1.0.4 新增回放功能 通过close_share_ticket参数设置shareTicket 商品链接支持跳转到tab页面 1.0.3 新增推流功能 获取分享链接参数getShareParams接口优化 1.0.2 携带 openid / room_id /...

小程序测速 为帮助开发者优化小程序性能，我们推出了”小程序测速”功能。”小程序测速”可以简单方便地统计小程序内某一事件的实时耗时情况，并可根据地域、运营商、操作系统、网络类型、机型等关键维度进行实时交叉分析。从基础库2.9.2开始，开发者通过“测速上报”接口上报某一指标的耗时情况后，可在小程序管理后台”开发 -运维中心 -小程序测速” 查看各指标耗时趋势，并支持分钟级数据实时查看。 新建监控 ID 为了实现对某一指标的耗时监控，开发者需要先定义监控指标。在小程序管理后台 ：”开发 -运维中心 -小程序测速”中新建监控 ID，并填写监控指标的名称和解释。 点击”新建”可以新建 ID ，你需要选择指标类型，并填写指标名称和指标对应的解释。 监控指标分为两类： 网络请求类： 此类耗时主要受网络环境影响，包含操作系统、运营商、网络环境、地区等统计维度。如：网络 api 耗时、云调用耗时、网络数据读写耗时等。注意此类指标最多可创建20个。 加载/渲染类：此类耗时主要受设备性能影响，包含操作系统、机型类别等统计维度。可以用来测量页面切换耗时、组件渲染耗时等。 注意此类指标最多可创建20个。 新建后，可以看到上报需要使用的监控 ID 。 测速上报 开发者定义监控ID后，需要在小程序代码中调用 wx.reportPerformance 接口上报耗时数值，才可实现耗时监控： 上报方法1： 使用 canIUse 进行判断 // * 需要使用 canIUse 判断接口是否可用 if (wx.canIUse('reportPerformance')) { wx.reportPerformance(id, val) } 上报方法2：使用 compareVersion 进行判断 // * 需要先使用 compareVersion 判断接口是否可用 const sdkVersion = wx.getSystemInfoSync().SDKVersion if (compareVersion(sdkVersion, '2.9.2') >= 0) { wx.reportPerformance(id, val) } ​id 和 val 均为 uint32 类型，其中 id 为小程序管理后台定义的监控 ID，val 为本次要上报的耗时数值（由开发者自行计算）。接口调用需要基础库的版本号高于 2.9.2，否则在一些低版本基础库可能报错。 (compareVersion 定义) 数据观察 完成代码上报后，可在小程序管理后台”开发 -运维中心 -小程序测速” 查看各指标耗时趋势。目前线上数据约有15分钟数据时延，上报数据保留 7 天，可按照 1 分钟 – 1 小时等不同的时间粒度进行聚合。 每个指标可以观察到两条曲线，分别为平均值曲线和上报次数曲线。 ​  ​同时对于不同维度的数据，我们提供了交叉对比功能，以帮助大家快速便捷的完成分析，注意交叉对比的曲线数最多不能超过10条。  ​对于网络请求类指标，我们提供了区域地图，以帮助大家快速的定位区域资源问题。  自定义维度(可选功能) 对于更复杂的用户场景，用户可能需要将测速数据根据url、页面等维度进行细分，所以我们提供了自定义维度，用户可以将一些业务层面的维度字符串填入至自定义维度中，以方便业务分析。 目前每个指标的自定义纬度值的数量需要限制在50以内（超限制的数据会被丢弃），自定义维度值的长度需要限制在256字节内（超限制的值会被截断）。自定义维度的使用效果如下： 想要使用自定义维度，只需要给wx.reportPerformance加上第三个参数dimensions，即可上报自定义维度： wx.reportPerformance(id, value, dimensions) (wx.reportPerformance 文档) Q&A Q : 测速系统可以在哪些场景发挥作用？ A : 可以测量网络类指标（如网络调用/云调用耗时、网络数据读写速度等）和非网络类指标（页面切换加载速度、组件渲染速度等）。可以查看这些指标在不同维度下的数量分布和性能差异。在一些计算视频首屏时延、帧率等场景也可以发挥作用。 Q ：上报API需要的基础库版本是多少？ A ： 需要基础库版本 2.9.2 以上。在一些低版本基础库上可能报错，后续会支持用 canIUse 接口来进行判断。 Q： 系统是否可以再测试版使用？上报的时延大概是多少？数据保存的时间是多久？ A ： 可以在测试版使用，目前上报的时延为 15 分钟左右。数据会保存...

实时日志 背景 为帮助小程序开发者快捷地排查小程序漏洞、定位问题，我们推出了实时日志功能。从基础库2.7.1开始，开发者可通过提供的接口打印日志，日志汇聚并实时上报到小程序后台。开发者可从小程序管理后台“开发->运维中心->实时日志”进入日志查询页面，查看开发者打印的日志信息。 如何使用 1、调用相关接口。打日志的接口是wx.getRealtimeLogManager，为了兼容旧的版本，建议使用如下代码封装一下，例如封装在log.js文件里面： var log = wx.getRealtimeLogManager ? wx.getRealtimeLogManager() : null module.exports = { info() { if (!log) return log.info.apply(log, arguments) }, warn() { if (!log) return log.warn.apply(log, arguments) }, error() { if (!log) return log.error.apply(log, arguments) }, setFilterMsg(msg) { // 从基础库2.7.3开始支持 if (!log || !log.setFilterMsg) return if (typeof msg !== 'string') return log.setFilterMsg(msg) }, addFilterMsg(msg) { // 从基础库2.8.1开始支持 if (!log || !log.addFilterMsg) return if (typeof msg !== 'string') return log.addFilterMsg(msg) } } 2、在页面的具体位置打印日志： var log = require('./log.js') // 引用上面的log.js文件 log.info('hello test hahaha') // 日志会和当前打开的页面关联，建议在页面的onHide、onShow等生命周期里面打 log.warn('warn') log.error('error') log.setFilterMsg('filterkeyword') log.setFilterMsg('addfilterkeyword') 完整的例子可以参考代码片段：https://developers.weixin.qq.com/s/i42NbKmp76bJ 如何查看日志 登录小程序管理后台，从“开发->运维中心->实时日志”进入日志查询页面。开发者可通过设置时间、微信号/OpenID、页面链接、FilterMsg内容（基础库2.7.3及以上支持setFilterMsg）等筛选条件查询指定用户的日志信息。 注意事项 由于后台资源限制，“实时日志”使用规则如下： 为了定位问题方便，日志是按页面划分的，某一个页面，在onShow到onHide（切换到其它页面、右上角圆点退到后台）之间打的日志，会聚合成一条日志上报，并且在小程序管理后台上可以根据页面路径搜索出该条日志。 每个小程序账号每天限制500万条日志，日志会保留7天，建议遇到问题及时定位。 一条日志的上限是5KB，最多包含200次打印日志函数调用（info、warn、error调用都算），所以要谨慎打日志，避免在循环里面调用打日志接口，避免直接重写console.log的方式打日志。 意见反馈里面的日志，可根据OpenID搜索日志。 setFilterMsg可以设置过滤的Msg。这个接口的目的是提供某个场景的过滤能力，例如 setFilterMsg('scene1')，则在MP上可输入scene1查询得到该条日志。比如上线过程中，某个监控有问题，可以根据FilterMsg过滤这个场景下的具体的用户日志。FilterMsg仅支持大小写字母。如果需要添加多个关键字，建议使用addFilterMsg替代setFilterMsg。  

兼容 小程序的功能不断的增加，但是旧版本的微信客户端并不支持新功能，所以在使用这些新能力的时候需要做兼容。 开发者可以通过以下方式进行低版本的兼容： 1. 版本号比较 微信客户端和小程序基础库的版本号风格为 Major.Minor.Patch（主版本号.次版本号.修订版本号）。 文档中会在组件，API等页面描述中带上各个功能所要求的最低基础库版本号。 开发者可以在小程序中通过调用 wx.getSystemInfo 或者 wx.getSystemInfoSync 获取到当前小程序运行的基础库的版本号。通过版本号比较的方式进行运行低版本兼容逻辑。 版本号比较适用于所有情况。部分场景下也可以使用后面提到的方法完成。 注意：不要直接使用字符串比较的方法进行版本号比较。 版本号比较可以参考以下代码： function compareVersion(v1, v2) { v1 = v1.split('.') v2 = v2.split('.') const len = Math.max(v1.length, v2.length) while (v1.length < len) { v1.push('0') } while (v2.length < len) { v2.push('0') } for (let i = 0; i < len; i++) { const num1 = parseInt(v1[i]) const num2 = parseInt(v2[i]) if (num1 > num2) { return 1 } else if (num1 < num2) { return -1 } } return 0 } compareVersion('1.11.0', '1.9.9') // 1 const version = wx.getSystemInfoSync().SDKVersion if (compareVersion(version, '1.1.0') >= 0) { wx.openBluetoothAdapter() } else { // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示 wx.showModal({ title: '提示', content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。' }) } 2. API 存在判断 对于新增的 API，可以通过判断该API是否存在来判断是否支持用户使用的基础库版本。例如： if (wx.openBluetoothAdapter) { wx.openBluetoothAdapter() } else { //...