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

架構師springboot發表於2019-04-09
äºå¼åä¸WePYï¼å¿«éå®ç°Linuxå½ä»¤æ¥è¯¢å°ç¨åº

大家好,今天我來為大家分享一下, 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 的快取。

const result = await cache.get(); // cache 為對應 collection 的引用const now = (new Date).valueOf();const nextTime = now + 5400000;let accessToken = ''if (!result.data.length) {  console.log("進入初次獲取的流程")  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      }    })  }}複製程式碼

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

總結

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

覺得不錯請點贊支援,歡迎留言或進我的個人群855801563領取【架構資料專題目合集90期】、【BATJTMD大廠JAVA面試真題1000+】,本群專用於學習交流技術、分享面試機會,拒絕廣告,我也會在群內不定期答題、探討。


相關文章