【原创】微信小程序开发遇到的问题

Posted on

前言

最近在开发微信小程序，顺便记录一下自己踩过的坑

一、按钮样式的修改

小程序默认按钮样式背景色是灰色，有边框，如图1，想要修改成背景色为绿色，无边框，如图2，
图1
图2
于是做了如下修改：

1
2
3
<!-- wxml文件 -->
<button class="btn1" type="default"> default </button>
<button class="btn2" type="default"> default </button>

1
2
3
4
5
6
7
8
9
10
11
12
/*wxss文件*/
button.btn1{
width:200rpx;
margin:50rpx auto;
}
button.btn2{
width:200rpx;
margin:50rpx auto;
border:none;
background:#00D6A6;
color:#ffffff;
}

结果得到了图3的结果，发现边框并没有去掉
图2

研究之后发现，按钮的默认边框是添加在button：after伪类上面，于是进行如下修改：

1
2
3
button.btn2::after{
    border:none;
}

这样就大功告成了

二、使用wx.getImageInfo时，在微信开发者工具中没有问题，但是真机调试时发现，既不走success的回调，也不走fail的回调，研究之后发现问题所在，需要把img的域名添加在downloadFile下才能调用

三、bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

四、小程序中只有用组件包起来的文字才能在手机上长按选中，不用这个组件包起来的文字不能被长按选中

五、wxss中背景图片只能用绝对地址，或者用base64

六、canvas不支持网络图片，获取头像图片地址，然后把图片下载到微信的临时目录或者本地。