小程序动态生成canvas海报

先写wxml，再根据 wxml 来动态地画canvas有诸多好处：提升体验（渲染快）、便于升级迭代（后期瓜皮改需求）、方便维护等。

先睹为快

通过本篇博客你可以掌握的东西

• 小程序canvas绘制海报的完备解耦流程
• 利用Promise来控制异步流程的方法（!important）
• 优雅地处理瓜皮授权问题
• 避免小程序canvas的坑坑们

canvas海报

“学习一个东西，认知很重要，这有益于把控整体及系统掌握。”
——光

大抵流程也就是按大小标题的顺序来的，可以前往文章目录回顾下。

为防止用户疑惑，下文提到的page均为页面的实例
总步骤：

// 点击生成海报按钮
async tapSave() {
   
        try {
   
            await page.beforeSave(); // 生成前的校验
            await page.askAuth(); // 处理授权
            await page.drawPoster(); // 绘制海报
            await page.saveFile(); // 保存到本地
        } catch (e) {
   
            console.error(e);
        }
    },

1、优雅地授权 (Be elegant.)

毋庸置疑，canvas绘制海报需要保存到用户本地，因此需要用户的授权；而小程序中需要判断用户是否授权的业务不少，对此功能封装一下可以增强项目的模块性，方便维护。

1.1、封装

/utils/util.js

module.exports = {
   
    getAuthStatus(scopeName) {
   
       return new Promise((resolve, reject) => {
   
           wx.getSetting({
   
               success(res) {
   
                       // 已拒绝过，弹设置
                       if (res.authSetting[`scope.${
     scopeName}`] === false) {
   
                           resolve(false);
                           // 已同意
                       } else if (res.authSetting[`scope.${
     scopeName}`]) {
   
                           resolve(true);
                       } else {
   
                           resolve("none");
                       }
                   }
               });
       });
   }
}

1.2、使用

海报页面 /pages/spread_poster/spread_poster中，封装一个判断及授权步骤的方法

const utils = require("../../utils/util");
// ...
// 获取授权
askAuth() {
   
       return new Promise((resolve, reject) => {
   
           utils.getAuthStatus("writePhotosAlbum").then(isAuthed => {
   
               if (isAuthed === "none") {
   
                   // 无信息，弹授权
                   wx.authorize({
   
                       scope: "scope.writePhotosAlbum",
                       success() {
   
                           resolve();
                       },
                       fail(e) {
   
                           page.initAuthStatus();
                           wx.showToast({
   
                               title: "保存需要您的授权哦~",
                               icon: "none"
                           });
                           reject(e);
                       }
                   });
               } else if (isAuthed) {
   
                   // 已同意，直接保存
                   resolve();
               } else {
   
                   // 已拒绝过，弹设置
                   reject(res);
                   page.openSetting();
               }
           });
       });
   },
   // 弹出授权设置
    openSetting() {
   
       wx.openSetting({
   
           success(e) {
   
               console.log(e);
           },
           fail(e) {
   
               console.error(e);
           }
       });
   },

2、动态获取wxml显示信息

在wxml内开发完成后，就可以开始绘制canvas了，言