微信小程序之海报制作教程及bug分析
前言
微信小程序的画布我踩了很多的坑，很多教程都是说一半不说一半,网上关于的海报的demo都是本地图片.所以不会有什么问题,后来自己实现了,需要实现这个功能实在太繁琐,所以写一篇教程,供参考
效果展示
功能如下 点击保存 出现整张海报
以下为手机保存效果
关于canvas的各种api这个我就不多说了,你们可以自己参考 都比较简单,我先说说我遇到的bug原因以及解决方法
bug
1.关于网络图片手机上不显示的问题
最核心的问题就是:在电脑上保存下来是有图片的,但是在手机上保留下来却没图片,
(这张二维码是本地图片,所以不会出现这种问题)
那是因为图片没有保证整个下载下来之后,但是画布确以及下载下来了,
解决方法:
wx.downloadFile 这个api里面成功之后 在里面编写画布的代码
而且还会伴随着一个问题 你需要保存的图片均要配置白名单
(服务器域名请在 「小程序后台-开发-开发设置-服务器域名」 中进行配置)
例如微信头像需要配置的地址为https://wx.qlogo.cn/
你需要用到的网络图片的地址均要配置!!!
而且配置完了,你可以从
微信小程序的开发者工具 设置 域名信息 里面的 downloadFile 看看里面是否配置成功
啥啥啥你说你不用配置白名单??有图片显示??
那你一定是勾选了
不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书,
不勾选,才是符合正常模拟手机的状态
2关于画布不居中的问题
如果你使用的是html布局,那么你可能不会出现这个问题,
如果是使用canvas标签 单位换成px即可…因为你懂得,用了微信小程序之后,几乎都使用rpx,一时间很难会考虑到是像素单位的问题
其它
画布的优先级最高,无论你的z-index是多少,它永远会在最顶层
画布会随着滚动条滚动,但是scroll-view的滚动条不会带着画布滚.
如果你想要移动canvas标签,建议包一层view，通过移动view来改变canvas标签的位置
如果你想绘画圆环等图形,可以使用wxcharts.js 这个插件
如果想要遮罩层固定,给这个标签加入 catchtouchmove=“true” 属性即可，电脑没效果,但是真机调试是有效果的
微信小程序之海报制作教程及bug分析相关推荐
- java基于微信小程序的美食制作教程系统 uniapp 小程序
随着社会的发展,社会的方方面面都在利用信息化时代的优势.互联网的优势和普及使得各种系统的开发成为必需. 本文以实际运用为开发背景,运用软件工程原理和开发方法,它主要是采用java语言技术和mysql数 ...
- 个人怎么制作微信小程序，微信小程序可以免费制作吗？微信小程序制作教程
微信小程序 微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应 ...
- 微信小程序云函数使用教程【超详细】
背景需求 在本人的项目中,需要调用一个http的接口,而微信小程序所有的网络请求都得使用https,因而需要一个中转站,使得在正式发布的时候可以使用http接口.(在调试环境下,只要在本地设置里勾选& ...
- 微信小程序使用swiper制作轮播图留白的解决方法
微信小程序相比网页制作轮播图快捷了很多,直接可以使用swiper标签,但是对于新手来说,也有很多不可避免的坑. 附上轮播图代码 <view class="swp">&l ...
- 微信小程序：block制作动态商品列表
微信小程序:block制作动态商品列表 在制作微信小程序时,我们往往会碰到需要动态生成列表的情况,本文便是以常见的商品列表为例来学习如何利用block制作动态商品列表. 运行截图 实现代码 js: P ...
- 微信小程序使用 setInterval 制作计时器后台延迟问题
微信小程序使用 setInterval 制作计时器后台延迟问题 之前参加2020年微信小程序应用开发大赛的时候写了一个用于校园足球的微信小程序--踢在浙大. 在小程序的设计过程中出现了一个裁判工具的功 ...
- 微信小程序：scroll-view制作横向滚动导航条特效
微信小程序:scroll-view制作横向滚动导航条特效 一.scroll-view介绍 微信小程序官方释义为:可滚动视图区域,目前一共有10几个属性,包括:scroll-x.scroll-y.scr ...
- 微信小程序使用WeUI入门教程
微信小程序使用WeUI入门教程 在学习微信小程序过程中,很多组件的样式需要自己调整,且很多不是我们想要的样子.所以找到了WeUI这样的扩展组件库,预览了组件库,真的非常nice! 但是找不到怎么去引用 ...
- 个体门店微信小程序在线开店的教程
个体门店微信小程序在线开店的教程,在前面写过一篇文章有关个体门店微信小程序如何注册和认证流程总结,写得有些粗略,有很多个体门店商家都在问具体怎么样操作才能拥有自己的可马上运营微信小程序. 如果对关于个 ...
最新文章
- JAVA的面向对象编程总结（第一部分）~
- java joptionpane 例子_java JOptionPane类的介绍
- 韵乐x5最佳参数手动_4种超参数调整技术及其局限性
- flexbox 伸缩布局
- 四、WebApp 基础可视组件（IVX 快速开发教程）
- 计算机公式与函数乘法,excel常用函数乘法公式的使用方法
- 个人博客网站文章添加目录导航
- 高并发编程基础（线程池基础）
- 运用EL表达式进行复杂比较(在JSTL中调用函数)
- 如何划分机器学习的训练集和测试集
- 阿里云产品之数据中台架构
- 在 Windows 10 上安装 Coq 库 Mathematical Components
- 医学图像配准中的深度学习综述论文解读
- 中国最具影响力的10位画家：八大山人
- 影响不良贷款拨备覆盖率的因素分析
- 操作系统课程设计-时间片轮转法
- stm32基于FreeRtos下的电阻触摸屏简易计算器
- RSA应用（支付宝小程序加密解密）
- 数电模电（四） 集成计数器及其应用 实验
- 【战神工具出品】解读百度的搜索结果千人千面算法原理