东莞专业网站建设公司,电商网站开发设计,宁波网站优化技术,景区门户网站建设方案1. 说明
先上代码片断分享链接#xff1a; https://developers.weixin.qq.com/s/vl3ws9mA72GG 使用 painter 画图 按钮传递定制化信息
效果如下#xff1a; 2. 关键代码说明
文件列表如下#xff1a;
{usingComponents: {painter: /com…1. 说明
先上代码片断分享链接 https://developers.weixin.qq.com/s/vl3ws9mA72GG 使用 painter 画图 按钮传递定制化信息
效果如下 2. 关键代码说明
文件列表如下
{usingComponents: {painter: /components/painter/painter}
}painter 为组件在页面 json 文件中引入 组件使用 palette 传入画图参数参数中使用 json 格式内容基本是把 css 转换下写法可以此在线绘制生成你需要的 json 内容: https://painterjs.github.io/button 通过 data-xxx 传值js 中通过 e.target.dataset.xxx 获取数据bindtap 绑定个空的函数防止默认事件比如跳转等 可拿到生成的图片地址图片地址格式类似为 http://tmp/xxxxxxxxxxxxxxx经实践用户转发发送其它人是可以看得到的这省去了上传后台的麻烦 painter 组件自动监听 palette 数据一旦有新数据传入它即自动开始绘制时间较快 函数中通过 e.from 判断是 button 或 menu加上 showLoading 提示体验好点后面记得 hideLoading 取消提示当前官方版本支持 3 秒的 promise 异步时间因此绘制图片时间不超过 3 秒才行现在手机性能较好我这里 1 秒的定时器来等待图片生成再去拿图片为了避免相同图片重复生成可以增加一定的缓存我这里使用页面级别的缓存最后注意返回这个 promise因为转发图主要是 imageUrl 来设置
3. 总结
小程序开发还是有坑和体验不好的地方但相比前端来讲又稍微简单了点不过小程序体积大了以后一个页面上千行代码也是经常的事所以提前使用上 typescript scss 多使用 class 封装等对于后续维护有更好的体验。
参考资料 [1] https://github.com/Kujiale-Mobile/Painter [2] https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareAppMessage-Object-object
