微信小程序相關(guān)及一些小坑
1.頁(yè)面滑動(dòng)
小程序內(nèi)容超出父盒子，或者頁(yè)面超出屏幕都不會(huì)出現(xiàn)滾動(dòng)條滑動(dòng)，如需要滑動(dòng)，要使用scroll-view組件包裹著要滑動(dòng)的區(qū)域
scroll-view相關(guān)配置屬性
scroll-view相關(guān)
- scroll-view生效需要設(shè)置高度，如果沒(méi)有設(shè)置高度，滑動(dòng)效果不生效
- 去除scroll-view默認(rèn)滾動(dòng)條
::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}
2.閉包問(wèn)題
請(qǐng)求后臺(tái)api中的success函數(shù)實(shí)際是一個(gè)閉包 ， 無(wú)法直接通過(guò)this來(lái)設(shè)置setData;
解決方案：
1.將當(dāng)前對(duì)象賦給一個(gè)新對(duì)象：let that = this
2.使用箭頭函數(shù)
onLoad: function (options) {
console.log(options.uselogid)
wx.request({
url: util.Api.getUserPrizeInfo,
method: 'get',
data: {
openid: app.globalData.openid,
user_log_id: options.uselogid
},
success: (res) => {
// console.log(res.data)
this.setData({
cardData: res.data.data,
qrCode: res.data.data.qrCodeUrl,
uselogid: options.uselogid,
status: res.data.data.status
})
console.log(this.data.status)
}
})
}
3.背景圖片問(wèn)題
小程序中的背景圖片寫在wxss預(yù)覽時(shí)無(wú)法顯現(xiàn)
解決方案：
1.將圖片轉(zhuǎn)為base64格式，才能在wxss內(nèi)設(shè)置
2.寫行內(nèi)樣式，圖片用網(wǎng)絡(luò)圖片，本地圖片無(wú)法預(yù)覽
4.路由
1.使用navigator標(biāo)簽導(dǎo)航，注意url地址不能帶文件后綴
2.在js文件內(nèi)注冊(cè)事件跳轉(zhuǎn)
wx.navigateTo跳轉(zhuǎn)保留當(dāng)前頁(yè)面，也就是說(shuō)會(huì)有返回箭頭
wx.navigateTo({
url: '/pages/cardDetial/cardDetial?uselogid=' + e.currentTarget.dataset.uselogid,
})
wx.redirectTo跳轉(zhuǎn) 關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。但是不允許跳轉(zhuǎn)到 tabbar 頁(yè)面。
wx.redirectTo({
url: '/pages/superGift/superGift',
})
5.頁(yè)面間傳值
傳值:和web頁(yè)面差不多，也是在url地址后面拼接參數(shù)
wx.navigateTo({
url: '/pages/cardDetial/cardDetial?uselogid=' + e.currentTarget.dataset.uselogid,
})
接收：直接在生命周期onLoad里用參數(shù)接收
onLoad: function (options) {
console.log(options.uselogid)
},
6.無(wú)法使用外部字體圖標(biāo)
大部分情況下直接下載iconfont的壓縮包，將其內(nèi)的iconfont.css文件復(fù)制到一個(gè)新的wxss文件內(nèi)，然后在app.wxss文件內(nèi)全局引入@import "/lib/style/iconfont.wxss";就可以在任意文件中使用了
如果出現(xiàn)無(wú)法使用的情況，試試下面方法：
1，下載font-awesome字體包
2，打開(kāi)Transfonter網(wǎng)站，上傳字體iconfont.ttf，選擇base64編碼
3，convert完畢后點(diǎn)擊下載，下載得到的包中有stylesheet.css文件，打開(kāi)并對(duì)照f(shuō)ont-awesome.css中的內(nèi)容進(jìn)行合并base64部分，加入到微信小程序的xxx.wxss文件中進(jìn)行使用
<text class="iconfont icon-xxxx"></text>
7.setData修改數(shù)組或?qū)ο?/h3>
setData無(wú)法直接修改引用類型的數(shù)據(jù)，需要字符串拼接的方式保存到變量中
var closeShow = "redPacket.myClosePackect"
self.setData({
[closeShow]: false,
})
8.textarea注意事項(xiàng)
1.bug: 微信版本 6.3.30，textarea 在列表渲染時(shí)，新增加的 textarea 在自動(dòng)聚焦時(shí)的位置計(jì)算錯(cuò)誤。
2.tip: textarea 的 blur 事件會(huì)晚于頁(yè)面上的 tap 事件，如果需要在 button 的點(diǎn)擊事件獲取 textarea，可以使用 form 的 bindsubmit。
3.tip: 不建議在多行文本上對(duì)用戶的輸入進(jìn)行修改，所以 textarea 的 bindinput 處理函數(shù)并不會(huì)將返回值反映到 textarea 上。
4.tip: textarea 組件是由客戶端創(chuàng)建的原生組件，它的層級(jí)是最高的，不能通過(guò) z-index 控制層級(jí)。
5.tip: 請(qǐng)勿在 scroll-view、swiper、picker-view、movable-view 中使用 textarea 組件。
6.tip: css 動(dòng)畫對(duì) textarea 組件無(wú)效。
9.原生組件無(wú)法被覆蓋的問(wèn)題
map、video、canvas、camera 等原生組件上不可被標(biāo)簽覆蓋，如果需要覆蓋，要使用cover-view標(biāo)簽 且只支持嵌套cover-view、cover-image
