干货 | 扒一扒小程序开发中遇到的那些坑！

2019 年 12 月 3 日
筆記

开发小程序的过程中踩的坑不可谓不多，而有些坑也实在是让人郁闷，不扒一扒难以平我心头之愤呐。

数据绑定 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>

wx.navigateBack() 无法向回退的页面传参

小程序的几个导航api,都可以通过 url 给对应的页面传参。而 w x.navigateBack({delta}), 只接受一个delta（返回的页面数）参数。但是有时候确确实实有向回退页面传参数的情况，这时候就只能通过localstorage或是redux等来处理了。

rpx 单位适配问题

小程序提供的 rpx 单位确实让我们开发的时候在高精度还原设计稿上省了很多事情。但是小记发现当你使用1rpx在一些机型上特别容易出问题。

.border {      border: 1rpx solid #000;  }

如果你这样设置边框的时候，大多数情况下它都能正常显示，但是在一些机器上尤其是 iPhone X 边框有时候根本不显示。所以我现在都改成 2rpx

绑定事件获取的target与currentTarget是有区别的

在绑定事件获取当前组件数据的时候，拿到的envt里面有target和currentTarget 这两个玩意儿里面都有一个dataset，而我们需要获取的数据就在dataset对象里面。正确的我们应该取 currentTarget 里面的就行，但是有时候这两个的数据是完全一样的，一不小心你就取错了。

那这个 target 和 currentTarget 有什么区别呢，官方的解释：

target：触发事件的源组件; currentTarget：事件绑定的当前组件;

看个例子:

<view id="outer" bindtap="handleTap1">    outer view  <view id="middle" catchtap="handleTap2">      middle view  <view id="inner" bindtap="handleTap3">        inner view  </view>  </view>  </view>

点击 inner view 时，handleTap3 收到的事件对象 target 和 currentTarget 都是 inner，而 handleTap2 收到的事件对象 target 就是 inner，currentTarget 就是 middle。

其实很容易区分，target就是事件开始的地方，currentTarget就是你绑定事件的地方。

CSS引用静态资源问题

iconfont, 图片不能通过css，哦～应该该叫 wxss 本地引入。

1、iconfont @font-face 引用的ttf等文件在小程序中不支持，可以使用线上或转base64 参考微信小程序wxss样式文件中引用iconfont素材。

2、图片可以使用base64或者线上链接。或者<image>哦，对了图片链接一定要带 https 协议头，形如：//www.xxx.com/jflkadsjf.png 是不行的

view 添加点击效果

需要主动开启

<view hover hover-class="view-hover">

page wxss样式层级

下面是一个page 示例：

<view class="page-layout">    <view class="page__title">flex-direction: row</view>    <view class="flex-wrp" style="flex-direction:row;">      <view class="flex-item green">1</view>      <view class="flex-item red">2</view>      <view class="flex-item blue">3</view>    </view>  </view>/* wxss */  .page-layout {      color: #000;  }  /* 下面这种写法 .red 是不生效的 */  .red {      color: #f00;  }  /* 必须这么写 */  .page-layout .red {      color: #f00;  }

其他注意点

任何情况下的视图更新只能通过setData()
路径只能是五层，请尽量避免多层级的交互方式。
不要直接对 Page.data 进行修改，请使用 Page.setData
跳转到tabbar页面一定要用 wx.switchTab()
使用wx:for遍历的时候最好加上wx:key=”{{index}}”