用于微信小程序海报生成,希望能帮助您并且能帮助更多的人问题。
- 能够快速开发进入教程,也能减少开发时间
- 做了图片自动适配页面功能,在返回画布的适配器
- 只要分两步分走就很轻松的将合成做好,第一步在项目中引入,第二步在使用一些方法就好了。
- 我们提供很好的开发文档。
(下载方式,不懂自行百度),下载好后,在项目中找到 components 目录中 wx_poster 文件夹,进行拷贝放入到自己项目中。比如我放入在 components 文件夹下面。
找到自己想要引入的页面 .json文件。然后将 usingComponents 里面进行添加上 wx_poster 。比如如下(注意组件路径):
{
"usingComponents": {
"wx_poster": "/components/wx_poster/wx_poster"
}
}
<wx_poster id="wx_poster" showPoster="{{true}}"></wx_poster>
此处是重点啊。咱们必须在 onReady 中调用初始化
// pages/demo/index.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
// 1、获取到页面中的dom对象
var wx_poster = this.selectComponent('#wx_poster')
// 2、调用inits 初始化
wx_poster.inits(function (){
console.log('初始化完成')
// 3、添加海报宽度高度、图片、文字等方法在此处添加
wx_poster.addImg('https://uploadfile.bizhizu.cn/2015/0723/20150723061023750.jpg')
})
},
// ....代码块
})
在问答这里为何还要将微信基础说一遍了。我只能告诉你,你都不知道用户是怎么操作的,肯定有不按你想法操作。
为什么微信开发者预览或者体验版,使用手机看不到图片,而在微信开发者工具内能看见
答:请在小程序内开启调试模式,不懂得自行百度。也请将所有确认的域名添加微信白名单内,毕竟一个月5次机会,请珍惜
为什么加载的那么慢
答:一般优化是,请将大点的图片进行压缩,尤其是跟运营同学那么说下,很容易入坑的。
我的图片到底怎么量取尺寸了
按照微信给的适配单位 rpx 是以750设计图来制作的。
为什么没有二维码功能及一维码。
答:这个问题在于我们这个是合成海报功能,不是生成二维码和一维码工具。完全可以使用第三方的生成二维码或者一维码。
为什么有小程序码这个方法了()
答:我们工具在于帮助那么接触少的小程序开发者少走弯路(希望大家读读源码,大佬请绕路)。原因在于后台传给我们的无法做圆形的大小,那么我这里进行帮你绘制好了。
为什么不直接使用 canvas画布画好的了,还要设置showPoster为true了?
答:最终合成图片的好处:
- 如果你是想设置rpx单位的话,那么可以拿着图片,将 view标签设置背景图,这样可以进行缩放比例
- 如果你拿着图片,在保存那块,能够快速进行保存下来。
- 如果你设置长按进行保存,也是能做到的。
- 可以很轻松的做适配(微信小程序都是750的,直接使用rpx单位,也就是说,你的设计图是750 的话,可以很方便的。)。
如果没有设置海报的宽度和高度。默认取第一张图片(就是第一个addImag()方法拿到的图片)宽度和高度
答:这个怕是用于后台上传后的,海报不知道是多大的,有可能小点,你没在现场不知道用户是怎么操作的。后期新增缩放率,大家都知道微信的缩放值不准确,哎。可怜的娃啊。
图片加载错误处理?
答:如果图片加载错误,我们会使用 img_err 这个事件来通知,返回第几个 addImg 加载错误了。
<wx_poster id="wx_poster" bind:img_err="img_err" showPoster="{{true}}"></wx_poster>
// 在页面js中添加接受的方法。
Page({
/**
* 页面的初始数据
*/
data: {
},
// ....代码块省略
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
// 1、加载错误事件
img_err(msg) {
console.log(msg.detail); // 获取第几个 addImg加载错误了。
}
})
如果第一张图片加载错误,并且我还没设置大小怎么处理的
答:如果第一个 addImg 图片加载失败的话,并且未设置图片宽度高度,进行 img_err 事件以外,以第二个图片加载完成的作为海报的宽度和高度,以此类推。
需要合成一张图片