大家好，今天我來為大家分享一下， Linux 命令查詢小程序中的 WePY 云開發(fā)實(shí)踐。

Why WePY

首先，先分享一下為什么要選擇 WePY ？

在項(xiàng)目開始進(jìn)行選型的時(shí)候，我可選的底層框架有 WePy、MPVue、Taro、MinUI，這些框架都是工程化做得很好的框架，可以幫助小程序項(xiàng)目長期進(jìn)行維護(hù)。其中，Taro 因?yàn)椴捎玫氖俏宜皇煜さ?React ，所以從一開始就被排除。MPVue 我看了以后，它更多是給 Web 開發(fā)者提供小程序轉(zhuǎn)化工具，而不是給小程序開發(fā)者提供類 Vue 工具，所以，也被我排除。 MinUI 由于其本身僅僅是提供了組件化的方案和 npm 、ES6/ES7 的支持，其他的命令依然要延續(xù)使用小程序的函數(shù)，并沒有提供更多的支持，整個(gè)生態(tài)尚不豐富，所以就又排除掉了 MinUI。

到最后，我選擇了 WePY 。在下手之前，我研究了一下 WePY，來看看 WePY 中都有哪些優(yōu)點(diǎn)。 總的來說，我認(rèn)為 WePY 的優(yōu)點(diǎn)如下：

1.提供了類似 Vue 的組件化方案：組件化開發(fā)可以提升項(xiàng)目的可維護(hù)程度，隨著你開發(fā)周期的變長，組件化會非常大的影響你的開發(fā)體驗(yàn)。

2.提供了 ES6/ES7 語法的支持：JavaScript 為人詬病的回調(diào)在 ES6、ES7 中有了更加優(yōu)雅的實(shí)現(xiàn)。

3.提供了 Vue 的生態(tài)：和 MinUI 的孤軍奮戰(zhàn)不同，WePY 有很多 Vue 社區(qū)生態(tài)的產(chǎn)品，比如 WePY-Redux、RxWX 等一系列 Vue 下，大家習(xí)慣使用的工具，這使得開發(fā)的流程更加順暢，開發(fā)體驗(yàn)也更加一致。

4.對原生 API 的優(yōu)化：在小程序官方提供的接口中，很多都是提供的回調(diào)模式，并不提供 Promise ，我們在使用時(shí)往往需要自己再重新包一層，比較麻煩。在 WePY 當(dāng)中， WePY 官方幫我們封裝好了一層，你可以直接使用 WePY 所封裝好的方法，減少了封裝的工作量。

5.Vue 習(xí)慣的數(shù)據(jù)設(shè)定：在 WePY 中，你可以使用 this.xxx=xxx 的語法進(jìn)行賦值操作，相比于原生的 setData 方法，有更加舒適的語法，可維護(hù)性也更高。

6.提供了 computed 方法：在開發(fā)小程序的時(shí)候，我們難免要對數(shù)據(jù)進(jìn)行格式化，在傳統(tǒng)的小程序開發(fā)中，我們需要對數(shù)據(jù)進(jìn)行 map ，再進(jìn)行修改，但是用了 WePY 以后，我們可以使用 computed 計(jì)算屬性來進(jìn)行數(shù)據(jù)的格式化和調(diào)整，大大的提升了代碼的可讀性。

上述是我所看重的 WePY 優(yōu)勢，接下來，我來說一說如何在 WePY 中使用云開發(fā)。

云開發(fā) in WePY

我寫過很多小程序，也講過一些小程序課程，經(jīng)常會有人問我，XXX 可以用在 XXX 里么，放在這個(gè)場景中，就是云開發(fā)可以用在 WePY 中么？

答案當(dāng)然是肯定的。

看待這個(gè)問題，你應(yīng)該首先搞清楚，云開發(fā)所提供的到底是什么？

云開發(fā)提供的是數(shù)據(jù)存儲、文件存儲和計(jì)算能力

和 WePY 的定位提供微信小程序組件化開發(fā)的能力并不沖突，所以， WePY 和云開發(fā)并不沖突，你可以在 WePY 中使用云開發(fā)。

在 WePY 項(xiàng)目中啟用云開發(fā)

由于 WePY 本身并沒有提供云開發(fā)的模板（不過你現(xiàn)在可以使用 wepy init cloudkits/wepy-tcb-demo 命令來初始化一個(gè)包含了云開發(fā)示例的 WePY 項(xiàng)目），所以，我們需要自己在項(xiàng)目中添加云開發(fā)。

云開發(fā)本身而言，是集成在 wx. 的名字空間內(nèi)的，所以無需配置可以直接使用 wx.cloud.xxx 來調(diào)用云開發(fā)的各項(xiàng)命令。此外，比較特殊的是，你需要指定一下云函數(shù)目錄，來確保微信小程序開發(fā)者工具能夠識別出云函數(shù)目錄。

此處需要注意的是， 因?yàn)樵崎_發(fā)的命令本身就支持 Promise 和 Callback ，所以你可以直接使用 wx.cloud 來調(diào)用，而不是使用 wepy.cloud 來調(diào)用。WePY 官方也沒有針對云開發(fā)進(jìn)行再一次的封裝。

你可以在小程序項(xiàng)目的根目錄創(chuàng)建一個(gè)新的目錄 cloudfunctions ，然后在 project.config.json 中添加一個(gè)新的配置項(xiàng)目 cloudfunctionRoot，并將其值設(shè)置為 cloudfunctions。這樣，微信小程序開發(fā)者工具就能夠識別出這個(gè)目錄是云函數(shù)的目錄，并為其加上特殊的目錄名。

此處需要注意的是，云函數(shù)應(yīng)當(dāng)放在小程序的源碼目錄 src 之外，不然會導(dǎo)致編譯報(bào)錯(cuò)。我試圖尋找 wepy.config.js 的中關(guān)于屏蔽編譯檢查目錄的配置項(xiàng)目，但是沒有找到，所以我直接將這個(gè)目錄放在了項(xiàng)目根目錄，云函數(shù)和小程序源碼的 src 同級。

這樣，你就完成了 WePY 中的小程序·云開發(fā)的引用。

在開發(fā)過程中踩過的坑

this 賦值應(yīng)先設(shè)置 data

使用 WePY 開發(fā)時(shí)，我們使用 this.xxx 來修改數(shù)據(jù)的值，但是在我一開始開發(fā)的時(shí)候，遇見的第一個(gè)問題時(shí)，使用 this.xxx 無法設(shè)置數(shù)據(jù)的值，在小程序界面中無法獲取到對應(yīng)的值。

后續(xù)才發(fā)現(xiàn)，原來如果你希望由 WePY 替你更新和管理數(shù)據(jù)，你需要將要傳遞到頁面的數(shù)據(jù)放在頁面實(shí)例中的 data 對象中，這樣 WePY 才會幫你更新和管理數(shù)據(jù)。由于在文檔中并沒有注明這一點(diǎn)，所以我踩在了坑里。

后續(xù)對 WePY 進(jìn)行分析后，理解了這樣的做法，由于 WePY 中沒有使用 setData，而是直接調(diào)用 this.xxx 來進(jìn)行修改，那么 WePY 就需要知道哪些變量應(yīng)該發(fā)送到頁面，否則，將所有 this 中的數(shù)據(jù)都傳遞到頁面中，將會導(dǎo)致傳遞的時(shí)間過長，容易讓小程序退出，這時(shí)，使用 data 來限定數(shù)據(jù)的方法就可以理解了。

如何處理純移動(dòng)端數(shù)據(jù)的管理？

截止到目前，云開發(fā)并沒有提供除了微信小程序官方控制臺以外的管理方式，這就使得我們在構(gòu)建應(yīng)用的時(shí)候備受掣肘。

為了更好的提供服務(wù)，我們決定修改產(chǎn)品的模式。一開始我們考慮用戶提交翻譯，團(tuán)隊(duì)進(jìn)行審核的模式，但是考慮到?jīng)]有管理端和開發(fā)成本的問題。我們決定調(diào)整一下模式，改為社區(qū)自凈化。我們完全開放編輯的能力，任何用戶都可以提交數(shù)據(jù)。同時(shí)，也可以在國內(nèi)實(shí)踐一個(gè)完全由社區(qū)維護(hù)的應(yīng)用。

但是，這種任何人都可以提交數(shù)據(jù)很有可能被人所利用，所以，我們引入了微信小程序官方提供的內(nèi)容安全接口，來進(jìn)行文本的安全檢測，從而，盡可能的規(guī)避一些違法違規(guī)內(nèi)容對小程序的影響。

如果你用這個(gè)接口，你就會知道，接口的調(diào)用時(shí)需要使用 access_token，而微信的 access_token 獲取接口既有發(fā)起調(diào)用的地址限制（不能在小程序中調(diào)用），也有接口請求頻率的限制（請求過快可能會導(dǎo)致無法獲取到 Token），因此，我們決定使用云函數(shù)來處理這部分的功能。

我們在云函數(shù)內(nèi)使用 got 這個(gè)庫來請求微信提供的接口，進(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
   }
  })
 }
}

通過上述代碼，實(shí)現(xiàn)了在云數(shù)據(jù)庫中存儲一個(gè) token ，并比對其過期時(shí)間，如果發(fā)現(xiàn) token 即將過期，就更新 token ，確?？梢哉Ｕ埱?。

總結(jié)

回顧整個(gè)小程序的開發(fā)過程，WePY 的便利使得整個(gè)開發(fā)的過程無比的流暢，云開發(fā)的快速迭代的優(yōu)勢，幫助整個(gè)應(yīng)用快速上線。Linux 小程序到正式發(fā)布時(shí)，總體的開發(fā)時(shí)長不超過 24 小時(shí)！

最新評論