微信小程序开发中遇到的问题与技巧汇总

从微信小程序发布到现在经手的小程序也有好几个了,开发过程中多少会遇到一些坑,这里汇总一下开发中遇到过的坑与小程序开发技巧。

首先我要先吐槽一下mpvue。
由于我之前做过的小程序全部都是原生开发,最近的一个项目一开始的选型是准备使用mpvue的,我自己也想尝尝鲜,但是在做完基础准备,开始开发的第三天在写一个带输入框的组件时遇到了严重的bug,以至于所有组件形式的输入框全部都不能使用。
在github上看了mpvue dev分支上的提交记录,最近一次是半个月前的,提交了部分代码并添加了数个使用者。还好当时果断放弃mpvue转为原生开发,才使得项目按时上线。
在写这篇文章的时候,我又查看了mpvue的提交记录,最近一次为18天前,提交的内容仅仅是添加了readme中的使用者。合着这一个月mpvue正真的代码提交只有一次。感觉美团造了mpvue这个轮子后,对其更新与修复并不是很上心,反观wepy,差距真心大。
这里建议大家小程序开发还是使用原生开发的好,mpvue、wepy最好不要使用,wepy虽然有人维护,但其bug也不少,原生开发才是最稳的选择,小程序一旦有任何更新这些框架可不一定来得及作出调整。


开发中遇到的问题:

1、textarea层级最高的Bug、由于textarea使用的是原生组件,它的层级最高,会产生很多诡异的Bug,具体可以看这里这里的末尾几行。
2、微信小程序码仅仅针对线上,开发版与体验版扫码会提示该小程序未发布。
测试小程序码的方法:

  • 设置编译模式参数测试小程序码
    如配置url:pages/index/index?scene=6430277129069593265,scene为小程序码B接口所带参数(多参数可自定义符号分割,长度不可超过32个字符)
onLoad (options) {
  // 这里就可以拿到小程序码中的参数6430277129069593265
  console.log('二维码进入', decodeURIComponent(options.scene)
}    
  • 直接将生成的二维码通过开发者工具的‘二维码编译’解析出来(虽然这种方式是最好的选择,但自己尝试解析不出来,全部都跳转了首页)
所以不建议在自己所开发的第一个版本小程序就上线小程序码功能,可在第一个版本预留页面,在onLoad中预先写好测试代码,以供后续版本调试小程序码使用,确保下次上线小程序码一次成功。

3、iOS端,page中开启了下拉刷新,又使用了 toast / loading,下拉刷新时页面会有一个很大的回弹动作,解决方法为去掉微信的toast / loading或自己写loadinng弹框。
4、在组件中使用keyframes 不生效的问题
问题代码如下:

@-webkit-keyframes __spinner-loading {
 from,
 to,
 40% {
  background-color: #888;
 }
 33.333% {
  background-color: red;
 }
}

原因: 33.333% 改为33%即可
5、button有最小尺寸。
6、wxss不支持部分css3选择器。
7、canvas 不支持 overflow:hidden,具体见这里
8、两个canvas叠加在一切,之后进行的一切绘制,dom层级最后的canvas所绘制的东西永远会在最前端,
解决方法:将要放在下层的canvas的wxml写在前面。
9、 <scroll-view>必须设置高度,否则无法监听相关事件。
10、<scroll-view>不能通过绝对定位,上下左右0,来设置全屏铺满,需调用wx.getSystemInfo方法获得屏高,设置style=“height:{{ heightNumber }}px;”
补充:可以在css中为其设置高度为 vh (如:100vh)无需js获取高度也可正常使用。
11、tab页中使用‘wx.getSystemInfo’来获取屏幕高度,真机获取的高度比开发工具少48,这48为tabBar的高度。
12、小程序不能做indexOf以及部分运算,如:{{ useList[index].labIndex.indexOf(lab) > -1 ? 'lab_active' : '' }}
13、小程序不易打开过多页面,目前页面路径最多只能打开十层。
14、小程序测试支付需要扫生成的二维码,而且后台设置金额total_fee单位为分(int),否则报错‘缺少支付total_fee’。
15、

QQ浏览器截图20180819143346.png

16、小程序canvas无法直接绘制网络图(开发工具有效,真机无效)
需要使用 downloadFile API 下载图片后绘制,且图片地址必须配置在后台的‘downloadFile合法域名中’

无效
const cardBg = 'https://image.shanglishi.com/share-BJ.png'
ctx.drawImage(cardBg, 0, 0, 250, 200) 
ctx.draw()

有效
wx.downloadFile({
   url: cardBg ,
   success: function (res) {
     ctx.drawImage(res.tempFilePath, 0, 0, 250, 200)
     ctx.draw()
   }
})

17、canvas绘制圆形图片,开发工具与真机存在差异
18、input获得焦点,软键盘弹出,光标与键盘默认距离为0,键盘会遮挡住部分元素,可设置cursor-spacing(int)来设置键盘与光标的距离,以显示完整元素
19、小程序view英文数字不换行的问题,添加word-break:break-all;即可


小程序开发技巧:

1、小程序调用子组件方法

<countdown id="countdown"></countdown >
onReady() {
    this.countdown = this.selectComponent('#countdown')
    this.countdown.start()
}

2、直接改动上一个页面的data。

const pages = getCurrentPages(); // 当前页面
const prevPage = pages[pages.length - 2]; // 上一页
prevPage.setData({ // 直接给上一页面赋值
  selectCity: info,
});

3、微信群只显示首字母
分享到群的信息只能拿到群ID
<open-data type="groupName" open-gid="{{openGId}}" />获取到的又是完整群名
只显示首字母有两种方法:

  • 足够大的字体与足够大的字间距,只保留第一个字,将其余的字挤下去,父元素溢出隐藏。
    该方法只支持纯中文或纯英文,中英混杂会出现一个中文和一个英文同时出现的情况。
<view class='big-qun-name'>
  <open-data type="groupName" open-gid="{{ item.open_gid }}"></open-data>
</view>
.test open-data{
   width: 100rpx;
   height: 100rpx;
   line-height: 100rpx;
   font-size: 51rpx;
   letter-spacing:1px;
   display: block;
   color: #fff;
}
  • 设置字体为0,使用css3给首字母设置字体大小。
    该方法使用起来时好时坏,不太建议使用。
<view class="nc-img__text" wx:else>
  <open-data openGid="{{groupid}}" type="groupName" ></open-data>
</view>
.text {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: #b8b8b8;
    color: #fff;
    font-size: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: -1px;
    top: -1px;
}

.text open-data {
    width: 50px;
    height: 50px;
    line-height: 48px;
    display: block;
    text-align: center;
    font-size: 0;
}

.text open-data::first-letter {
    font-size: 60rpx;
}
可以考虑使用群成员的头像来表示该群。

4、去除小程序<button>的默认样式

button.remove-btn-style{
  outline:none;
  border:none;
  list-style: none;
  border-radius:0;
}
button.remove-btn-style:after{
  outline:none;
  border:none;
  list-style: none;
}

注意点:

1、正式上线接口需要使用https,接口需在后台配置白名单,白名单一个月只能修改五次,建议一次多配置几个,直接将测试环境与生产环境域名配全,避免多次修改带来的麻烦。
2、请求白名单配置有延迟,可能开发工具请求不了手机却可以、等待几分钟后再次尝试即可。
3、https可以使用内网穿透到本地。
4、上线测试版本需要小程序关联公众号。
5、由于微信修改了getUserInfo机制,所以不要在进入小程序调用wx.login之后立刻调用wx.getuerinfo,一方面用户很大概率会点击拒绝授权导致小程序功能无法使用,另一方面由于wx.login已经可以用于用户登录,我们应在需要的时候再调用,详细调整点击这里
6、微信修改了分享机制,导致开发者拿不到任何分享后的回调(成功、失败、完成)

  • 对于想要获取分享结果的今后将无法实现;
  • 对于想要获取分享信息的,可在分享后点击群内分享消息卡片,在App的onLaunch与onShow(建议在onShow中获取,onLaunch在小程序整个生命周期中只会执行一次)中可获取shareTicket ,用来换取群唯一标识 openGId ,进而显示对应群的相关信息的小程序。

详见这里

推荐阅读更多精彩内容