微信小程序上线至今，我也接手过不少小程序，在开发过程中也遇到了一些坑，这里我总结一下开发过程中遇到的坑和小程序开发技巧。
首先，我想抱怨一下。
由于之前做的小程序都是原生开发的，所以近期的一个项目初步选定就是准备用一下，也想自己尝试一下，但是第三天在完成基本准备开始开发的时候，在写一个带输入框的组件的时候遇到了一个很严重的bug，导致所有组件表单的输入框都无法使用。
我看了下 dev 分支上的提交记录，最近的一次是半个月前，提交了部分代码，增加了几个用户。还好我当时果断放弃了切换到原生开发，才使得项目能够按时上线。
在写这篇文章的时候，我又查看了一下记录，最近的一次是18天前，的内容只是用户的添加。所以这个月真正意义上的代码只有一次。看来美团造了这个轮子之后，并没有太注意对它的更新和修复。反观wepy的差距确实很大。
这里建议大家使用原生开发进行小程序开发，最好不要使用wepy，wepy虽然有人维护但是bug比较多，原生开发是最稳定的选择，一旦小程序更新，这些框架可能来不及做调整。
开发过程中遇到的问题：
1. 最高级别的bug。因为用了原生组件，所以级别最高，会产生很多奇怪的bug。具体可以看这里和这里的最后几行。
2、微信小程序码仅供线上使用，开发版、试用版扫码会提示小程序尚未上线。
如何测试小程序代码：
onLoad (options) { // 这里就可以拿到小程序码中的参数6430277129069593265 console.log('二维码进入', decodeURIComponent(options.scene) }
所以不建议在你开发的小程序第一个版本就上线小程序码功能，可以在第一个版本预留一个页面，提前编写测试代码，用于后续版本调试小程序代码时使用，确保下次小程序代码能够成功上线。
3、iOS 上页面开启了下拉刷新，并且使用了 / ，下拉刷新的时候页面会有比较大的反弹动作，解决办法是把微信里的 / 去掉或者自己写一个弹框。
4.在组件中使用不生效的问题
问题代码如下：
@-webkit-keyframes __spinner-loading { from, to, 40% { background-color: #888; } 33.333% { background-color: red; } }
原因：33.333%可以改为33%
5. 有最小尺寸。
6.wxss不支持某些css3选择器。
7. 不支持：详情见此处
8. 两者互相叠加，之后的所有绘制都已完成。DOM 层中最后绘制的内容将始终位于最前面。
解决办法：把要写的wxml放在层前面。
9.必须设置高度，否则无法监听相关事件。
10.不能使用绝对定位，上、下、左、右均为0，设置全屏，需要调用wx.方法获取屏幕高度，设置为“:{{ }}px;”
补充：可以在CSS中将高度设置为vh（如：）就可以正常使用，不需要js来获取高度。
11、在tab页中使用wx.获取屏幕高度，真机获取到的高度比开发工具获取到的高度少了48，这个是48。
12. 小程序无法执行某些操作，如：{{ []..(lab) > -1 ? '' : '' }}
13、小程序页面打开不方便，目前页面路径最多只能打开十级。
14.小程序测试支付，需要扫描生成的二维码，并且后台必须设置金额单位为(int)，否则会提示支付失败的错误信息。
15.
QQ浏览器截图246.png
16.小程序无法直接绘制网络图（开发工具可以，真机不行）
需要使用API下载图片然后绘制，且图片地址需在后台的‘合法域名’中配置
无效 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. 绘制圆形图像时，开发工具与真机有差异
18.获取焦点，软键盘弹出，默认光标与键盘距离为0，键盘会遮住部分元素，可以设置-（int）设置键盘与光标距离显示完整元素
19. 小程序视图中英文数字不换行的问题，可以通过添加word-:-all解决；
开发小程序的Tips：
1.小程序调用子组件方法
onReady() { this.countdown = this.selectComponent('#countdown') this.countdown.start() }
2.直接改变上一页的数据。
const pages = getCurrentPages(); // 当前页面 const prevPage = pages[pages.length - 2]; // 上一页 prevPage.setData({ // 直接给上一页面赋值 selectCity: info, });
3.微信群只显示首字母