摘要:今天一早起来,发现小程序开发工具被更新到v0.10.102700版本了,随后不久又发布了v0.10.102800修复了点bug。这一次的两个发布新增加了不少api,本文试着向读者分析其中的一些api的用法,帮读者节省些工夫。 1、界面上的更新最主要的更新就是“实时刷新”功能。文件列表跟UI面板可以并排显示了,所以开发时就可以同时显示三个面板了(UI面板、文件面板、代码面板),如果不想看文
今天一早起来,发现小程序开发工具被更新到v0.10.102700版本了,随后不久又发布了v0.10.102800修复了点bug。
这一次的两个发布新增加了不少api,本文试着向读者分析其中的一些api的用法,帮读者节省些工夫。
1、界面上的更新
最主要的更新就是“实时刷新”功能。
文件列表跟UI面板可以并排显示了,所以开发时就可以同时显示三个面板了(UI面板、文件面板、代码面板),如果不想看文件列表,可以把中间的这个面板收缩起来,点击这个面板左上角那个树形图标就可以了。当然,如果你不想显示UI面板,也可以把它隐藏起来,方法也是一样的,点击UI面板左上角的小图标就可以了。
这个界面上的变化,主要是为了方便开发者,在代码修改的时候,查看实时UI变化。
这个实时刷新的功能可能会比较占系统资源,开发者如果不需要这个功能可以把它关掉:
在项目的设置里面,如上图,把这个选项前面的钩点掉就行。不过作者试了一下这个操作,居然点掉了还是会实时刷新,可能是工具的bug。
2、文件api
(1)wx.getSavedFileList
获取本地已保存的文件列表,之前有保存文件的接口,但我们看不到本地到底保存了哪些文件。这次的这个api正是用来解决这个问题的。
(2)wx.getSavedFileInfo
获取本地具体某个文件的文件信息。
(3)wx.removeSavedFile
移除本地存储的某个文件。
以上三个接口,都只能操作wx.saveFile保存的文件,临时文件是取不到的。
我们来写个示例代码测试一下上面三个api。
// 从本地选取一个文件,临时存本地wx.chooseImage({ success:(res1)=>{ console.log(res1.tempFilePaths); /* 这时wx.getSavedFileList还看不到,要先save */ // 保存 wx.saveFile({ tempFilePath: res1.tempFilePaths, success: (res2)=>{ var myFile = res2.savedFilePath; console.log(myFile); // 这时就可以查看了 wx.getSavedFileList({ success:(res3)=>{ console.log(res3); } }); // 上面的api是取得整个文件列表 // 下面我们来取得具体某个文件 wx.getSavedFileInfo({ filePath: myFile, success: (res4)=>{ console.log(res4); } }); // 删除 wx.removeSavedFile({ filePath: myFile, success: (res)=>{ console.log('删除成功: ' + res) } }); } }); } });
其中,wx.getSavedFileList返回内容:
wx.getSavedFileInfo返回:
{errMsg: "getSavedFileInfo:ok", size: 71466, createTime: 1477619293}
wx.removeSavedFile返回:
{errMsg: "removeSavedFile:ok"}
(4)wx.openDocument
新开一个页面,显示某个文档的内容,支持格式有:doc, xls, ppt, pdf, docx, xlsx, pptx
这个功能比较强大。不过在工具上测试了下pdf文件,它是用系统默认的工具来打开pdf的。在手机上不知道是什么样。
示例代码:
wx.downloadFile({ url: 'http://www.jsongo.com/res/test.pdf', success: (res)=> { var filePath = res.tempFilePath; wx.openDocument({ filePath: filePath, success: function (res) { console.log(res); } }); } });
返回的res内容是:
{errMsg: "openDocument:ok"}
3、本地存储api
(1)wx.removeStorage和wx.removeStorageSync
这次终于有删除storage的功能了。之前我们是通过把value设置为null来模拟删除一个key-value对,这次的api更彻底,可以把key也删掉。
同样的,也有同步(wx.removeStorage)和异步(wx.removeStorageSync)的方法。
var mykey = 'test-key'; wx.setStorage({ key: mykey, data: 'hello', success: ()=>{ setTimeout(()=> { // 异步 wx.removeStorage({ key: mykey, success: (res)=> { console.log(res.data); } }); // 同步 // wx.removeStorageSync(mykey); }, 5000); } });
(2)wx.getStorageInfo和wx.getStorageInfoSync
获取storage的状态。我们知道storage的空间是有限的,但什么时候用完,什么时候剩下多少我们完全不知道。直到用完的时候,再存入就报错,这是一个很不正常的流程。这次添加的这个api,正好可以让我们在特定时机去检查一下storage,比如每次程序启动的时候,检查一下,如果快满了,那我们可以定一个策略去清理一部分。
wx.getStorageInfo({ success: function(res) { console.log(res.keys); // 所有的key console.log(res.currentSize); // 当前已用空间 console.log(res.limitSize); // 当前项目可用的总空间 } });// 同步调用就更简单了// var res = wx.getStorageInfoSync();
可以取到三部分的内容,一是本项目所有的key,一是当前已用空间,还有一个是当前项目可用的总空间。
4、交互反馈api
这个更新非常方便,之前我们都是通过<toast>,<modal>,<loading>和<action-sheet>标签去定义这些交互,而且要自己去控制这些交互组件的显示和隐藏,而像toast的icon还不能改。这次的几个交互api给我们带来了很大的方便,原来的那四个标签全部都废弃了。
(1)toast
包含显示wx.showToast和隐藏wx.hideToast这两个api,之前的<toast>和<loading>现在都改用这两个函数来实现:
wx.showToast({ title: '成功', icon: 'success', duration: 2000});setTimeout(function(){ wx.hideToast() }, 1000);
wx.showToast会在显示了duration的时间后,自动隐藏,也不用我们去控制了。不过我们可以提前把它隐藏掉,就是调用wx.hideToast。
duration默认1500, 最大为10000
icon目前只有两个值:success和loading
当前,wx.showToast还可以加回调success / fail / complete
(2)modal
包含一个api: wx.showModal
参数都跟之前的<modal>相似,这里就不多解释了。示例代码:
wx.showModal({ title: '提示', content: '这是具体的内容', success: function(res) { if (res.confirm) { console.log('确定按钮'); } else { console.log('取消按钮'); } }, });
(3)ActionSheet
底部弹出菜单
包含一个api: wx.showActionSheet
用这个api弹出的窗口,已经加了取消按钮和它的事件,以及点击取其它非按钮区域的取消事件。
wx.showActionSheet({ itemList: ['A', 'B', 'C'], itemColor: #333, success: function(res) { if (!res.cancel) { console.log(res.tapIndex); } } });
itemList指定弹出的菜单项。itemColor
success回调里的参数res有两个值,一个是cancel,表示用户点击的是否是取消按钮,另一个是tapIndex表示点击的是itemList数组的第几个项,菜单从上往下,从0开始。
5、图片信息
之前我们没有办法拿到图片的宽高,不过这次有两种办法可以获取:
(1)可以通过这个api来实现wx.getImageInfo:
wx.getImageInfo({ src: 'http://cartoon.southcn.com/c/images/attachement/jpg/site4/20161024/10/1325384622394618394.jpg', success: function (res) { console.log(res.width) console.log(res.height) } });
其中src可以指定网络上的图片,也可以是项目中的图片,也可以是临时文件,也可以是saveFile存在本地的文件。非常方便。
(2)<image>组件添加了bindload方法,回调里可以拿到图片的宽高。
<image src="xxx" bindload="imgLoaded"></image>
Page({ ... imgLoaded: function(event) { console.log(event.detail.width, event.detail.height); } ... });
6、选择地理坐标
wx.chooseLocation,弹出地图页面,可以选取某个点返回它的坐标等信息。
这个可以跟之前的wx.openLocation这个api配合使用,用上面的api取得坐标信息,用wx.openLocation这个api显示地图位置点。
目前共有三个location相关的坐标,除了上面说到的两个之外,还有一个wx.getLocation,用来获取自己当前的坐标。
wx.chooseLocation({ success: function(res) { var latitude = res.latitude var longitude = res.longitude console.log(latitude, longitude); // 还有名称和地址 console.log(res.name, res.address); } });
上图中,可以移动红点来选取位置,下页的地址列表会跟着变化 ,当点击选中这个列表中某个地址的时候,点击发送按钮,则会触发success回调,如果点击“取消”按钮,则会触发cancel回调。wx.chooseLocation除了拿到坐标信息之外 ,还可以拿到具体地址的名称,及详细的街道地址,也是很实用的。
7、打电话
wx.makePhoneCall接口可以用来调起电话播打。
wx.makePhoneCall({ phoneNumber: '119' });
phoneNumber指定电话号码。
8、canvas功能扩展
wx.canvasToTempFilePath可以把canvas上做的画保存成图片,临时文件。
使用也很简单,传入canvasId就可以了:
wx.canvasToTempFilePath({canvasId: 1})
9、登录态的判断
之前我们可以通过wx.login配合后台来做登录。这次新增了一个wx.checkSession用来检测用户的登录态是否过期。
在项目中,可以在小程序每次启动的时候,或者在涉及到用户关键私密信息操作的时候,可以做一次调用。
为什么要有这个接口?因为微信建议不要把code换取的session_key下发到前端,所以前端也没办法知道这个session_key是否还是有效的,只有后台知道,而后台也不会实时去检查各个用户的session_key,所以当session_key失效的时候,虽然用户端跟自己的服务器的登录态可能还存在,但调用一些微信身份态相关的接口时,则会失败。所以这时前端还是有必要知道下自己目前在微信的服务器上的session是否还有效,是否已过期。
调用也很简单:
wx.checkSession({ success: function(){ console.log('登录态未过期'); }, fail: function(){ console.log('登录态过期'); wx.login(); } });
10、多层级页面返回
这次更新扩展了wx.navigateBack的功能,添加了一个参数delta,用来指定回退几个页面。
delta默认值为1,表示返回上个页面,如果你已经跳了三四级页面,那么可以通过这个值来指定跳回哪一级的页面。这个功能在页面多的时候,非常有用。
11、websocket支持二进制的收发
之前websocket只支持字符串,更新之后,现在可以支持ArrayBuffer了,ArrayBuffer等一系列的二进制操作接口是ES6新增的,ES6将它们纳入了ECMAScript规格,它们是对二进制原生支持的一种数据类型,关于ArrayBuffer的介绍可以参考这篇文章。
变化涉及到的两个api分别是,wx.sendSocketMessage和wx.onSocketMessage。
12、取得当前已打开的所有页面
getCurrentPages()这个接口可以返回当前所有的页面组成的数组,每一项都是一个Page对象。跟下图的页面缩影是一一对应的,不过如果只有一个页面的话,你在“wifi”旁边是看不到这个,只有当你有多于一个页面时,才会有这个图标。
要注意的是,这是一个全局函数,不是wx的属性,不需要wx来调用。
这个接口返回的数组,最后的那个就是当前页面,可以通过下面的方式来拿到当前页面:
var pages = getCurrentPages(), curPage = pages[pages.length-1]; // 当前页面
13、页面触底的事件
当页面拉到底部时,会触发一个新的事件:onReachBottom,之前我们只有通过scroll-view组件的bindscrolltolower方法来判断,现在我们在所有的页面都可以实现触底事件了。
14、关闭工具,会保留现场
新版本在退出时,会保留现场。也就是说,你在编辑某个项目的时候,退出了这个工具,下次再打开的时候,会自动进入上次打开的那个项目。另外,它还会保留上次打开的文件,你再也不用每重启一次工具,都还得手动去把上次在编辑的几个文件打开。
15、开发工具可以支持wxml代码的调试编辑了
在调试面板里有个Wxml的选项,之前只能看不能改。现在可以直接在调试面板里修改wxml来查看效果了。
16、添加了textarea多行输入框组件
这次更新终于加上了多行输入框组件了,之前还没办法实现。详细参数可以查看这里。
17、text组件可以允许嵌套了
18、wx:key,非常重要的更新
我们在用wx:for的时候,经常为了保证列表数据不被重新渲染,而采取了一些比较绕的方法。现在有了wx:key,就可以让小程序只通过识别wx:key来判断当前项是否要重新渲染,比如你可以把每一项的id作为唯一识别标准,写成:
wx:key="id"
“当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。”
当然,也保留了原来的方式,用this关键字来指定整个item项:
wx:key="*this"
没加wx:key的wx:for会抛出一个warning...
19、图片预览的api
wx.previewImage直接可以弹出新页面来预览图片,简单的图片查看可以用这引接口来实现,复杂点的比如还要显示文字说明的时候,就得自己写页面了。
wx.previewImage({ current: '', // 当前显示图片的http链接 urls: ['http://cartoon.southcn.com/c/images/attachement/jpg/site4/20161024/10/1325384622394618394.jpg','http://cartoon.southcn.com/c/images/attachement/jpg/site4/20160812/68/8554183392460170668.jpg' ] // 需要预览的图片http链接列表});
20、Page的onLoad修改标题失败问题已修复
上个版本的工具中,在onLoad里调用wx.setNavigationBarTitle修改标题会失败。现在已经修复了。