一、backgroundImage不支持本地圖片引入
- 使用網絡路徑；
- 使用base64；
.bg{
background-image:url(data:image/jpeg;base64,xxxxxx);
}
- 使用image組件替代；
二、阻止事件冒泡
正常事件綁定使用的是bindtap，但是該方法無法阻止事件冒泡，這樣就會觸發父元素綁定的事件，小程序提供另一種方法來解決該問題，使用catchtap事件替換bindtap即可；其他事件同理，將bind換成catch。
常見結構：
<navigator url='/pages/detail?id=10'>/*點擊跳轉商品詳情*/
<image src="xxx"></image>
<view>豪華雙人床</view>
<view>這床又大又軟</view>
<button catchtap='add'>加入購物車</button>/*點擊添加*/
</navigator>
三、事件傳參 target or currentTarget
target指觸發事件的目標節點，currentTarget指綁定事件的節點，當事件綁定節點包含子節點時，使用currentTarget更加方便；
wxml:
/*刪除按鈕結構*/
<view bindtap="delete" data-id="1">
<image src="del_icon.png"></image>
<text>刪除</text>
</view>
js:
Page({
delete(e){
e.currentTarget//必定是view節點 可以獲取當前節點上攜帶的id
e.target//如果點擊了內部image則e.target是image
}
})
四、小程序入口頁面獲取參數
啟動小程序時參數通過wx.getLaunchOptionsSync().query訪問，啟動之后進入通過options訪問；
/pages/index/index
Page({
onLoad(options){
console.log(options.id)//啟動之后再次進入時獲取所傳id參數（常見為點擊分享鏈接進入）
let options = wx.getLaunchOptionsSync();
console.log(options.query.id)//獲取啟動時所傳id參數
}
})
五、獲取用戶信息
調用 wx.getUserInfo 接口，無法彈出授權詢問框，默認調用失敗，如果用戶曾經授權過，則可成功調用此方法，否則需要使用 button 組件，并將 open-type 指定為 getUserInfo 類型，獲取用戶基本信息。
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {//曾經授權過
this.getUserInfo();//調用相關接口獲取用戶信息
this.setData({
canIUseUserInfo: true
})
}else{
this.setData({
canIUseUserInfo: false//否則顯示button讓用戶點擊授權
})
}
}
})
六、textarea遮擋問題
textarea屬于原生組件，cover-view可以覆蓋在原生組件之上，注意cover-view只能嵌套cover-view、cover-image、button。
七、去除button邊框
button組件邊框是偽元素：
button::after{ display: none;}
八、開發版真機調試
后臺服務器搭建后，從開發者工具上設置不校驗域名，就可以直接訪問服務器ip或域名，但是用手機預覽的時候無法進行數據的交互，用手機掃描預覽后，需要點擊小程序右上角---打開調試，然后重啟即可！
九、掃碼調試（掃描二維碼進入開發調試）
在開發的過程中可能會有這樣的場景，要求后臺生成小程序碼，用微信掃描小程序碼帶參數進入一個頁面，但是生成的小程序碼是線上的正式版本，小程度還沒有上線 沒有辦法調試；在開發工具中點擊對應按鈕選擇小程序碼，即可模擬整個過程。
十、getCurrentPages訪問頁面實例，進行頁面傳值
對于頁面之間傳值，最簡陋的方式是借助本地存儲，一個頁面存，其他頁面取，也可以使用狀態管理工具，但是會有種矯枉過正的感覺。大部分場景都是父子頁面傳值，根據實際情況可以使用小程序提供的方式，一級=>二級（路徑后攜帶參數），二級=>一級（getCurrentPages訪問上級頁面實例）
//列表頁
Page({
data:{
list:[]
}
})
//點擊按鈕進入添加頁面
Page({
add(){
let pages=getCurrentPages();//獲取頁面棧中所有頁面實例；
let page_list=pages[pages.length-2]//獲取上個頁面實例 length-1指最后一個頁面也就是當前頁面；
page_list.setData({
list:pages_list.data.list.concat("新內容")
})
}
})
十一、長列表渲染setData數據量大時，導致卡頓（數據詞典）
小程序數據通信需要Native 的 JSBrigde 做中轉，橋接渲染層和邏輯層，每當小程序視圖數據需要更新時，邏輯層會調用小程序提供的 setData 方法將數據從邏輯層傳遞到視圖層，經過一系列渲染步驟之后完成UI視圖更新，當setData傳遞數據量比較大的時候，就會引發渲染性能問題。減少setData數據量和調用頻率是目前開發者可以主動干預的步驟。
- 數據詞典
Page({
data:{
person:{
name:"veb",
age:20
}，
list:[{
title:"西瓜"
}]
},
changeName(){
//常規寫法 取出person修改name字段，然后setData更新頁面
let person=this.data.person;
person.name="Veblen";
this.setData({//傳入整個修改后的對象
person
})
//數據詞典
this.setData({//通過數據關系 更新指定字段
'person.name':'Veblen'
})
//同理
this.setData({//通過數據關系 更新指定字段
'list[0].title':'Veblen'
})
}
})
- 長列表優化
將數據劃分為二維數組結構
Page({
data:{
list:[]
},
getNextPage(){
let newList=[];
//常規寫法 list:[{},{},{}]
this.setData({
list:this.data.list.concat(newList)
})
// 優化 list:[[{},{}],[{},{}]]
let index=this.data.list.length-1;
this.setData({//指定索引位置賦值新數組，索引為length指定最后一個元素之后的位置
['list['+index+']']:newList//注意：對象屬性為表達式時需要用[]包裹
})
}
})
加油！
