扒一扒小程序的坑

 

小记最近几个月和公司的同事一直在马不停蹄的开发小程序，经历了几个版本的迭代后也总算是稳定了下来。而我们的小程序也是得到了腾讯的认可，还拿了个奖

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

数据绑定 Mustache 语法（双大括号）

这个 {{}} 里面不能执行任何的方法，只能做简单的四则运算和Boolen判断，比如：

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

你这么干是不行的，你只能在拿到数据的时候就先对数据格式化一遍。是不是很恶心～～～  
但是你如果非要在渲染的时候再格式化的话也行，你就只能通过WXS来处理了，比如：

1. <wxs module="m1">
2. var parse = function(str) {
3. return parseInt(str);
4. };
5. module.exports.parse = parse;
6. </wxs>
7.  
8. <view wx:for="{{['1.22', '2.22', '3.222']}}" wx:for-item="i">
9. {{m1.parse(i)}}
10. </view>

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

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

rpx 单位适配问题

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

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

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

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

在绑定事件获取当前组件数据的时候，拿到的envt里面有target和currentTarget 这两个玩意儿里面都有一个dataset，而我们需要获取的数据就在dataset对象里面。正确的我们应该取 currentTarget 里面的就行，但是有时候这两个的数据是完全一样的，一不小心你就取错了。
那这个 target 和 currentTarget 有什么区别呢，官方的解释：
target：触发事件的源组件;
currentTarget： 事件绑定的当前组件;
看个例子:

1. <view id="outer" bindtap="handleTap1">
2. outer view
3. <view id="middle" catchtap="handleTap2">
4. middle view
5. <view id="inner" bindtap="handleTap3">
6. inner view
7. </view>
8. </view>
9. </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 协议头，形如：//cdn.xxx.com/jflkadsjf.png 是不行的

view 添加点击效果

需要主动开启

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

page wxss样式层级

下面是一个page 示例：

1. <!-- wxml -->
2. <view class="page-layout">
3. <view class="page__title">flex-direction: row</view>
4. <view class="flex-wrp" style="flex-direction:row;">
5. <view class="flex-item green">1</view>
6. <view class="flex-item red">2</view>
7. <view class="flex-item blue">3</view>
8. </view>
9. </view>

1. /* wxss */
2.  
3. .page-layout {
4. color: #000;
5. }
6. /* 下面这种写法 .red 是不生效的 */
7. .red {
8. color: #f00;
9. }
10.  
11. /* 必须这么写 */
12.  
13. .page-layout .red {
14. color: #f00;
15. }

WXS iOS 8.0

wxs 中如果使用了较新的 ES6 语法会导致小程序在iOS8机器上无法运行。小程序开发工具估计是没对wxs里面的ES6进行编译

1. // wxs
2. var getDesc = function(str) {
3. var strAry = str.split('·');
4. var desc1 = strAry[1] ? strAry[1] : '';
5. var desc2 = strAry[0];
6.  
7. //return {desc1, desc2} // 这里这种写法在iOS8上是没法正常运行的
8. return { // 必需采用ES5 的写法
9. desc1: desc1,
10. desc2: desc2
11. }
12. }
13.  
14. module.exports.getDesc = getDesc;

image 使用延迟加载问题

笔者之前在使用 <image/>的时候启用了延迟加载，也就是

1. <image mode="widthFix" src="{{imgurl}}" lazy-load></image>

这个绝大部分情况下是没问题的，但是有一天运营突然来找我说，他们配的活动页面上的部分图片在部分机型（比如：笔者的Iphone 7）上加载不出来。直觉告诉我估计是 “lazy-load” 问题，干掉后固然都正常了。后面特意对比了一下，发现无法load出来的图片都比较大，基本上是1500的宽度。
不知道是不是个例，抛出来给大家看看。

wx.getUserInfo() 调整

获取用户信息接口如果之前用户未授权过，调用该接口将直接报错，不再出现授权弹窗。只能通过button组件拉起授权。具体看文档

1. <button open-type="getUserInfo"></button>

web-view

微信小程序自 基础库 1.6.4开始支持了web-view组件，也就是可以在小程序里面内嵌网页，但是个人类型与海外类型的小程序暂不支持使用。

小程序无法和网页通信，如果需要携带参数，只能通过web-view url 中携带参数，网页可以通过 wx.miniProgram.postMessage 向小程序传数据但是基础库版本要在1.7.1以上且小程序只能在特定时机（小程序后退、组件销毁、分享）接收到信息。

小程序内置网页环境判断

小程序内置网页可通过 window.__wxjs_environment 变量判断是否在小程序环境。一般情况下web需要适配在判断是否在微信浏览器中打开，普通浏览器中打开，小程序中打开，然后会有以下代码：

1. // 判断是否在微信浏览器中
2. function isWeixinBrowser() {
3. return /micromessenger/i.test(navigator.userAgent.toLowerCase());
4. }
5.  
6.  
7. if ( isWeixinBrowser() ) {
8. // to do something
9. } else if ( window.__wxjs_environment ) {
10. // to do something
11. } else {
12. // to do something
13. }

如果这么写那么小程序的那个分支永远也进不去，为什么？自己想

1. // 判断是否在微信浏览器中
2. function isWeixinBrowser() {
3. return /micromessenger/i.test(navigator.userAgent.toLowerCase());
4. }
5.  
6.  
7. if ( window.__wxjs_environment ) {
8. // to do something
9. } else if ( isWeixinBrowser() ) {
10. // to do something
11. } else {
12. // to do something
13. }

这么写就好了

其他注意点

• 任何情况下的视图更新只能通过setData()
• 路径只能是十层。
• 不要直接对 Page.data 进行修改，请使用 Page.setData
• 跳转到tabbar页面一定要用 wx.switchTab()
• 使用wx:for遍历的时候最好加上wx:key=”{{index}}”
• 小程序目前还没有IphoneX 的适配方案，只能通过自己判断系统添加相应适配

写于 2018年1月26日 Web  4609

如非特别注明，文章皆为原创。

转载请注明出处： https://www.liayal.com/article/5a6b07137de5e93eee4137ca