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

Why WePY

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

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

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

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

2.提供了 ES6/ES7 語(yǔ)法的支持：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í)慣使用的工具，這使得開(kāi)發(fā)的流程更加順暢，開(kāi)發(fā)體驗(yàn)也更加一致。

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

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

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

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

云開(kāi)發(fā) in WePY

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

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

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

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

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

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

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

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

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

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

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

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

在開(kāi)發(fā)過(guò)程中踩過(guò)的坑

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

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

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

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

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

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

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

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

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

我們?cè)谠坪瘮?shù)內(nèi)使用 got 這個(gè)庫(kù)來(lái)請(qǐng)求微信提供的接口，進(jìn)行 access_token 的獲取，以及內(nèi)容安全的檢測(cè)。并且，為了確保 access_token 的請(qǐng)求不會(huì)頻率過(guò)快，所以我們加入了一些代碼，來(lái)進(jìn)行 token 的緩存。

const result = await cache.get(); // cache 為對(duì)應(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 無(wú)效")
  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
   }
  })
 }
}

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

總結(jié)

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

最新評(píng)論