微信小程式入門筆記(上)
阿新 • • 發佈:2019-02-12
目前專案正在開發中,總結地比較少,也不全,後續會更新。
踩坑點
- scroll-view標籤設定橫向滾動時,需要以下設定
- 設定滾動項display:inline-block;
- 設定滾動檢視容器white-space: nowrap;
- 滾動項不要用float
- 背景圖可以用base64格式,或者網路圖片,不能用本地圖片;本地圖片只能用image標籤,也就是說本地圖片不能用作雪碧圖
- image標籤有預設的寬高,所以image都需要重新設定寬高
- 模板中變數一定要用{{ }}包起來,比如
<view wx:if="{{true}}">
<view wx:for ="{{itemList}}" wx:key='itemId'> </view>
</view>
然而,我經常忘記,經常踩坑!!!
- 模板中{{ }}不能執行js中定義的方法,只能執行wxs中定義的方法。比如Angular中的Pipe可以通過wxs實現:
// pipe.wxs
function getOrderStatus(status) {
var statusMap = {
WAIT_PAID: '待付款',
WAIT_SHIPPED: '待發貨',
WAIT_RECEIVED: '待收貨',
RECEIVED: '已收貨' ,
CANCELED: '已取消',
REFUNDED: '已退款'
}
return statusMap[status] ? statusMap[status] : '未知狀態';
}
module.exports = {
getOrderStatus: getOrderStatus
}
// order-list.wxml
<wxs module="orderModule">
module.exports = require('../../../utils/filter.wxs')
</wxs>
<view> {{orderModule.getOrderStatus(order.status)}} </view>
- 繫結事件直接寫函式名,引數的傳法是data-開頭傳資料,引數大寫的會直接轉為小寫,分隔符會直接轉為駝峰,取值用event.currentTarget.dataset.**來取,是不是很奇怪?
// mine.wxml
<view data-orderType="0" bindtap="navToOrder">
<text> 全部訂單 </text>
</view>
<view data-order-type="1" bindtap="navToOrder2">
<text> 全部訂單 </text>
</view>
//mine.js
Page({
data: {
...
},
navToOrder(event){
wx.navigateTo({
url: '../order/order-list/order-list?type=' + event.currentTarget.dataset.ordertype,
})
},
navToOrder2(event){
wx.navigateTo({
url: '../order/order-list/order-list?type=' + event.currentTarget.dataset.orderType,
})
},
})
- 頁面切換,如果是作為tab的頁面要用switchTab,不能用navigateTo。如果點選沒反應,用fail函式去捕捉錯誤資訊。
- 開發者工具假死了,重啟再試!!!
注意點
- 使用 page標籤選擇器,可以修改頂層節點的樣式
- 模板template只能使用data傳入的資料
- catch開頭的事件能阻止冒泡,比如catchtap
- for迴圈預設欄位為index和item,最好加上wx:key屬性,防止重新渲染,提高效能
- 生命週期事件觸發的順序是onLoad載入, onShow顯示,onReady渲染完成,onHide和 onUnload不會同時觸發,根據不同情況只觸發一個
- 更新資料只能用setData(不然檢視不能及時更新),setData時的key可以寫成a.b.c.d的形式;雖然如此,有時候想要動態地改變某個值還是很不方便的,可以先賦完值,再用setData來通知更新試圖
- url引數獲取:用onLoad中的options
- 事件event的target和currentTarget什麼區別?
- target是觸發元件,currentTarget是當前元件。因為事件有捕獲冒泡階段,觸發元件未定一直都是當前元件
- 註冊小程式App()中有onError事件,可以跟後端約定介面將錯誤傳給後端,以更好地排錯
- 目前小程式不提供跳轉到網址的功能大家都知道的咯(它能,但不提供)
- 用wx.getUserInfo請求使用者資訊,使用者拒絕之後短時間不會再請求怎麼辦?
- button元件有個open-type屬效能讓使用者主動去調起授權介面
- 呼叫wx.openSetting()介面會檢視之前發起的授權設定資訊,通過引導使用者修改這裡的授權設定,可以在不刪除小程式的情況下重新拉起某些許可權的獲取
//按鈕再次請求授權 getUserInfo為回撥函式
<button type="primary" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 再次授權 </button>
// js請求
wx.getUserInfo({
success: res => {
// 獲取使用者資訊成功後的操作
},
fail: () => {
// 使用者拒絕授權後,再次授權
wx.openSetting({
success: res=>{
wx.getUserInfo({
success: res => {
// 獲取使用者資訊成功後的操作
}
})
}
})
}
}