扒一扒小程序的坑
|
小記最近幾個(gè)月和公司的同事一直在馬不停蹄的開(kāi)發(fā)小程序，經(jīng)歷了幾個(gè)版本的迭代后也總算是穩(wěn)定了下來(lái)。而我們的小程序也是得到了騰訊的認(rèn)可，還拿了個(gè)獎(jiǎng)
開(kāi)發(fā)小程序的過(guò)程中踩的坑不可謂不多，而有些坑也實(shí)在是讓人郁悶，不扒一扒難以平我心頭之憤吶。 數(shù)據(jù)綁定 Mustache 語(yǔ)法（雙大括號(hào)）這個(gè) {{}} 里面不能執(zhí)行任何的方法，只能做簡(jiǎn)單的四則運(yùn)算和Boolen判斷，比如：
<view wx:for="{{['1.22', '2.22', '3.222']}}" wx:for-item="i">
{{parseInt(i)}}
</view>
你這么干是不行的，你只能在拿到數(shù)據(jù)的時(shí)候就先對(duì)數(shù)據(jù)格式化一遍。是不是很惡心～～～
<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() 無(wú)法向回退的頁(yè)面?zhèn)鲄?/h4>小程序的幾個(gè)導(dǎo)航api,都可以通過(guò) url 給對(duì)應(yīng)的頁(yè)面?zhèn)鲄?。?w x.navigateBack({delta}), 只接受一個(gè)delta（返回的頁(yè)面數(shù)）參數(shù)。但是有時(shí)候確確實(shí)實(shí)有向回退頁(yè)面?zhèn)鲄?shù)的情況，這時(shí)候就只能通過(guò)localstorage或是redux等來(lái)處理了。 rpx 單位適配問(wèn)題小程序提供的 rpx 單位確實(shí)讓我們開(kāi)發(fā)的時(shí)候在高精度還原設(shè)計(jì)稿上省了很多事情。但是小記發(fā)現(xiàn)當(dāng)你使用1rpx在一些機(jī)型上特別容易出問(wèn)題。
.border {
border: 1rpx solid #000;
}
如果你這樣設(shè)置邊框的時(shí)候，大多數(shù)情況下它都能正常顯示，但是在一些機(jī)器上尤其是 iPhone X 邊框有時(shí)候根本不顯示。所以我現(xiàn)在都改成 2rpx 綁定事件獲取的target與currentTarget是有區(qū)別的
在綁定事件獲取當(dāng)前組件數(shù)據(jù)的時(shí)候，拿到的envt里面有target和currentTarget 這兩個(gè)玩意兒里面都有一個(gè)dataset，而我們需要獲取的數(shù)據(jù)就在dataset對(duì)象里面。正確的我們應(yīng)該取 currentTarget 里面的就行，但是有時(shí)候這兩個(gè)的數(shù)據(jù)是完全一樣的，一不小心你就取錯(cuò)了。
<view id="outer" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
</view>
其實(shí)很容易區(qū)分，target就是事件開(kāi)始的地方，currentTarget就是你綁定事件的地方?？梢匀タ纯?img style="max-width:100%!important;height:auto!important;" alt=":point_right:" data-="" data-bd-imgshare-binded="1" data-height="64" data-width="64" src="https://user-gold-cdn.xitu.io/2018/1/30/16145bec9d074f07?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" title=":point_right:" />小程序事件 CSS引用靜態(tài)資源問(wèn)題
iconfont, 圖片不能通過(guò)css，哦～應(yīng)該該叫 wxss 本地引入。 view 添加點(diǎn)擊效果
需要主動(dòng)開(kāi)啟 <view hover hover-class="view-hover"> page wxss樣式層級(jí)下面是一個(gè)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;
}
/* 下面這種寫(xiě)法 .red 是不生效的 */
.red {
color: #f00;
}
/* 必須這么寫(xiě) */
.page-layout .red {
color: #f00;
}
其他注意點(diǎn)
|
