Linux 命令查詢小程序中的 WePY 云開發(fā)實(shí)踐
大家好,今天我來為大家分享一下, 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 ,確??梢哉U埱?。
總結(jié)
回顧整個(gè)小程序的開發(fā)過程,WePY 的便利使得整個(gè)開發(fā)的過程無比的流暢,云開發(fā)的快速迭代的優(yōu)勢,幫助整個(gè)應(yīng)用快速上線。Linux 小程序到正式發(fā)布時(shí),總體的開發(fā)時(shí)長不超過 24 小時(shí)!
相關(guān)文章
centos 7 安裝卸載apache(httpd)服務(wù)的詳細(xì)步驟
前面我們已經(jīng)安裝好了mysql,今天安裝httpd,然后試著訪問以下,由于博主已經(jīng)安裝過一次,所以先說卸載,再說安裝,需要的朋友可以參考下2020-07-07Ubuntu Apahce2.4下無法訪問JS目錄的問題解決
這篇文章主要給大家介紹了如何解決Ubuntu Apahce2.4下無法訪問JS目錄的問題,文中介紹的非常詳細(xì),相信對大家具有一定的參考價(jià)值,需要的朋友們下面來一起看看吧。2017-03-03crontab定時(shí)任務(wù)不執(zhí)行的一些原因總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于crontab定時(shí)任務(wù)不執(zhí)行的一些原因,對每種可能發(fā)生的原因都給出了解決方法,對遇到這個(gè)問題的朋友們具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01阿里云云服務(wù)器Linux系統(tǒng)掛載數(shù)據(jù)盤圖文教程
這篇文章主要介紹了阿里云云服務(wù)器Linux系統(tǒng)掛載數(shù)據(jù)盤圖文教程,阿里云服務(wù)器一般需要購買額外的數(shù)據(jù)盤,本文就講解如何掛載使用額外的數(shù)據(jù)盤,需要的朋友可以參考下2014-09-09Linux命令學(xué)習(xí)總結(jié)之rm命令
rm命令用來刪除Linux系統(tǒng)中的文件或目錄。通常情況下rm不會刪除目錄,你必須通過指定參數(shù)-r或-R來刪除目錄。接下來通過本文給大家分享Linux命令學(xué)習(xí)總結(jié)之rm命令,對linux rm命令相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01CentoS6.5環(huán)境下redis4.0.1(stable)安裝和主從復(fù)制配置方法
這篇文章主要介紹了CentoS6.5環(huán)境下redis4.0.1(stable)安裝和主從復(fù)制配置方法,結(jié)合實(shí)例形式分析了CentoS6.5下redis4.0.1的安裝和主從復(fù)制配置相關(guān)步驟、命令與操作注意事項(xiàng),需要的朋友可以參考下2018-04-04