微信小程序开发中遇到的坑
开发小程序的过程中踩的坑不可谓不多，而有些坑也实在是让人郁闷，不扒一扒难以平我心头之愤呐。
数据绑定 Mustache 语法（双大括号）
<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() 无法向回退的页面传参
rpx 单位适配问题
.border {
border: 1rpx solid #000;
}
绑定事件获取的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>
CSS引用静态资源问题
view 添加点击效果
<view hover hover-class="view-hover">
page wxss样式层级
<!-- 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;
}
其他注意点
-
任何情况下的视图更新只能通过setData()
-
路径只能是五层，请尽量避免多层级的交互方式。
-
不要直接对 Page.data 进行修改，请使用 Page.setData
-
跳转到tabbar页面一定要用 wx.switchTab()
-
使用wx:for遍历的时候最好加上wx:key=”{{index}}”
原创声明
本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
服务热线 19970861797
