1.綁定變量的語(yǔ)法航唆,各不相同。
//綁定style中的height變量
<scroll-view scroll-y style="height:{{height}}px;">
//綁定class中的變量
<view class="tab-item{{curTab == 2 ? ' btnActive' : ''}}">
//事件綁定是不使用雙花括號(hào),事件中如果傳遞的值是變量卻需要用雙花括號(hào)
<view @tap="doTab(2)" >
<view @tap="onTag('{{item.name}}')"
//組件傳值也是不使用雙花括號(hào)的
<Bdmap :title="mapTitle"></Bdmap>
// 循環(huán)綁定變量k也是是不需要花括號(hào)的
<repeat for="{{list}}" key="index" index="index" item="item">
-
普通循環(huán)標(biāo)簽事件,外層容器加display:block,循環(huán)內(nèi)容加display:inline-block.并且設(shè)置一個(gè)40rpx的高度院刁。會(huì)有神奇的樣式效果出現(xiàn)糯钙,文字出現(xiàn)在了塊級(jí)元素下方。這個(gè)是什么鬼退腥?這個(gè)問(wèn)題是因?yàn)槟闶褂昧藅ext的標(biāo)簽變成了inline-block任岸,如果換成view就正常了。
<view class='tag' style="display:block"> <repeat for="{{tagList}}" key="index" index="index" item="item"> <text @tap="onTag('{{item.name}}')" style='height:40rpx;display:inline-block'> {{item.name}} </text> </repeat> </view>
另外還有就還是在text標(biāo)簽中如果使用 的時(shí)候記得還要添加decode="{{true}}"屬性狡刘。
3.canvas 在手機(jī)端適配有兩個(gè)bug享潜,第一個(gè)是蘋果手機(jī)中默認(rèn)screenScroll為false,當(dāng)操作canvas 以后屏幕就沒(méi)有辦法再上下滾動(dòng)了嗅蔬,出現(xiàn)了類似死機(jī)一般的效果剑按。但是安卓手機(jī)操作很正常。解決方法是澜术,需要你再蘋果手機(jī)結(jié)束canvas繪圖操作后艺蝴,手動(dòng)將屬性screenScroll改為true。讓屏幕可以繼續(xù)除滑動(dòng)了鸟废。如果你只是滿屏顯示不需要屏幕上下滑動(dòng)的需求猜敢,就請(qǐng)忽略以上內(nèi)容。
第二個(gè)坑就是蘋果手機(jī)將canvas轉(zhuǎn)換成二進(jìn)制圖片后,蘋果手機(jī)轉(zhuǎn)換后的圖片居然是180度顛倒的锣枝,安卓手機(jī)是正常的。這個(gè)bug的解決方法是將蘋果手機(jī)中生成的圖片在上傳到自己的服務(wù)器之前旋轉(zhuǎn)180度兰英,具體的做法如下撇叁。
wx.canvasGetImageData({
canvasId: 'canvas',
x: 0,
y: 0,
width: 350,
height: 200,
success(res) {
let platform = wx.getSystemInfoSync().platform
if (platform == 'ios') {
// 兼容處理:ios獲取的圖片上下顛倒
let result = that.reversedata(res)
}
// 3. png編碼
let pngData = upng.encode([res.data.buffer], res.width, res.height)
// 4. base64編碼
let base64 = wx.arrayBufferToBase64(pngData)
let base64Image = "data:image/jpeg;base64," + base64
let sign = base64Image
let state = that.state
let pages = getCurrentPages();
if (pages.length > 1) {
//上一個(gè)頁(yè)面實(shí)例對(duì)象
let prePage = pages[pages.length - 2];
//關(guān)鍵在這里,這里面是觸發(fā)上個(gè)界面
prePage.changeData(state, sign) // 不同的人里面的值是不同的,這個(gè)數(shù)據(jù)是我的畦贸,具體的你們要根據(jù)自己的來(lái)查看所要傳的參數(shù)
}
wx.navigateBack({
changed: true
})
}
})
//圖片翻轉(zhuǎn)的方法
reversedata(res) {
var w = res.width;
var h = res.height;
let con = 0;
for (var i = 0; i < h / 2; i++) {
for (var j = 0; j < w * 4; j++) {
con = res.data[(i * w * 4 + j) + ""];
res.data[(i * w * 4 + j) + ""] = res.data[((h - i - 1) * w * 4 + j) + ""];
res.data[((h - i - 1) * w * 4 + j) + ""] = con;
}
}
return res;
};
4.第四點(diǎn)是開(kāi)發(fā)者需要注意的陨闹。微信登錄的時(shí)候一定要先獲取用戶的code,再獲取iv和encryptData的數(shù)組否則薄坏,要兩次才能登錄成功哦趋厉,文檔中并沒(méi)有強(qiáng)調(diào),開(kāi)發(fā)中如果不仔細(xì)閱讀文檔很容易忽略掉胶坠,造成不必要的時(shí)間浪費(fèi)君账。具體方法如下可以在頁(yè)面加載的時(shí)候獲取code.點(diǎn)擊登錄的時(shí)候在獲取iv和encryptData數(shù)據(jù)。
<button class="btnwx" open-type="getPhoneNumber" bindgetphonenumber="doWxLogin">微信手機(jī)號(hào)快捷登錄</button>
async doWxLogin(e) {
let self = this;
let login = await api.wxLogin({
query: {
code: self.code,
iv: e.detail.iv,
encryptData: e.detail.encryptedData
},
method: 'POST'
});
if (login.data.code === 0) {
wepy.setStorageSync('mobile', login.data.data.mobile);
wepy.setStorageSync('userInfo', login.data.data);
wepy.setStorageSync('token', login.data.data.token);
await tip.success('登錄成功').then(() => {
// goUrl(self.url || '/pages/mine/index')
wx.switchTab({
url: '/pages/mine/index'
})
})
} else {
// tip.error(login.data.message)
}
}
//頁(yè)面加載的時(shí)候獲取code
async onShow() {
let ret = await wepy.login();
console.log(ret)
this.code = ret.code
}