小程序和前端在开发方面还是有一些区别的,记录一下过程中的坑
生成分享的海报
小程序中想要把页面生成图片,只能使用canvas的API
wx.canvasToTempFilePath
首先把海报的布局使用canvas画出来,
ctx.setFillStyle('#ffffff');
ctx.rect(0, 0, phoneW, phoneH);
ctx.fill();
ctx.drawImage("图片", 0, 0, phoneW, phoneH * 0.65)
ctx.setFillStyle('#000000');
ctx.setFontSize(16);
ctx.fillText('快来助我一臂之力吧', phoneW * 0.3, phoneH * 0.7);
ctx.draw(true, function () {
//保存临时图片
wx.canvasToTempFilePath({
canvasId: 'poster',
success: function (res) {
that.setData({
path: res.tempFilePath //这个就是生成的canvas图片
})
},
fail: function (res) {
console.log(res)
}
})
})
问题一
后台的图片数据是不能展示在canvas上的,在虚拟机可以展示,真机上不显示图片,
这个也是官方公布的bug,
我使用的解决方法也是上网找了一番才找到的,
使用wx.getImageInfoAPI把后台传的图片转换为本地图片,然后再放到canvas里边,这样就可以在真机上展示了。
问题二
长按海报出现操作列表,这里的操作列表我是自定义的,使用系统自带的不知道什么情况,但是吧...目前小程序中的canvasAPI权重最高,自定义的列表根本覆盖不了canvas... 定位什么的也不管用,而且canvas的固定定位不起作用和绝对定位一样,总之bug很多...摸索一番才解决了这个严重的问题
在海报显示之前把canvas替换为image,路径就是canvas生成的图片,并且隐藏canvas,这样页面上用户看到的东西并没有发生改变,也解决了bug
倒计时
一个适用于多方面的倒计时模块
page({
data:{
dayMillisecond:2592000 //倒计时30天的毫秒数
},
onLoad:function(){
// 倒计时调用
setTimeout(function () {
that.timer();
}, 10)
},
// 渲染倒计时
timer: function () {
let promise = new Promise((resolve, reject) => {
let setTimer = setInterval(
() => {
this.setData({
dayClock: app.dateformat1(this.data.dayMillisecond1--),
//把dayClock加到页面中即可
})
}, 1000)
})
promise.then((setTimer) => {
clearInterval(setTimer)
})
},
})
//app.dateformat1
dateformat1:function(second) {
var day=Math.floor(second/3600/24),
hr = Math.floor(second/3600%24),
min = Math.floor(second/60%60),
sec = (second%60);
return day; //根据实际开发需求返回相应的值
},
隐藏scroll-view的滚动条
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。