.index { display: flex; align-items: center; justify-content: center; height: 100%; } .canvas-wrap { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; .btn-save { margin-top: 40rpx; } }
注意事项
设置Taro支持ES6的async/await
1.下载@tarojs/async-await
npm install -D @tarojs/async-await
2.app.js中引入
import '@tarojs/async-await'
开发完毕，发布小程序
1.执行打包，生成最终的小程序源码
npm run build:weapp
2.发布小程序
点击微信开发者工具上传按钮，上传小程序，然后在微信小程序平台发布小程序即可。
小结
本文着重介绍了使用Taro实现小程序生成打卡图片，保存相册，分享图片功能的开发原理与实践步骤，各位童鞋可参考并结合自己的实际业务进行扩展开发。
本文并为深入的对不同手机进行图片适配，部分值也是设置的固定值（如填充文字的开始坐标与填充的文字长度、大小），并未做比例响应。需要进一步交流的小伙伴，可以关注胡哥有话说公众号，持续关注相关文章，也可直接在文章留言交流。
无论是使用何种框架如Taro、mpvue、wepy等开发小程序分享图片功能，原理都是一样的，只不过是在调用方法以及处理逻辑时需要进行响应的小调整