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

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