大家好，今天我來為大家分享一下， Linux 命令查詢小程序中的 WePY 云開發(fā)實踐。
— Bestony
轉(zhuǎn)自：云開發(fā)x https://mp.weixin.qq.com/s/0jhMBBNpD_-lfQLQ0pcBqA
作者： Bestony
大家好，今天我來為大家分享一下， Linux 命令查詢小程序中的 WePY 云開發(fā)實踐。
Why WePY
首先，先分享一下為什么要選擇 WePY ？
在項目開始進(jìn)行選型的時候，我可選的底層框架有 WePy、MPVue、Taro、MinUI，這些框架都是工程化做得很好的框架，可以幫助小程序項目長期進(jìn)行維護(hù)。其中，Taro 因為采用的是我所不熟悉的 React ，所以從一開始就被排除。MPVue 我看了以后，它更多是給 Web 開發(fā)者提供小程序轉(zhuǎn)化工具，而不是給小程序開發(fā)者提供類 Vue 工具，所以，也被我排除。 MinUI 由于其本身僅僅是提供了組件化的方案和 npm 、ES6/ES7 的支持，其他的命令依然要延續(xù)使用小程序的函數(shù)，并沒有提供更多的支持，整個生態(tài)尚不豐富，所以就又排除掉了 MinUI。
到最后，我選擇了 WePY 。在下手之前，我研究了一下 WePY，來看看 WePY 中都有哪些優(yōu)點。 總的來說，我認(rèn)為 WePY 的優(yōu)點如下：
- 提供了類似 Vue 的組件化方案：組件化開發(fā)可以提升項目的可維護(hù)程度，隨著你開發(fā)周期的變長，組件化會非常大的影響你的開發(fā)體驗。
- 提供了 ES6/ES7 語法的支持：JavaScript 為人詬病的回調(diào)在 ES6、ES7 中有了更加優(yōu)雅的實現(xiàn)。
- 提供了 Vue 的生態(tài)：和 MinUI 的孤軍奮戰(zhàn)不同，WePY 有很多 Vue 社區(qū)生態(tài)的產(chǎn)品，比如 WePY-Redux、RxWX 等一系列 Vue 下，大家習(xí)慣使用的工具，這使得開發(fā)的流程更加順暢，開發(fā)體驗也更加一致。
- 對原生 API 的優(yōu)化：在小程序官方提供的接口中，很多都是提供的回調(diào)模式，并不提供 Promise ，我們在使用時往往需要自己再重新包一層，比較麻煩。在 WePY 當(dāng)中， WePY 官方幫我們封裝好了一層，你可以直接使用 WePY 所封裝好的方法，減少了封裝的工作量。
- Vue 習(xí)慣的數(shù)據(jù)設(shè)定：在 WePY 中，你可以使用 this.xxx=xxx 的語法進(jìn)行賦值操作，相比于原生的 setData 方法，有更加舒適的語法，可維護(hù)性也更高。
- 提供了 computed 方法：在開發(fā)小程序的時候，我們難免要對數(shù)據(jù)進(jìn)行格式化，在傳統(tǒng)的小程序開發(fā)中，我們需要對數(shù)據(jù)進(jìn)行 map ，再進(jìn)行修改，但是用了 WePY 以后，我們可以使用 computed 計算屬性來進(jìn)行數(shù)據(jù)的格式化和調(diào)整，大大的提升了代碼的可讀性。
上述是我所看重的 WePY 優(yōu)勢，接下來，我來說一說如何在 WePY 中使用云開發(fā)。
云開發(fā) in WePY
我寫過很多小程序，也講過一些小程序課程，經(jīng)常會有人問我，XXX 可以用在 XXX 里么，放在這個場景中，就是云開發(fā)可以用在 WePY 中么？
答案當(dāng)然是肯定的。
看待這個問題，你應(yīng)該首先搞清楚，云開發(fā)所提供的到底是什么？
云開發(fā)提供的是數(shù)據(jù)存儲、文件存儲和計算能力
和 WePY 的定位提供微信小程序組件化開發(fā)的能力并不沖突，所以， WePY 和云開發(fā)并不沖突，你可以在 WePY 中使用云開發(fā)。
在 WePY 項目中啟用云開發(fā)
由于 WePY 本身并沒有提供云開發(fā)的模板（不過你現(xiàn)在可以使用 wepy init cloudkits/wepy-tcb-demo 命令來初始化一個包含了云開發(fā)示例的 WePY 項目），所以，我們需要自己在項目中添加云開發(fā)。
云開發(fā)本身而言，是集成在 wx. 的名字空間內(nèi)的，所以無需配置可以直接使用 wx.cloud.xxx 來調(diào)用云開發(fā)的各項命令。此外，比較特殊的是，你需要指定一下云函數(shù)目錄，來確保微信小程序開發(fā)者工具能夠識別出云函數(shù)目錄。
此處需要注意的是， 因為云開發(fā)的命令本身就支持 Promise 和 Callback ，所以你可以直接使用 wx.cloud 來調(diào)用，而不是使用 wepy.cloud 來調(diào)用。WePY 官方也沒有針對云開發(fā)進(jìn)行再一次的封裝。
你可以在小程序項目的根目錄創(chuàng)建一個新的目錄 cloudfunctions ，然后在 project.config.json 中添加一個新的配置項目 cloudfunctionRoot，并將其值設(shè)置為 cloudfunctions。這樣，微信小程序開發(fā)者工具就能夠識別出這個目錄是云函數(shù)的目錄，并為其加上特殊的目錄名。
此處需要注意的是，云函數(shù)應(yīng)當(dāng)放在小程序的源碼目錄 src 之外，不然會導(dǎo)致編譯報錯。我試圖尋找 wepy.config.js 的中關(guān)于屏蔽編譯檢查目錄的配置項目，但是沒有找到，所以我直接將這個目錄放在了項目根目錄，云函數(shù)和小程序源碼的 src 同級。
這樣，你就完成了 WePY 中的小程序·云開發(fā)的引用。
在開發(fā)過程中踩過的坑
this 賦值應(yīng)先設(shè)置 data
使用 WePY 開發(fā)時，我們使用 this.xxx 來修改數(shù)據(jù)的值，但是在我一開始開發(fā)的時候，遇見的第一個問題時，使用 this.xxx 無法設(shè)置數(shù)據(jù)的值，在小程序界面中無法獲取到對應(yīng)的值。
后續(xù)才發(fā)現(xiàn)，原來如果你希望由 WePY 替你更新和管理數(shù)據(jù)，你需要將要傳遞到頁面的數(shù)據(jù)放在頁面實例中的 data 對象中，這樣 WePY 才會幫你更新和管理數(shù)據(jù)。由于在文檔中并沒有注明這一點，所以我踩在了坑里。
后續(xù)對 WePY 進(jìn)行分析后，理解了這樣的做法，由于 WePY 中沒有使用 setData，而是直接調(diào)用 this.xxx 來進(jìn)行修改，那么 WePY 就需要知道哪些變量應(yīng)該發(fā)送到頁面，否則，將所有 this 中的數(shù)據(jù)都傳遞到頁面中，將會導(dǎo)致傳遞的時間過長，容易讓小程序退出，這時，使用 data 來限定數(shù)據(jù)的方法就可以理解了。
如何處理純移動端數(shù)據(jù)的管理？
截止到目前，云開發(fā)并沒有提供除了微信小程序官方控制臺以外的管理方式，這就使得我們在構(gòu)建應(yīng)用的時候備受掣肘。
為了更好的提供服務(wù)，我們決定修改產(chǎn)品的模式。一開始我們考慮用戶提交翻譯，團(tuán)隊進(jìn)行審核的模式，但是考慮到?jīng)]有管理端和開發(fā)成本的問題。我們決定調(diào)整一下模式，改為社區(qū)自凈化。我們完全開放編輯的能力，任何用戶都可以提交數(shù)據(jù)。同時，也可以在國內(nèi)實踐一個完全由社區(qū)維護(hù)的應(yīng)用。
但是，這種任何人都可以提交數(shù)據(jù)很有可能被人所利用，所以，我們引入了微信小程序官方提供的內(nèi)容安全接口，來進(jìn)行文本的安全檢測，從而，盡可能的規(guī)避一些違法違規(guī)內(nèi)容對小程序的影響。
如果你用這個接口，你就會知道，接口的調(diào)用時需要使用 access_token，而微信的 access_token獲取接口既有發(fā)起調(diào)用的地址限制（不能在小程序中調(diào)用），也有接口請求頻率的限制（請求過快可能會導(dǎo)致無法獲取到 Token），因此，我們決定使用云函數(shù)來處理這部分的功能。
我們在云函數(shù)內(nèi)使用 got 這個庫來請求微信提供的接口，進(jìn)行 access_token 的獲取，以及內(nèi)容安全的檢測。并且，為了確保 access_token 的請求不會頻率過快，所以我們加入了一些代碼，來進(jìn)行 token 的緩存。
const result = await cache.get(); // cache 為對應(yīng) collection 的引用
const now = (new Date).valueOf();
const nextTime = now 5400000;
let accessToken = \’\’
if (!result.data.length) {
console.log(\”進(jìn)入初次獲取的流程\”)
const result = await got(accessTokenUrl)
accessToken = JSON.parse(result.body).access_token
await cache.add({
data: {
token: accessToken,
time: nextTime
}
})
} else {
if (result.data[0].time > now) {
console.log(\”已有 token 有效\”)
accessToken = result.data[0].token
} else {
console.log(\”已有 token 無效\”)
const tokenResult = await got(accessTokenUrl)
accessToken = JSON.parse(tokenResult.body).access_token
await cache.doc(result.data[0]._id).update({
data:{
token: accessToken,
time: nextTime
}
})
}
}
通過上述代碼，實現(xiàn)了在云數(shù)據(jù)庫中存儲一個 token ，并比對其過期時間，如果發(fā)現(xiàn) token 即將過期，就更新 token ，確?？梢哉Ｕ埱蟆?/p>
總結(jié)
回顧整個小程序的開發(fā)過程，WePY 的便利使得整個開發(fā)的過程無比的流暢，云開發(fā)的快速迭代的優(yōu)勢，幫助整個應(yīng)用快速上線。Linux 小程序到正式發(fā)布時，總體的開發(fā)時長不超過 24 小時！
要體驗此小程序，可以用微信掃描識別以下二維碼：
點擊“了解更多”可訪問文內(nèi)鏈接
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請發(fā)送郵件至 舉報，一經(jīng)查實，本站將立刻刪除。
