前言
自从公司的IM项目倒了之后，就置身投入到了教育类产品的研发。目前公司主要业务是做一个教育类的微信小程序，本人也是从最开始还没写过一个完整小程序项目的小白，到现在已经开发过一个完整小程序项目的小菜鸟。
从中经历了太多的心酸，所以我有话要说，更希望后面开发小程序的各位兄弟，不要和我一样走太多弯路而浪费了宝贵时间。
接下来，正文的内容就要开始了，如果你还没关注我的公众号，希望各位能够支持我，关注一下公众号，这也是给我的动力，写出更好的文章去帮助你们，谢谢～
正文
第一坑 textarea 层级过高无法被覆盖
项目开发中都会有这样的需求，在一个表单中需要遮罩弹窗做一些事情，而当你表单中有textarea组件的时候，你就会发现textarea会比你遮罩层级要高，无论你的遮罩z-index设置的有多大都是无效的，无法覆盖textarea。
至于发生这样的事情，是因为textarea是原生组件，所以当你使用非原生节点，比如：view，text是无法覆盖过原生组件的。如果你非要覆盖textarea，也不是不可取的，你可以使用cover-view视图节点去做遮罩，这样你就能完美的盖过textarea了。
当然，如果你使用了cover-view，那么就会造成它所在子级只支持嵌套 cover-view、cover-image，还可以在 cover-view 中使用 button。cover-view还可覆盖的原生组件包括： map、video、canvas、camera、live-player、live-pusher。
其它解决方法：在弹出遮罩层的时候把textarea组件隐藏，关闭遮罩后重新显示textarea组件。
提示：video的层级问题在开发者工具中不会显露出来，z-index会起作用，一定要在真机上测试。
第二坑 事件冒泡和捕获的bug
如果是view绑定事件，会存在子组件触发事件，即使用事件捕获也没法阻止。但是用button就不存在这样的问题。建议有点击事件的都应该使用button
代码语言：javascript复制// 给当前view绑定一个tapNav事件
<view class="btn" bindtap="tapNav" data-nav="1">
</view>
// 给当前view绑定一个tapNav事件
<view class="btn" bindtap="tapNav" data-nav="1">
<view data-nav="2"></view>
</view>
// 读取当前执行事件的view data-nav值打印出来
// 第一个打出1
// 第二个如果点击的位置是子view的话，会打印出2.
tapNav: function(event){
console.log(event.target.dataset.nav)
}
第三坑 scroll-view不触发bindscrolltolower事件
在开发列表上拉分页加载功能时用到了小程序提供的组件scroll-view(可滚动视图区域),通过bindscrolltolower(滚动到底部/右边，会触发 scrolltolower 事件)绑定了一个方法,但是无论我怎么上拉，并没有触发该方法,发现自己遗漏了一个属性,需要给scroll-view配上height样式属性,这样才能触发事件。
代码语言：javascript复制<scroll-view
scroll-y style="height:1200rpx"
lower-threshold="30rpx"
bindscrolltolower="searchScrollLower"
></scroll-view>第四坑 页面通过事件传值问题
通常我们想通过点击页面列表某一项时进行传值,在绑定的方法里进行取值会用到data-index="{data}"来进行传值,在这里发现了一个小坑。
代码语言：javascript复制<view data-INDEX=“1” bind:tap="taphandler">第一项内容</view>
taphandler ({ currentTarget }) {
const index = currentTarget.dataset.INDEX // 错的
const index = currentTarget.dataset.index // 对的
}跟据上方代码就可以看出问题了，在我们设置属性名的时候是大写的，但是取值的时候需要小写，所以一定要注意～免得出些奇怪的bug
第五坑 background图片url不能为本地图片
比如
代码语言：javascript复制background: url(../imgs/xxx.png); // 这样图片并不能显示。解决的办法
1：将图片上传到服务器，填写服务器上的图片的路径地址。
2：将图片转为base64编码。
第六坑 预览文档问题
两种方式：
1.web-view组件，在微信后台设置好域名后直接调用
代码语言：javascript复制<web-view src="{{url}}"></web-view>这种方式在android下会下载该文件，这种体验很糟糕。
2.使用openDocumenAPI
代码语言：javascript复制wx.downloadFile({
url: 'http://xxxxx.com/xxxx.pdf',
success: function(res) {
const filePath = res.tempFilePath
wx.openDocument({
filePath: filePath,
success: function(res) {
console.log('打开文档成功')
}
})
}
})第七坑 数据绑定 Mustache 语法（双大括号）
这个 {{}} 里面不能执行任何的方法，只能做简单的四则运算和Boolen判断，比如：
代码语言：javascript复制<view wx:for="{{['1.22', '2.22', '3.222']}}" wx:for-item="i">
{{parseInt(i)}}
</view>你这么干是不行的，你只能在拿到数据的时候就先对数据格式化一遍。
但是你如果非要在渲染的时候再格式化的话也行，你就只能通过WXS来处理了，比如：
代码语言：javascript复制<wxs module="m1">
var parse = function(str) {
return parseInt(str);
};
module.exports.parse = parse;
</wxs>
<view wx:for="{{['1.22', '2.22', '3.222']}}" wx:for-item="i">
{{m1.parse(i)}}
</view>结语
以上是整理出来的一部分，开发中其实遇到的不止这么些问题，当时遇到时没有做好记录，所以一时也不能全部想起来。好像还有个订阅消息的坑，到时候放后面再说，今天就到这里吧～
