微信小程序-部分问题集锦
本文于
400
天之前发表，文中内容可能已经过时。
概述
微信小程序遇到的问题及解决方法集锦，持续更新…
答：hover-class=”btn-hover” 给button添加此属性即可去除点击时背景色；
2.动态改变page.json 里面的navigationBarTitleText标题
答： wx.setNavigationBarTitle({title: title})；
答：.btn:after {border: none;}
4.image标签跟view标签上下会有间隙
原因：
图片文字等inline元素默许是跟父级元素的baseline对齐，而baseline又和父级底边有必定间距；
方案一：
将图片转换为块级对象，即img{display:block;}；
方案二：
设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以解决。如： img {vertical-align:top;}；
方案三：
设置图片的浮动属性；即img {float:left;}；
1.给input绑定bindinput事件；
2.利用数据双向绑定同步当前input的value值；
3.利用正则去除空格（replace(/\s+/g, ‘’)）；
html:
1
| <input type="text" bindinput="getValue" value="{{value}}" ></input>
|
js:
1
2
3
4
5
6
| getValue:function(e){
let val = e.detail.value;
this.setData({
value: val.replace(/\s+/g, '')
})
}
|
6.在使用canvas绘图时，使用图片做背景遇到的问题
背景：在使用图片为背景通过canvsa绘制图片时，会遇到不同手机获取到的背景图片被截取程度会不同，生成的图片并不是我们想要的大小。
因此我们在使用图片作为canvas绘制图片的背景图片时，需要先获取屏幕的分辨率设置图片自适应大小：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| // 生成海报
createPoster: function (){
let that = this
, pageBg = this.data.pageBg //背景图片地址
, width;
wx.getSystemInfo({
success(res) {
width = res.screenWidth; //当前分辨率宽度
}
});
//设置自适应大小
const x = width / 750;
const ctx = wx.createCanvasContext('qrCodeCanvas');
console.log(ctx);
//主要布局
ctx.clearRect(0, 0, 750, 1204);
ctx.fillStyle = '#e04e4e';
ctx.fillRect(0, 0, 750, 1204);
//根据分辨率设置背景图片大小；750：图片宽度；1204：图片高度；
ctx.drawImage(pageBg, 0, 0, 750 * x, 1204 * x);
ctx.draw(false, function () {
setTimeout(() => {
// canvas画布转成图片
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 750,
height: 1204,
destWidth: 2250,
destHeight: 3612,
canvasId: 'qrCodeCanvas',
success: function (res) {
console.log(res.tempFilePath);
that.setData({
qrCodeImgCanvas: res.tempFilePath
})
},
fail: function (res) {
console.log("error");
console.log(res);
}
})
}, 200)
});
},
|
