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

同 正式 版本不同，本页面提供的是开发者工具测试版本的下载，我们将修复 bug 和一些新的特性以 beta 方式先发布。 小程序新版工具内测 新版本的小程序开发工具优化了以下几个方面 重构了工具的整体架构和逻辑，编译和启动速度有 100% 以上的提升 优化了整体交互，预览以及上传代码等高频操作会更加便捷 重构了视觉呈现 除外，全新提供了两大功能 腾讯云服务：开发者提供免费的云端开发能力以及环境 详情 自动化测试：为小程序提供真机测试报告 Tips: 新版工具的安装不会覆盖旧版本，两个版本可以同时存在 下载地址 windows 64 、 windows 32 、 mac 2017.08.24 更新日志 A: 新增 自定义设备宽高的添加和删除 F: 修复 WXS 中使用 console 只打印第一个参数的问题。 F: 修复 编辑器 wxss、wxml 无法格式化的问题 F: 修复 编辑器 当前选中文件没有高亮的问题 F: 修复 编辑器 代码无法折叠的问题 F: 修复 编辑器 无法自动匹配的问题 F: 修复 wxml panel 无法显示 dataset 的问题 F: 修复 wx.openLocation、wx.chooseLocation 调用失败的问题 F: 修复 从浏览器拖动图片到开发者工具会加载该图片导致工具无法使用的问题 F: 修复 公众号调试模式下快捷键缺失的问题 U: 优化 公众号调试模式下模拟器可以缩放 U: 优化 编译条件选择场景值的交互 U: 优化 上传腾讯云的交互 U: 优化 小屏幕工具栏的显示 2017.08.22 更新日志 F: 修复 wxml panel 没有显示样式源文件，无法点击跳转到源文件的问题 F: 修复 wxml panel 勾选、取消勾选样式时不生效的问题 F: 修复 wxml panel 没有显示 element.style 的问题 F: 修复 APIwx.navigateToMiniProgram、wx.navigateBackMiniProgram、wx.exitMiniProgram、wx.startPullDownRefresh、wx.openWeRunSetting、wx.chooseInvoiceTitle 缺失的问题 F: 修复 page.json 不生效的问题 F: 修复 ctrl/command + r 编译快捷键丢失的问题 F: 修复 同时勾选 “编译时自动保存所有文件” 和 “保存时自动编译小程序” 时会出现无法正常编译的问题 A: 新增 WXS 功能

wx.showToast(OBJECT) 显示消息提示框。 OBJECT参数说明： 参数 类型 必填 说明 最低版本 title String 是 提示的内容   icon String 否 图标，有效值”success”、”loading”   image String 否 自定义图标的本地路径，image 的优先级高于 icon 1.1.0 duration Number 否 提示的延迟时间，单位毫秒，默认：1500   mask Boolean 否 是否显示透明蒙层，防止触摸穿透，默认：false   success Function 否 接口调用成功的回调函数   fail Function 否 接口调用失败的回调函数   complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）   示例代码： wx.showToast({ title: '成功', icon: 'success', duration: 2000 }) wx.showLoading(OBJECT) 基础库版本 1.1.0 开始支持，低版本需做兼容处理 显示 loading 提示框, 需主动调用 wx.hideLoading 才能关闭提示框 OBJECT参数说明： 参数 类型 必填 说明 title String 是 提示的内容 mask Boolean 否 是否显示透明蒙层，防止触摸穿透，默认：false success Function 否 接口调用成功的回调函数 fail Function 否 接口调用失败的回调函数 complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行） wx.hideToast() 隐藏消息提示框 wx.hideLoading() 基础库版本 1.1.0 开始支持，低版本需做兼容处理 隐藏loading提示框 wx.showLoading({ title: '加载中', }) setTimeout(function(){ wx.hideLoading() },2000) wx.showModal(OBJECT) ​显示模态弹窗 OBJECT参数说明： 参数 类型 必填 说明 title String 是 提示的标题 content...

四、统一稳定 除了以上所提到的种种原则，建议接入微信的小程序还应该时刻注意不同页面间的统一性和延续性，在不同的页面尽量使用一致的控件和交互方式。 统一的页面体验和有延续性的界面元素都将帮助用最少的学习成本达成使用目标，减轻页面跳动所造成的不适感。正因如此，小程序可根据需要使用微信提供的标准控件，以达到统一稳定的目的。

临时素材接口 获取临时素材 小程序可以使用本接口获取客服消息内的临时素材（即下载临时的多媒体文件）。目前小程序仅支持下载图片文件。 接口调用请求说明 HTTP 请求方式: GET，HTTPS 调用 https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID 请求示例（示例为通过curl命令获取多媒体文件） curl -I -G "https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID" 参数说明 参数 是否必须 说明 access_token 是 调用接口凭证 media_id 是 媒体文件ID 返回说明 正确情况下的返回 HTTP 头如下： HTTP/1.1 200 OK Connection: close Content-Type: image/jpeg Content-disposition: attachment; filename="MEDIA_ID.jpg" Date: Sun, 06 Jan 2013 10:20:18 GMT Cache-Control: no-cache, must-revalidate Content-Length: 339721 curl -G "https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID" 如果返回的是视频消息素材，则内容如下： { "video_url":DOWN_URL } 错误情况下的返回JSON数据包示例如下（示例为无效媒体ID错误）： { "errcode":40007, "errmsg":"invalid media_id" } 新增临时素材 小程序可以使用本接口把媒体文件（目前仅支持图片）上传到微信服务器，用户发送客服消息或被动回复用户消息。 接口调用请求说明 HTTP 请求方式：POST/FORM，HTTPS 调用 https://api.weixin.qq.com/cgi-bin/media/upload?access_token=ACCESS_TOKEN&type=TYPE 调用示例（使用curl命令，用FORM表单方式上传一个多媒体文件）： curl -F media=@test.jpg "https://api.weixin.qq.com/cgi-bin/media/upload?access_token=ACCESS_TOKEN&type=TYPE" 参数说明 参数 是否必须 说明 access_token 是 调用接口凭证 type 是 image media 是 form-data中媒体文件标识，有filename、filelength、content-type等信息 返回说明 正确情况下的返回 JSON 数据包结果如下： { "type":"TYPE", "media_id":"MEDIA_ID", "created_at":123456789 } 参数 描述 type image media_id 媒体文件上传后，获取标识 created_at 媒体文件上传时间戳 错误情况下的返回JSON数据包示例如下（示例为无效媒体类型错误）： { "errcode":40004, "errmsg":"invalid media type" }

wx.createAnimation(OBJECT) ​ 创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。 注意:export方法每次调用后会清掉之前的动画操作 OBJECT参数说明： 参数 类型 必填 默认值 说明 duration Integer 否 400 动画持续时间，单位ms timingFunction String 否 “linear” 定义动画的效果 delay Integer 否 0 动画延迟时间，单位 ms transformOrigin String 否 “50% 50% 0” 设置transform-origin timingFunction 有效值： 值 说明 linear 动画从头到尾的速度是相同的 ease 动画以低速开始，然后加快，在结束前变慢 ease-in 动画以低速开始 ease-in-out 动画以低速开始和结束 ease-out 动画以低速结束 step-start 动画第一帧就跳至结束状态直到结束 step-end 动画一直保持开始状态，最后一帧跳到结束状态 var animation = wx.createAnimation({ transformOrigin:"50% 50%", duration:1000, timingFunction:"ease", delay:0 }) animation 动画实例可以调用以下方法来描述动画，调用结束后会返回自身，支持链式调用的写法。 animation 对象的方法列表： 样式： 方法 参数 说明 opacity value 透明度，参数范围 0~1 backgroundColor color 颜色值 width length 长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值 height length 长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值 top length 长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值 left length 长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值 bottom length 长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值 right length 长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值 旋转： 方法 参数 说明 rotate deg deg的范围-180~180，从原点顺时针旋转一个deg角度 rotateX...

setData setData是小程序开发中使用最频繁的接口，也是最容易引发性能问题的接口。在介绍常见的错误用法前，先简单介绍一下setData背后的工作原理。 工作原理 小程序的视图层目前使用 WebView 作为渲染载体，而逻辑层是由独立的 JavascriptCore 作为运行环境。在架构上，WebView 和 JavascriptCore 都是独立的模块，并不具备数据直接共享的通道。当前，视图层和逻辑层的数据传输，实际上通过两边提供的evaluateJavascript所实现。即用户传输的数据，需要将其转换为字符串形式传递，同时把转换后的数据内容拼接成一份 JS 脚本，再通过执行 JS 脚本的形式传递到两边独立环境。 而evaluateJavascript的执行会受很多方面的影响，数据到达视图层并不是实时的。同一进程内的 WebView 实际上会共享一个 JS VM，如果 WebView 内 JS 线程正在执行渲染或其他逻辑，会影响 evaluateJavascript 脚本的实际执行时间，另外多个 WebView 也会抢占 JS VM 的执行权限；另外还有 JS 本身的编译执行耗时，都是影响数据传输速度的因素。 常见的 setData 操作错误 1. 频繁的去 setData 在我们分析过的一些案例里，部分小程序会非常频繁（毫秒级）的去setData，其导致了两个后果： Android 下用户在滑动时会感觉到卡顿，操作反馈延迟严重，因为 JS 线程一直在编译执行渲染，未能及时将用户操作事件传递到逻辑层，逻辑层亦无法及时将操作处理结果及时传递到视图层； 渲染有出现延时，由于 WebView 的 JS 线程一直处于忙碌状态，逻辑层到页面层的通信耗时上升，视图层收到的数据消息时距离发出时间已经过去了几百毫秒，渲染的结果并不实时； 2. 每次 setData 都传递大量新数据 由setData的底层实现可知，我们的数据传输实际是一次evaluateJavascript脚本过程，当数据量过大时会增加脚本的编译执行时间，占用 WebView JS 线程。 3. 后台态页面进行 setData 当页面进入后台态（用户不可见），不应该继续去进行setData，后台态页面的渲染用户是无法感受的，另外后台态页面去setData也会抢占前台页面的执行。 图片资源 目前图片资源的主要性能问题在于大图片和长列表图片上，这两种情况都有可能导致 iOS 客户端内存占用上升，从而触发系统回收小程序页面。 图片对内存的影响 在 iOS 上，小程序的页面是由多个 WKWebView 组成的，在系统内存紧张时，会回收掉一部分 WKWebView。从过去我们分析的案例来看，大图片和长列表图片的使用会引起 WKWebView 的回收。 图片对页面切换的影响 除了内存问题外，大图片也会造成页面切换的卡顿。我们分析过的案例中，有一部分小程序会在页面中引用大图片，在页面后退切换中会出现掉帧卡顿的情况。 当前我们建议开发者尽量减少使用大图片资源。 代码包大小的优化 小程序一开始时代码包限制为 1MB，但我们收到了很多反馈说代码包大小不够用，经过评估后我们放开了这个限制，增加到 2MB 。代码包上限的增加对于开发者来说，能够实现更丰富的功能，但对于用户来说，也增加了下载流量和本地空间的占用。 开发者在实现业务逻辑同时也有必要尽量减少代码包的大小，因为代码包大小直接影响到下载速度，从而影响用户的首次打开体验。除了代码自身的重构优化外，还可以从这两方面着手优化代码大小： 控制代码包内图片资源 小程序代码包经过编译后，会放在微信的 CDN 上供用户下载，CDN 开启了 GZIP 压缩，所以用户下载的是压缩后的 GZIP 包，其大小比代码包原体积会更小。 但我们分析数据发现，不同小程序之间的代码包压缩比差异也挺大的，部分可以达到 30%，而部分只有 80%，而造成这部分差异的一个原因，就是图片资源的使用。GZIP 对基于文本资源的压缩效果最好，在压缩较大文件时往往可高达 70%-80% 的压缩率，而如果对已经压缩的资源（例如大多数的图片格式）则效果甚微。 及时清理没有使用到的代码和资源 在日常开发的时候，我们可能引入了一些新的库文件，而过了一段时间后，由于各种原因又不再使用这个库了，我们常常会只是去掉了代码里的引用，而忘记删掉这类库文件了。目前小程序打包是会将工程下所有文件都打入代码包内，也就是说，这些没有被实际使用到的库文件和资源也会被打入到代码包里，从而影响到整体代码包的大小。

目前，我们提供了两种性能分析工具，和几个性能优化上的建议，开发者可以参考使用。 分析工具 优化建议

引用 WXML提供两种文件引用方式import和include。 import import可以在该文件中使用目标文件定义的template，如： 在item.wxml中定义了一个叫item的template： <!-- item.wxml --> <template name="item"> <text>{{text}}</text> </template> 在index.wxml中引用了item.wxml，就可以使用item模板： <import src="item.wxml"/> <template is="item" data="{{text: 'forbar'}}"/> import的作用域 import有作用域的概念，即只会import目标文件中定义的template，而不会import目标文件import的template。 如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。 <!-- A.wxml --> <template name="A"> <text> A template </text> </template> <!-- B.wxml --> <import src="a.wxml"/> <template name="B"> <text> B template </text> </template> <!-- C.wxml --> <import src="b.wxml"/> <template is="A"/> <!-- Error! Can not use tempalte when not import A. --> <template is="B"/> include include可以将目标文件除了<template/>的整个代码引入，相当于是拷贝到include位置，如： <!-- index.wxml --> <include src="header.wxml"/> <view> body </view> <include src="footer.wxml"/> <!-- header.wxml --> <view> header </view> <!-- footer.wxml --> <view> footer </view>

WXML WXML(WeiXin Markup Language)是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。 用以下一些简单的例子来看看WXML具有什么能力： 数据绑定 <!--wxml--> <view> {{message}} </view> // page.js Page({ data: { message: 'Hello MINA!' } }) 列表渲染 <!--wxml--> <view wx:for-items="{{array}}"> {{item}} </view> // page.js Page({ data: { array: [1, 2, 3, 4, 5] } }) 条件渲染 <!--wxml--> <view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view> <view wx:elif="{{view == 'APP'}}"> APP </view> <view wx:else="{{view == 'MINA'}}"> MINA </view> // page.js Page({ data: { view: 'MINA' } }) 模板 <!--wxml--> <template name="staffName"> <view> FirstName: {{firstName}}, LastName: {{lastName}} </view> </template> <template is="staffName" data="{{...staffA}}"></template> <template is="staffName" data="{{...staffB}}"></template> <template is="staffName" data="{{...staffC}}"></template> // page.js Page({ data: { staffA: {firstName: 'Hulk', lastName: 'Hu'}, staffB: {firstName: 'Shang', lastName: 'You'}, staffC: {firstName: 'Gideon', lastName: 'Lin'} } }) 事件 <view bindtap="add"> {{count}} </view> Page({ data: { count: 1...