先写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了,言