技术

微信小程序

最近公司在开发一个集合了众多测试功能的小程序，于是，时隔两年，又把小程序捡了起来。

不得不说，进步还是很明显的，多了不少很实际的功能，当然编辑器还是一如既往的烂

这次使用了几个之前没用到的功能，简单总结一下。

分包

有时候为了保证用户的浏览体验，有的图片必须要打在包里面，这就导致整个包会越来越大，分包就变得尤为重要了。

在app.json中需要添加以下声明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
"subpackages": [
  {
    "root": "packagename1",
    "pages": [
      "pages/index",
      ...
      ...
    ]
  },
  {
    "root": "packagename2",
    "pages": [
      "pages/index",
      ...
      ...
    ]
  }
]

在对应包名的文件内，按照普通小程序的结构来继续编写就可以了，子包可以引用主包的内容，反过来则不可以。

插件

对于项目中出现的可复用的部分，可以做成插件，提高效率。

插件的本身跟一个小程序页面很像，也有四个基础文件，先在json文件中声明这是一个插件。

1
"component": true

页面和样式文件就按照普通的小程序文件来就可以，js文件中有一点不同，可以接受外部传进来的参数。
1
2
3
4
5
6
7
8
9
...
properties: {
  testid: {
    type: String,
    value: "1"
  }
},
...
...

在调用这个插件的页面json文件，需要先进行声明。
1
2
3
"usingComponents": {
  "morelist": "/plugs/morelist/index"
}

然后直接在需要出现的地方使用就可以
1
<morelist testid="{{TEST_ID}}"></morelist>

保存图片

小程序的一次更新，禁止了通过代码打开用户授权配置页面，这就导致了，所有需要用户授权的操作都会变得繁琐一些，主要是需要处理不允许授权之后，再次打开授权页面的逻辑。

保存图片这里，是用户点击保存图片后，弹出授权窗口，同意授权后，图片保存完成，之后的保存就是直接保存了。如果第一次没有同意授权，第二次则是打开用户配置页面，同意授权后，返回之后，图片保存完成。如果第二次还没有同意，返回后，不进行任何操作，继续点击保存，步骤跟之前一样。

1
2
<button wx:if="{{writePhotosAlbum}}" bindtap="savebtn"><image mode="widthFix" src="images/savebtn.png"></image></button>
<button wx:else open-type="openSetting" bindopensetting="photocallback"><image mode="widthFix" src="images/savebtn.png"></image></button>

页面使用writePhotosAlbum这个变量记录写入相册的权限，需要默认为true。savebtn方法为图片保存方法，photocallback是授权配置文件关闭后的回调，具体代码如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
...
data: {
  writePhotosAlbum: true
  ...
  ...
},
onLoad(){
  //查询用户授权
  wx.getSetting({
    success: res => {
      if(res.authSetting["scope.writePhotosAlbum"]){
        self.setData({
          writePhotosAlbum: true
        });
      }else if(res.authSetting["scope.writePhotosAlbum"] === false){
        self.setData({
          writePhotosAlbum: false
        });
      }
    }
  });
},
...
...

这里之所以要使用res.authSetting["scope.writePhotosAlbum"] === false来判断没有授权，是因为第一次如果直接打开授权配置页面，未申请的授权是不会出现在里面，同时为了用户体验，授权窗口应该要在用户点击了保存后再开启。所以就将开启的方法直接放到了保存的方法之中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
...
savebtn(){
  //保存图片到本地
  let
  self = this;
  //查询用户授权
  wx.getSetting({
    success: res => {
      if(res.authSetting["scope.writePhotosAlbum"]){
        self.doSave();
      }else{
        wx.authorize({
          scope: "scope.writePhotosAlbum",
          success(){
            self.doSave();
          },
          fail(){
            Util.showAlert("相册开启失败");
            self.setData({
              writePhotosAlbum: false
            });
          }
        });
      }
    }
  });
},
...
...

保存方法，就是主要在查询完用户未授权后，调用方法，弹出授权窗口，如果用户没有在此窗口授权，则修改页面变量，这样用户再次点击保存按钮时，就会直接弹出授权配置页面。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
...
photocallback(res){
  let
  self = this;
  //查询用户授权
  wx.getSetting({
    success: res => {
      if(res.authSetting["scope.writePhotosAlbum"]){
        self.doSave();
        self.setData({
          writePhotosAlbum: true
        });
      }
    }
  });
},
...
...

在授权配置页面的回调中，同样查询用户是否授权，之后修改页面变量，同时调用保存方法。

这样整个逻辑就基本覆盖了用户的所有可能操作，最后实现doSave方法即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
...
doSave(){
  let
  self = this,
  localpath = self.data.src;
  Util.showLoading("图片保存中...");
  wx.saveImageToPhotosAlbum({
    filePath: localpath,
    success: res => {
      wx.hideToast();
      Util.showAlert("保存成功");
    },
    fail: res => {
      wx.hideToast();
      Util.showAlert("保存失败");
    }
  });
},
...
...