扒一扒小程序的坑
|
小記最近幾個月和公司的同事一直在馬不停蹄的開發小程序，經歷了幾個版本的迭代后也總算是穩定了下來。而我們的小程序也是得到了騰訊的認可，還拿了個獎
開發小程序的過程中踩的坑不可謂不多，而有些坑也實在是讓人郁悶，不扒一扒難以平我心頭之憤吶。 數據綁定 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;
}
其他注意點
|
