歡迎光臨
每天分享高質量文章

雲開發與 WePY,快速實現 Linux 命令查詢小程式

大家好,今天我來為大家分享一下, Linux 命令查詢小程式中的 WePY 雲開發實踐。

— Bestony

 

轉自:雲開發x作者:雲開發x / Bestony | https://mp.weixin.qq.com/s/0jhMBBNpD_-lfQLQ0pcBqA

大家好,今天我來為大家分享一下, Linux 命令查詢小程式中的 WePY 雲開發實踐。

Why WePY

首先,先分享一下為什麼要選擇 WePY ?

在專案開始進行選型的時候,我可選的底層框架有 WePyMPVueTaroMinUI,這些框架都是工程化做得很好的框架,可以幫助小程式專案長期進行維護。其中,Taro 因為採用的是我所不熟悉的 React ,所以從一開始就被排除。MPVue 我看了以後,它更多是給 Web 開發者提供小程式轉化工具,而不是給小程式開發者提供類 Vue 工具,所以,也被我排除。 MinUI 由於其本身僅僅是提供了組件化的方案和 npm 、ES6/ES7 的支持,其他的命令依然要延續使用小程式的函式,並沒有提供更多的支持,整個生態尚不豐富,所以就又排除掉了 MinUI。

到最後,我選擇了 WePY 。在下手之前,我研究了一下 WePY,來看看 WePY 中都有哪些優點。 總的來說,我認為 WePY 的優點如下:

1. 提供了類似 Vue 的組件化方案:組件化開發可以提升專案的可維護程度,隨著你開發周期的變長,組件化會非常大的影響你的開發體驗。
2. 提供了 ES6/ES7 語法的支持:JavaScript 為人詬病的回呼在 ES6、ES7 中有了更加優雅的實現。
3. 提供了 Vue 的生態:和 MinUI 的孤軍奮戰不同,WePY 有很多 Vue 社區生態的產品,比如 WePY-Redux、RxWX 等一系列 Vue 下,大家習慣使用的工具,這使得開發的流程更加順暢,開發體驗也更加一致。
4. 對原生 API 的優化:在小程式官方提供的接口中,很多都是提供的回呼樣式,並不提供 Promise ,我們在使用時往往需要自己再重新包一層,比較麻煩。在 WePY 當中, WePY 官方幫我們封裝好了一層,你可以直接使用 WePY 所封裝好的方法,減少了封裝的工作量。
5. Vue 習慣的資料設定:在 WePY 中,你可以使用 this.xxx=xxx 的語法進行賦值操作,相比於原生的 setData 方法,有更加舒適的語法,可維護性也更高。
6. 提供了 computed 方法:在開發小程式的時候,我們難免要對資料進行格式化,在傳統的小程式開發中,我們需要對資料進行 map ,再進行修改,但是用了 WePY 以後,我們可以使用 computed 計算屬性來進行資料的格式化和調整,大大的提升了代碼的可讀性。

上述是我所看重的 WePY 優勢,接下來,我來說一說如何在 WePY 中使用雲開發。

雲開發 in WePY

我寫過很多小程式,也講過一些小程式課程,經常會有人問我,XXX 可以用在 XXX 里麽,放在這個場景中,就是雲開發可以用在 WePY 中麽?

答案當然是肯定的。

看待這個問題,你應該首先搞清楚,雲開發所提供的到底是什麼?

雲開發提供的是資料儲存、檔案儲存和計算能力

和 WePY 的定位提供微信小程式組件化開發的能力並不衝突,所以, WePY 和雲開發並不衝突,你可以在 WePY 中使用雲開發。

在 WePY 專案中啟用雲開發

由於 WePY 本身並沒有提供雲開發的模板(不過你現在可以使用 wepy init cloudkits/wepy-tcb-demo 命令來初始化一個包含了雲開發示例的 WePY 專案),所以,我們需要自己在專案中添加雲開發。

雲開發本身而言,是集成在 wx. 的名字空間內的,所以無需配置可以直接使用 wx.cloud.xxx 來呼叫雲開發的各項命令。此外,比較特殊的是,你需要指定一下雲函式目錄,來確保微信小程式開發者工具能夠識別出雲函式目錄。

此處需要註意的是, 因為雲開發的命令本身就支持 Promise 和 Callback ,所以你可以直接使用 wx.cloud 來呼叫,而不是使用 wepy.cloud 來呼叫。WePY 官方也沒有針對雲開發進行再一次的封裝。

你可以在小程式專案的根目錄創建一個新的目錄 cloudfunctions ,然後在 project.config.json 中添加一個新的配置專案 cloudfunctionRoot,並將其值設置為 cloudfunctions。這樣,微信小程式開發者工具就能夠識別出這個目錄是雲函式的目錄,併為其加上特殊的目錄名。

此處需要註意的是,雲函式應當放在小程式的原始碼目錄 src 之外,不然會導致編譯報錯。我試圖尋找 wepy.config.js 的中關於屏蔽編譯檢查目錄的配置專案,但是沒有找到,所以我直接將這個目錄放在了專案根目錄,雲函式和小程式原始碼的 src 同級。

這樣,你就完成了 WePY 中的小程式·雲開發的取用。

在開發過程中踩過的坑

this 賦值應先設置 data

使用 WePY 開發時,我們使用 this.xxx 來修改資料的值,但是在我一開始開發的時候,遇見的第一個問題時,使用 this.xxx 無法設置資料的值,在小程式界面中無法獲取到對應的值。

後續才發現,原來如果你希望由 WePY 替你更新和管理資料,你需要將要傳遞到頁面的資料放在頁面實體中的 data 物件中,這樣 WePY 才會幫你更新和管理資料。由於在文件中並沒有註明這一點,所以我踩在了坑裡。

後續對 WePY 進行分析後,理解了這樣的做法,由於 WePY 中沒有使用 setData,而是直接呼叫 this.xxx 來進行修改,那麼 WePY 就需要知道哪些變數應該發送到頁面,否則,將所有 this 中的資料都傳遞到頁面中,將會導致傳遞的時間過長,容易讓小程式退出,這時,使用 data 來限定資料的方法就可以理解了。

如何處理純移動端資料的管理?

截止到目前,雲開發並沒有提供除了微信小程式官方控制台以外的管理方式,這就使得我們在構建應用的時候備受掣肘。

為了更好的提供服務,我們決定修改產品的樣式。一開始我們考慮用戶提交翻譯,團隊進行審核的樣式,但是考慮到沒有管理端和開發成本的問題。我們決定調整一下樣式,改為社區自凈化。我們完全開放編輯的能力,任何用戶都可以提交資料。同時,也可以在國內實踐一個完全由社區維護的應用。

但是,這種任何人都可以提交資料很有可能被人所利用,所以,我們引入了微信小程式官方提供的內容安全接口,來進行文本的安全檢測,從而,盡可能的規避一些違法違規內容對小程式的影響。

如果你用這個接口,你就會知道,接口的呼叫時需要使用 access_token,而微信的 access_token 獲取接口既有發起呼叫的地址限制(不能在小程式中呼叫),也有接口請求頻率的限制(請求過快可能會導致無法獲取到 Token),因此,我們決定使用雲函式來處理這部分的功能。

我們在雲函式內使用 got 這個庫來請求微信提供的接口,進行 access_token 的獲取,以及內容安全的檢測。並且,為了確保 access_token 的請求不會頻率過快,所以我們加入了一些代碼,來進行 token 的快取。

  1. const result = await cache.get(); // cache 為對應 collection 的取用
  2. const now = (new Date).valueOf();
  3. const nextTime = now + 5400000;
  4. let accessToken = ''
  5. if (!result.data.length) {
  6. console.log("進入初次獲取的流程")
  7.   const result = await got(accessTokenUrl)
  8.  accessToken = JSON.parse(result.body).access_token
  9.  await cache.add({
  10.    data: {
  11.      token: accessToken,
  12.      time: nextTime
  13.    }
  14.  })
  15. } else {
  16.  if (result.data[0].time > now) {
  17.    console.log("已有 token 有效")
  18.    accessToken = result.data[0].token
  19.  } else {
  20.    console.log("已有 token 無效")
  21.    const tokenResult = await got(accessTokenUrl)
  22.    accessToken = JSON.parse(tokenResult.body).access_token
  23.    await cache.doc(result.data[0]._id).update({
  24.      data:{
  25.        token: accessToken,
  26.        time: nextTime
  27.      }
  28.    })
  29.  }
  30. }

通過上述代碼,實現了在雲資料庫中儲存一個 token ,並比對其過期時間,如果發現 token 即將過期,就更新 token ,確保可以正常請求。

總結

回顧整個小程式的開發過程,WePY 的便利使得整個開發的過程無比的流暢,雲開發的快速迭代的優勢,幫助整個應用快速上線。Linux 小程式到正式發佈時,總體的開發時長不超過 24 小時!

要體驗此小程式,可以用微信掃描識別以下二維碼:

赞(0)

分享創造快樂