手摸手带你分析记录那些年我们一起淌过的小程序坑

前言

自从公司的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

// 给当前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样式属性,这样才能触发事件。

<scroll-view 
  scroll-y style="height:1200rpx" 
  lower-threshold="30rpx" 
  bindscrolltolower="searchScrollLower" 
 ></scroll-view>

第四坑 页面通过事件传值问题

通常我们想通过点击页面列表某一项时进行传值,在绑定的方法里进行取值会用到data-index="{data}"来进行传值,在这里发现了一个小坑。

<view data-INDEX=“1” bind:tap="taphandler">第一项内容</view>

taphandler ({ currentTarget }) {
  const index = currentTarget.dataset.INDEX // 错的
  const index = currentTarget.dataset.index // 对的
}

跟据上方代码就可以看出问题了，在我们设置属性名的时候是大写的，但是取值的时候需要小写，所以一定要注意～免得出些奇怪的bug

第五坑 background图片url不能为本地图片

比如

background: url(../imgs/xxx.png); // 这样图片并不能显示。

解决的办法

1：将图片上传到服务器，填写服务器上的图片的路径地址。

2：将图片转为base64编码。

第六坑 预览文档问题

两种方式：

1.web-view组件，在微信后台设置好域名后直接调用

<web-view src="{{url}}"></web-view>

这种方式在android下会下载该文件，这种体验很糟糕。

2.使用openDocumenAPI

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判断，比如：

<view wx:for="{{['1.22', '2.22', '3.222']}}" wx:for-item="i">
  {{parseInt(i)}}
</view>

你这么干是不行的，你只能在拿到数据的时候就先对数据格式化一遍。

但是你如果非要在渲染的时候再格式化的话也行，你就只能通过WXS来处理了，比如：

<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>

结语

以上是整理出来的一部分，开发中其实遇到的不止这么些问题，当时遇到时没有做好记录，所以一时也不能全部想起来。好像还有个订阅消息的坑，到时候放后面再说，今天就到这里吧～