微信小程序開發(fā)相對不難，云開發(fā)也大大降低了開發(fā)成本畸悬，本文為開發(fā)簡易的個(gè)人主體小程序時(shí)遇到的一些讓人蛋疼的地方惫谤，更多復(fù)雜的高級(jí)組件由于開發(fā)主體暫未觸及。
一：小程序內(nèi)跳轉(zhuǎn)關(guān)聯(lián)公眾號(hào)
關(guān)于這點(diǎn)的代碼內(nèi)容非常簡單际乘，使用公眾號(hào)關(guān)注組件即可
<official-account></official-account>
但是，需要注意的是小程序注冊時(shí)使用的個(gè)人主體(不考慮企業(yè)主體)必須和公眾號(hào)的個(gè)人主體為同一個(gè)漂佩，而且目前微信公眾平臺(tái)暫不支持個(gè)人主體遷移到另一個(gè)個(gè)人主體脖含，所以罪塔，如果需要該功能，請務(wù)必注意注冊時(shí)使用同一主體养葵，否則該行代碼不會(huì)生效征堪。另外，這行代碼的顯示效果需要對應(yīng)的場景值才會(huì)生效关拒。
https://developers.weixin.qq.com/miniprogram/dev/component/official-account.html
二：云函數(shù)以及云數(shù)據(jù)庫的限制
小程序調(diào)用云數(shù)據(jù)庫接口限制20條數(shù)據(jù)佃蚜，云函數(shù)限制100條數(shù)據(jù)。
這意味著如果你需要頁面使用[wx:for]方法顯示數(shù)據(jù)庫查詢結(jié)果着绊，那么谐算，這個(gè)頁面只會(huì)顯示查詢結(jié)果的前20條，用云函數(shù)也只會(huì)顯示前100條归露。
建議的解決方法：onReachBottom洲脂，在頁面拉到底部時(shí)觸發(fā)，再次查詢數(shù)據(jù)庫并跳過20條數(shù)據(jù)
例：
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
search_result: [],
goods_num: 0
},
onReachBottom: function () {
wx.showLoading({
title: '刷新中剧包！',
duration: 1000
})
let x = this.data.goods_num + 20
console.log(x)
let old_data = this.data.search_result
db.collection('goods').skip(x).where(_.and([{
state: true
}, {
stock: _.gt(0)
}])).get()
.then(res => {
this.setData({
search_result: old_data.concat(res.data),
goods_num: x
})
console.log(res.data)
})
.catch(err => {
console.error(err)
})
}
當(dāng)然恐锦，使用分頁方法也可以實(shí)現(xiàn)。
三：異步與同步
微信小程序默認(rèn)的數(shù)據(jù)庫操作為異步操作玄捕，致使有時(shí)需要實(shí)時(shí)頁面修改刷新時(shí)會(huì)出現(xiàn)修改無效的情況踩蔚。
個(gè)人建議不要修改異步為同步，異步的價(jià)值顯而易見枚粘，所以，在個(gè)別需要同步操作的地方稍加修改即可飘蚯。
例：
db.collection('goods').where({
_id: t_key
}).update({
data: {
state: false
}
}).then(res => {
db.collection('goods')
.get().then(res => {
this.setData({
search_result: res.data
});
console.log('res', res.data)
})
});
在進(jìn)行數(shù)據(jù)庫操作后馍迄，使用.then方法，方法內(nèi)的操作可以保證在update之后局骤。
四：vant組件之upload
主要關(guān)于圖片上傳功能攀圈，在vant weapp的官方文檔中，有關(guān)于此組件的具體使用方法峦甩。
然而仁锯，emmm耐量，官方給的方法貌似是錯(cuò)的。。摇锋。
https://youzan.github.io/vant-weapp/#/uploader
// 上傳圖片
uploadToCloud() {
wx.cloud.init();
const { fileList } = this.data;
if (!fileList.length) {
wx.showToast({ title: '請選擇圖片', icon: 'none' });
} else {
const uploadTasks = fileList.map((file, index) => this.uploadFilePromise(`my-photo${index}.png`, file));
Promise.all(uploadTasks)
.then(data => {
wx.showToast({ title: '上傳成功', icon: 'none' });
const newFileList = data.map(item => { url: item.fileID }); //就是這里
this.setData({ cloudPath: data, fileList: newFileList });
})
.catch(e => {
wx.showToast({ title: '上傳失敗', icon: 'none' });
console.log(e);
});
}
}
uploadFilePromise(fileName, chooseResult) {
return wx.cloud.uploadFile({
cloudPath: fileName,
filePath: chooseResult.path
});
}
箭頭函數(shù)后需要用(),所以正確的應(yīng)該是
const newFileList = data.map(item => ({ url: item.fileID }) );
這個(gè)真是被坑了好久。岸军。霎终。
五：navigateBack與onShow
關(guān)于頁面跳轉(zhuǎn)，由于小程序的路由擁有五六種跳轉(zhuǎn)方式诫欠，不再陳列涵卵，常見的即navigateTo和navigateBack浴栽。
頁面上左上角的返回按鈕默認(rèn)的為navigateBack，所以轿偎，當(dāng)你在主頁通過按鈕跳轉(zhuǎn)至編輯頁面典鸡，編輯成果后請務(wù)必使用navigateBack方法返回，否則頁面跳轉(zhuǎn)會(huì)非郴祷蓿混亂椿每。
例：
另外，使用navigateBack需要注意英遭，navigateBack后的頁面不會(huì)調(diào)用onLoad间护，所以當(dāng)你在編輯頁面編輯成果后使用navigateBack返回，使用onLoad方法挖诸，頁面是不會(huì)變化的汁尺，此時(shí)需要用到onShow方法。
以上即目前為止開發(fā)過程中遇到的小問題多律，個(gè)人觀點(diǎn)痴突，不喜勿擾。
經(jīng)過初體驗(yàn)微信小程序以后狼荞，相比傳統(tǒng)app開發(fā)辽装，確實(shí)擁有快速部署，火速上線的能力相味，但其封閉性也相信會(huì)讓眾多開發(fā)者頭疼不已拾积，很多功能無法實(shí)現(xiàn)，動(dòng)不動(dòng)的良性bug丰涉，等等拓巧，只能說，小程序還在發(fā)展一死，但是否是往更封閉的方向發(fā)展那就不得而知了肛度。
