扒一扒小程序的坑
|
小记最近几个月和公司的同事一直在马不停蹄的开发小程序，经历了几个版本的迭代后也总算是稳定了下来。而我们的小程序也是得到了腾讯的认可，还拿了个奖
开发小程序的过程中踩的坑不可谓不多，而有些坑也实在是让人郁闷，不扒一扒难以平我心头之愤呐。 数据绑定 Mustache 语法（双大括号）这个 {{}} 里面不能执行任何的方法，只能做简单的四则运算和Boolen判断，比如：
<view wx:for="{{['1.22', '2.22', '3.222']}}" wx:for-item="i">
{{parseInt(i)}}
</view>
你这么干是不行的，你只能在拿到数据的时候就先对数据格式化一遍。是不是很恶心～～～
<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 里面的就行，但是有时候这两个的数据是完全一样的，一不小心你就取错了。
<view id="outer" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
</view>
其实很容易区分，target就是事件开始的地方，currentTarget就是你绑定事件的地方。可以去看看 CSS引用静态资源问题
iconfont, 图片不能通过css，哦～应该该叫 wxss 本地引入。 view 添加点击效果
需要主动开启 <view hover hover-class="view-hover"> page wxss样式层级下面是一个page 示例：
<!-- wxml -->
<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;
}
其他注意点
|
