0%

微信小程序系列（一）

发表于 更新于 分类于
微信小程序开发流程介绍。扫码打开的微信小程序如何调试？

背景

微信开发者工具版本：v1.02.1901170。

本文写作时间：2019年1月。

接手了一个小程序维护的任务，虽然做过几个小程序了，但小程序版本和功能迭代的实在是快，摸索着前进吧。

wx.previewImage接口调用

官方文档在这里,还给了示例代码：

1
2
3
4
wx.previewImage({
  current: '', // 当前显示图片的http链接
  urls: [] // 需要预览的图片http链接列表
})

一开始就是因为信了它的邪，代码这么写的：

1
2
3
4
5
let picUrl='xxxx';
wx.previewImage({
  current: picUrl, 
  urls: [picUrl] 
})

结果是调用后，毛线都不见一根，也不报错。为了验证，还特意追加了success和fail回调。发现调用后走的success。逻辑没错。难道是样式问题？

这个接口调用的应该是小程序框架的功能，长按图片还可以选择操作。显然不是自己写的界面。

只能看看他山之石了。看过其他人调用成功的代码后发现，urls的赋值和我的不同，他们是声明了数组，传参的时候引用了那个数组，遂对代码进行了修改：

1
2
3
4
5
6
7
let picUrl='xxxx';
let pics=new Array();
pics.push(picUrl);
wx.previewImage({
  current: picUrl, 
  urls: pics 
})

以上代码和前面的区别就在数组的声明，居然就好用了。

道理嘛，实在不知道。记得就行了。

setData接口调用

在网络请求的回调方法中我看到这样的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
that.setData({ middleLeft: res.data.middleLeft });
that.setData({ middleLeftDesc: res.data.middleLeftDesc });
that.setData({ middleRight: res.data.middleRight });
that.setData({ middleRightDesc: res.data.middleRightDesc });
that.setData({ bottomList: res.data.bottomList });
that.setData({ profileList: res.data.profileList });
that.setData({ pic: res.data.pic });
that.setData({ img: res.data.img });
that.setData({ enName: res.data.enName });
that.setData({ name: res.data.name });
that.setData({ detailInfoList: res.data.detailInfoList});
that.setData({ season: res.data.season });
that.setData({ openTime: res.data.openTime });
that.setData({ priceDesc: res.data.priceDesc });
that.setData({ webUrl: res.data.webUrl });
that.setData({ tel: res.data.tel });
that.setData({ address: res.data.address });

从ajax过来的同志对that不陌生，其实就是利用闭包传递的小程序环境的this。

业务逻辑是取得到数据后，给页面数据赋值，利用小程序机制刷新显示。真机调试的时候还发现这段代码导致一堆错误，因为有些时候，返回的数据没有这么全。

接着我对以上代码做了如下的修改：

1
2
3
let rst=Object.assign({},that.data);
Object.assign(rst, res.data);
that.setData(rst);

说一下这么做的理由：

  1. 避免了多次调用setData。
  2. 避免了因为返回值不全，强行赋值导致的运行时错误。
  3. 代码简洁了。

关于第一点，虽然没有确切的依据，但在官方的生命周期图中有线索：
Page 实例的生命周期图

从上图中可见，调用setData会触发渲染，如果短时间内多次调用，效率和性能会带来影响，尤其是数据之间在显示层面还有逻辑纠缠的情况下。官方文档说明单次赋值不要超过1024kB，在这个前提下，还是提倡少调用这个接口。

关于第二点，官方文档中有说明。

请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题

另外采用Object.assign算是一个小技巧，第二个参数的属性会被赋值到第一个参数上。

就这样。

关于扫描带参数的二维码进入小程序

关于生成小程序入口二维码

生成接口和过程不赘述。需要特别注意的是这个二维码指向的是小程序中的一个页面，而不是小程序。之所以强调这点，是因为遇到了坑。如果你把解析小程序入口二维码参数的代码写在了app.js中的onLaunch方法中，那么恭喜你，在你刷另一个入口二维码时，看到的内容仍然是前一个的。需要用户删除小程序再次刷码内容才会更新。最关键的问题是，这个问题只有在上线后才会被发现，后面的开发和调试阶段不会被发现。

开发阶段如何调试

微信开发者工具给这样的小程序调试提供了几种方式：

  1. 自定义编译条件。参数和生成小程序入口二维码基本一样。
  2. 通过二维码编译。如果你已经生成了小程序二维码可以使用这种方式，选择二维码文件即可。

以上两种方式，参数已经编译在版本内了。所以通过微信开发者工具生成的二维码扫描打开调试版本后，已经带有参数了。如果你想更换入口参数是可以的，但无论是模拟器、扫码打开测试版、真机测试，更换参数后打开后，无法模拟小程序转后台后再次扫码进入的情形，也就是说更换参数后，重新编译，打开的小程序会走完小程序的全部生命周期。

发布前的测试

开发没有问题后，需要做发布前的测试。想象中的调试方式和这位一样，试图扫描生成的小程序入口二维码打开体验版小程序。但似乎是做不到。这一点让人觉得很没底气，尤其是已经上线项目。

使用web-view打开网页

限制

小程序可以打开关联公众号内的网页，也可以打开其它的网页，但是受到限制。

如果你的小程序想要打开一个第三方网站下的网页，需要向对方网站服务器下放置经过微信公众平台发出的认证文件。这条件一般很难做到，尝试到这部截止了。

另外打开的第三方网站肯定要有备案，采用https协议，等等的，后面这些没有走完。

真机调试遇到的问题

在升级微信开发者工具前，只在真机调试情况下发现部分网络请求api没有回包，而且没有任何错误信息。升级开发工具后，问题莫名其妙的消失了。

小程序全流程总结

大致流程如下：

  1. 注册微信公众平台账号，选择账号类型，选择小程序开发。
  2. 填写小程序信息。
  3. 记录小程序AppID(小程序ID)和AppSecret(小程序密钥)。备用。
  4. 添加管理用户、开发者、体验者各类参与者。
  5. 开发和测试。
  6. 上传体验版。
  7. 体验版提交审核。
  8. 审核过后发布。