从微信小程序发布到现在经手的小程序也有好几个了，开发过程中多少会遇到一些坑，这里汇总一下开发中遇到过的坑与小程序开发技巧。
首先我要先吐槽一下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、
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 ，进而显示对应群的相关信息的小程序。
详见这里。
