一恕曲、backgroundImage不支持本地圖片引入
- 使用網(wǎng)絡(luò)路徑切心；
- 使用base64飒筑；
.bg{
background-image:url(data:image/jpeg;base64,xxxxxx);
}
- 使用image組件替代；
二绽昏、阻止事件冒泡
正常事件綁定使用的是bindtap协屡，但是該方法無法阻止事件冒泡，這樣就會觸發(fā)父元素綁定的事件全谤，小程序提供另一種方法來解決該問題肤晓，使用catchtap事件替換bindtap即可；其他事件同理认然，將bind換成catch补憾。
常見結(jié)構(gòu)：
<navigator url='/pages/detail?id=10'>/*點(diǎn)擊跳轉(zhuǎn)商品詳情*/
<image src="xxx"></image>
<view>豪華雙人床</view>
<view>這床又大又軟</view>
<button catchtap='add'>加入購物車</button>/*點(diǎn)擊添加*/
</navigator>
三、事件傳參 target or currentTarget
target指觸發(fā)事件的目標(biāo)節(jié)點(diǎn)卷员，currentTarget指綁定事件的節(jié)點(diǎn)盈匾，當(dāng)事件綁定節(jié)點(diǎn)包含子節(jié)點(diǎn)時，使用currentTarget更加方便毕骡；
wxml:
/*刪除按鈕結(jié)構(gòu)*/
<view bindtap="delete" data-id="1">
<image src="del_icon.png"></image>
<text>刪除</text>
</view>
js:
Page({
delete(e){
e.currentTarget//必定是view節(jié)點(diǎn) 可以獲取當(dāng)前節(jié)點(diǎn)上攜帶的id
e.target//如果點(diǎn)擊了內(nèi)部image則e.target是image
}
})
四削饵、小程序入口頁面獲取參數(shù)
啟動小程序時參數(shù)通過wx.getLaunchOptionsSync().query訪問，啟動之后進(jìn)入通過options訪問未巫；
/pages/index/index
Page({
onLoad(options){
console.log(options.id)//啟動之后再次進(jìn)入時獲取所傳id參數(shù)（常見為點(diǎn)擊分享鏈接進(jìn)入）
let options = wx.getLaunchOptionsSync();
console.log(options.query.id)//獲取啟動時所傳id參數(shù)
}
})
五窿撬、獲取用戶信息
調(diào)用 wx.getUserInfo 接口，無法彈出授權(quán)詢問框橱赠，默認(rèn)調(diào)用失敗尤仍，如果用戶曾經(jīng)授權(quán)過箫津，則可成功調(diào)用此方法狭姨，否則需要使用 button 組件，并將 open-type 指定為 getUserInfo 類型苏遥，獲取用戶基本信息饼拍。
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {//曾經(jīng)授權(quán)過
this.getUserInfo();//調(diào)用相關(guān)接口獲取用戶信息
this.setData({
canIUseUserInfo: true
})
}else{
this.setData({
canIUseUserInfo: false//否則顯示button讓用戶點(diǎn)擊授權(quán)
})
}
}
})
六、textarea遮擋問題
textarea屬于原生組件田炭，cover-view可以覆蓋在原生組件之上师抄，注意cover-view只能嵌套cover-view、cover-image教硫、button叨吮。
七辆布、去除button邊框
button組件邊框是偽元素：
button::after{ display: none;}
八、開發(fā)版真機(jī)調(diào)試
后臺服務(wù)器搭建后茶鉴，從開發(fā)者工具上設(shè)置不校驗(yàn)域名锋玲，就可以直接訪問服務(wù)器ip或域名，但是用手機(jī)預(yù)覽的時候無法進(jìn)行數(shù)據(jù)的交互涵叮，用手機(jī)掃描預(yù)覽后惭蹂，需要點(diǎn)擊小程序右上角---打開調(diào)試，然后重啟即可割粮！
九盾碗、掃碼調(diào)試（掃描二維碼進(jìn)入開發(fā)調(diào)試）
在開發(fā)的過程中可能會有這樣的場景，要求后臺生成小程序碼舀瓢，用微信掃描小程序碼帶參數(shù)進(jìn)入一個頁面廷雅，但是生成的小程序碼是線上的正式版本，小程度還沒有上線 沒有辦法調(diào)試氢伟；在開發(fā)工具中點(diǎn)擊對應(yīng)按鈕選擇小程序碼榜轿，即可模擬整個過程。
十朵锣、getCurrentPages訪問頁面實(shí)例谬盐，進(jìn)行頁面?zhèn)髦?/h4>
對于頁面之間傳值，最簡陋的方式是借助本地存儲诚些，一個頁面存飞傀，其他頁面取，也可以使用狀態(tài)管理工具诬烹，但是會有種矯枉過正的感覺砸烦。大部分場景都是父子頁面?zhèn)髦担鶕?jù)實(shí)際情況可以使用小程序提供的方式绞吁，一級=>二級（路徑后攜帶參數(shù)）幢痘，二級=>一級（getCurrentPages訪問上級頁面實(shí)例）
//列表頁
Page({
data:{
list:[]
}
})
//點(diǎn)擊按鈕進(jìn)入添加頁面
Page({
add(){
let pages=getCurrentPages();//獲取頁面棧中所有頁面實(shí)例；
let page_list=pages[pages.length-2]//獲取上個頁面實(shí)例 length-1指最后一個頁面也就是當(dāng)前頁面家破；
page_list.setData({
list:pages_list.data.list.concat("新內(nèi)容")
})
}
})
十一颜说、長列表渲染setData數(shù)據(jù)量大時，導(dǎo)致卡頓（數(shù)據(jù)詞典）
小程序數(shù)據(jù)通信需要Native 的 JSBrigde 做中轉(zhuǎn)汰聋，橋接渲染層和邏輯層门粪，每當(dāng)小程序視圖數(shù)據(jù)需要更新時，邏輯層會調(diào)用小程序提供的 setData 方法將數(shù)據(jù)從邏輯層傳遞到視圖層烹困，經(jīng)過一系列渲染步驟之后完成UI視圖更新玄妈，當(dāng)setData傳遞數(shù)據(jù)量比較大的時候，就會引發(fā)渲染性能問題。減少setData數(shù)據(jù)量和調(diào)用頻率是目前開發(fā)者可以主動干預(yù)的步驟拟蜻。
- 數(shù)據(jù)詞典
Page({
data:{
person:{
name:"veb",
age:20
}绎签，
list:[{
title:"西瓜"
}]
},
changeName(){
//常規(guī)寫法 取出person修改name字段，然后setData更新頁面
let person=this.data.person;
person.name="Veblen";
this.setData({//傳入整個修改后的對象
person
})
//數(shù)據(jù)詞典
this.setData({//通過數(shù)據(jù)關(guān)系 更新指定字段
'person.name':'Veblen'
})
//同理
this.setData({//通過數(shù)據(jù)關(guān)系 更新指定字段
'list[0].title':'Veblen'
})
}
})
- 長列表優(yōu)化
將數(shù)據(jù)劃分為二維數(shù)組結(jié)構(gòu)
Page({
data:{
list:[]
},
getNextPage(){
let newList=[];
//常規(guī)寫法 list:[{},{},{}]
this.setData({
list:this.data.list.concat(newList)
})
// 優(yōu)化 list:[[{},{}],[{},{}]]
let index=this.data.list.length-1;
this.setData({//指定索引位置賦值新數(shù)組酝锅，索引為length指定最后一個元素之后的位置
['list['+index+']']:newList//注意：對象屬性為表達(dá)式時需要用[]包裹
})
}
})
加油辜御！
