微信小程序开发工具v0.10.102800-新增功能解析

原创 2016-10-29 15:19:02 824
摘要:今天一早起来,发现小程序开发工具被更新到v0.10.102700版本了,随后不久又发布了v0.10.102800修复了点bug。这一次的两个发布新增加了不少api,本文试着向读者分析其中的一些api的用法,帮读者节省些工夫。 1、界面上的更新最主要的更新就是“实时刷新”功能。文件列表跟UI面板可以并排显示了,所以开发时就可以同时显示三个面板了(UI面板、文件面板、代码面板),如果不想看文

今天一早起来,发现小程序开发工具被更新到v0.10.102700版本了,随后不久又发布了v0.10.102800修复了点bug。

这一次的两个发布新增加了不少api,本文试着向读者分析其中的一些api的用法,帮读者节省些工夫。

 

1、界面上的更新

1.png

最主要的更新就是“实时刷新”功能。

文件列表跟UI面板可以并排显示了,所以开发时就可以同时显示三个面板了(UI面板、文件面板、代码面板),如果不想看文件列表,可以把中间的这个面板收缩起来,点击这个面板左上角那个树形图标就可以了。当然,如果你不想显示UI面板,也可以把它隐藏起来,方法也是一样的,点击UI面板左上角的小图标就可以了。

这个界面上的变化,主要是为了方便开发者,在代码修改的时候,查看实时UI变化。

这个实时刷新的功能可能会比较占系统资源,开发者如果不需要这个功能可以把它关掉:

1.png

在项目的设置里面,如上图,把这个选项前面的钩点掉就行。不过作者试了一下这个操作,居然点掉了还是会实时刷新,可能是工具的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返回内容:

1.png

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,用来获取自己当前的坐标。

1.png

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”旁边是看不到这个,只有当你有多于一个页面时,才会有这个图标。

1.png

要注意的是,这是一个全局函数,不是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修改标题会失败。现在已经修复了。



发布手记

热门词条