START

最近公司需要开发一个简单微信小程序,记录下遇到的一些问题(本人第一次开发小程序,UI库使用weui)

PROBLEM

1.图片显示问题

在微信小程序image图片标签中,如果在样式中只设置了宽度,没有设置高度或者高度设置为auto,将会导致图片不显示,需要指定图片的高度才能显示。不过image标签封装了mode属性,可以根据需要设置。

2.wx.showModal的局限性

官方的wx.showModal只能展示文本内容,content不能支持富文本和wxml标签,并且也不能自定义样式。一番折腾后发现可以自定义modal组件的内容,比如像这样:

1
2
3
4
5
6
7
8
9
10
11
12
<button bindtap="openAlert">打开弹窗</button>
<modal
title="标题"
hidden="{{modalHidden}}"
bindconfirm="modalConfirm"
bindcancel="modalCancel"
>
<view>
<image class="image" src="{{imgurl}}"></image>
<text>自定义内容</text>
</view>
</modal>

不过这样自定义弹窗我们需要手动控制弹窗的显示和隐藏,代码如下:

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
Page({
data: {
modalHidden: true,
},
openAlert: function(e) {
this.setData({
modalHidden: false
});
},
modalConfirm: function() {
this.setData({
modalHidden: true
});
console.log('点击确定');
},
modalCancel: function() {
this.setData({
modalHidden: true
});
console.log('点击取消');
},
})

这样我们的弹窗就可以随心所欲了,而且样式也可以自己控制。

假如我们不想要取消按钮,将modal的no-cancel设为true即可

3.css(wxss)不能使用本地资源

wxss中background-image不能使用本地资源,可以使用网络图片,或者 base64,或者使用标签;若使用会报错。

4.微信开发者工具文件缓存

问题描述:

在wx.showToast的时候,官方文档中轻提示的icon只支持success,loading,none三种图标,明显不能满足我们的业务需求,好在它还支持image参数——自定义图标的本地路径,并且优先级高于icon。一阵开心选了个图标,发现好丑啊,想换一个,于是将图标文件替换,以为大功告成。万万没想到,在硬盘里图标是已经更换了的,但是开发者工具里的图标死活就是不更新,不管我怎么清缓存都没用。

比较蠢的解决办法:

将原来的文件重命名一下,图标居然更新了!!!可是晚期强迫症表示我就想要原来的名称,所以我又重命名回原来的名称。。。问题又来了,我编译预览的时候图标还是原来的,心态崩了。没办法只能重命名,编译预览,图标更新(再重命名回原来的名称,编译预览——强迫症患者强行加戏)大功告成!

新人求助

有没有大佬有更好的解决办法,望告知

END

由于开发的是一个很简单的小程序,涉及的内容比较少,以后再慢慢填坑