李 想 張玉軍 余 謹(jǐn) 楊維昊
(遼寧科技大學(xué)計(jì)算機(jī)與軟件工程學(xué)院,遼寧 鞍山 114004)
小程序目前是有別于傳統(tǒng)Web App、HTML5、原生App 以及微信公眾號(hào)的一種新的應(yīng)用形式,帶給用戶一種用完就走到體驗(yàn),作為微信公眾平臺(tái)的重要組成,小程序是訂閱號(hào)與服務(wù)號(hào)的延伸。隨著微信小程序搞得風(fēng)風(fēng)火火,阿里巴巴和百度也開始提出自己的小程序。為什么新聞資訊類小程序更適合于微信小程序的開發(fā)而不適合支付寶、百度等。首先微信小程序與百度小程序和支付寶小程序的最主要區(qū)別之一是微信小程序借助自身優(yōu)勢有有龐大的流量和社交資源,與新聞資訊相輔相成。百度和支付寶兩家小程序,百度主要強(qiáng)調(diào)智能,建設(shè)自己的開放體系,支付寶則強(qiáng)調(diào)線上線下資源,工具性強(qiáng)。與他們大體相同的是Google 推出的快應(yīng)用,目前也得到了大部分手機(jī)廠商的支持,快應(yīng)用沒有流量,無法轉(zhuǎn)移,也是資訊類軟件不能設(shè)計(jì)在快應(yīng)用的主要原因。
研究報(bào)告顯示目前資訊類App 種,占多數(shù)的是在22-35 歲的年輕用戶群體,因此整個(gè)小程序設(shè)計(jì)風(fēng)格偏輕量化、品質(zhì)化、簡潔化、年輕化。頁面的扁平化設(shè)計(jì)方案,同樣層次,富有細(xì)節(jié),動(dòng)效精致為用戶提供便捷和高效的閱讀體驗(yàn)。對于熱門跟帖欄目,我們專門設(shè)計(jì)一個(gè)閱讀欄目,因?yàn)闊衢T跟帖是提高用戶黏性的主要功能之一。研究報(bào)告顯示用戶使用時(shí)間以及場景分布其中睡前占大部分,其次是上下班途中和課間休息中。超過半數(shù)用戶集中在睡前時(shí)間段閱讀新聞咨詢等,針對大部分用戶需求,夜間配色模式的設(shè)計(jì)尤為重要。為了迎合視覺柔和的原則,背景色和文字色對比度采用WCAG2.0 標(biāo)準(zhǔn),AAA級(jí)別的視覺標(biāo)準(zhǔn)。對于圖片本身的顏色來說,為了追尋效率,減少服務(wù)器計(jì)算,我們對圖片添加30%的深色遮罩來降低對視覺的刺激。一味追尋用戶健康的同時(shí),我們?yōu)榱肆糇∮脩?,通過使用庫克定律,通過測試,我們把用戶是用最少的功能進(jìn)行了刪除,讓用戶選擇數(shù)量變少,選擇所花時(shí)間縮短,使用常常激起用戶情緒的顏色作為點(diǎn)綴色,資訊信息首頁布局采用傳統(tǒng)的尼爾森F 視覺模型。
小程序原生云開發(fā)采用騰訊自己的服務(wù)器,提供免費(fèi)的額度,我們在開發(fā)時(shí)候可以采用Uni 的框架,然后采用UniCloud 提供的阿里云服務(wù)器,阿里云服務(wù)器提供的免費(fèi)額度會(huì)大于騰訊提供的免費(fèi)額度,未來擴(kuò)容也更容易。設(shè)計(jì)數(shù)據(jù)庫唯一主鍵采用存儲(chǔ)用戶唯一OpenId 的形式,通過微信開發(fā)平臺(tái)提供的getUserInfo 函數(shù)接口獲取code 在云函數(shù)通過code 去換取OpenId。小程序沒有cookie 機(jī)制,我們把登陸狀態(tài)存在微信給我們提供的storage 中。這里很多開發(fā)者一般把OpenId 作為登錄狀態(tài)進(jìn)行存儲(chǔ),對于一般小程序的開發(fā)不會(huì)造成用戶信息泄露的影響,但是一個(gè)用戶對應(yīng)一個(gè)OpenId,一些用戶非法獲取他人的OpenId 之后,可以通過OpenId 去獲取其他不安全小程序的用戶信息。這里我們采用的是 session_key 作為登陸狀態(tài)通過session_key 與OpenId 的一一對應(yīng)關(guān)系去存儲(chǔ)云數(shù)據(jù)庫數(shù)據(jù),圖1 是小程序登錄流程圖。
圖1 小程序登錄流程圖
云函數(shù)為了維護(hù)方便,采用ES6 面向?qū)ο缶幊?,在小程序編譯時(shí)勾選ES6 轉(zhuǎn)ES5 的選項(xiàng),以前我們在開發(fā)時(shí)候不采用ES6 語法是因?yàn)橐恍g覽器對于ES6 的支持不友好,而在小程序開發(fā)時(shí)我們不必考慮這個(gè)問題class一定比ES5 函數(shù)的寫法帶來更好的性能,代碼變少了,運(yùn)行速度變快了。云函數(shù)的開發(fā)語法規(guī)范類似與Node 或者我們可以采用純Node 開發(fā)。對于云數(shù)據(jù)庫表Schema 的設(shè)計(jì)開發(fā),資訊類小程序設(shè)計(jì)了七張表,分別是用戶表、Banner 表、用戶搜索記錄表、留言反饋表、熱搜表、資訊信息表以及評論記錄表。用戶搜索記錄表通過記錄搜索時(shí)間搜索內(nèi)容和搜索類別用來做簡單的用戶首頁非熱搜內(nèi)容推薦。
UniApp 開發(fā)過程中我們可以通過一些優(yōu)化手段加快速度,通過UniApp 與RN 和Flutter 的比較我們發(fā)現(xiàn)UniApp 的性能最弱,F(xiàn)lutter 性能最好,但是Flutter 上手最難,RN 采用React 語法,兩方面都適中。針對跨端能力Flutter 和RN 分別來自FaceBook 和谷歌沒有提供跨端編譯小程序的能力,目前國內(nèi)對開發(fā)者對小程序開發(fā)需求增加,目前RN 已經(jīng)有了支持小程序開發(fā)的能力,但是目前生態(tài)不如UniApp,UniApp 和RN 開發(fā)性能都遠(yuǎn)不及Flutter,因?yàn)镕lutter 采用Dart 語言無限接近原生開發(fā),擺脫了JsBridge 對邏輯層的渲染,采用自渲染引擎,大大提高了速度,沒有對Js 的渲染那么就只適合對跨端App 的開發(fā)。既然UniApp 是我們唯一的選擇,我們可以通過底層編譯分析,讓UniApp 編譯出App 或小程序的性能接近與RN。那就是我們盡量使用WEEX 渲染引擎的代碼,渲染成原生組件提高運(yùn)行性能。在開發(fā)時(shí)候如果只開發(fā)小程序端,避免使用uni 前綴開頭的接口和官方提供的庫函數(shù),目前官方所有的uni 前綴開頭的語法都支持wx 前綴的組件,避免使用可以減少運(yùn)行時(shí)的兼容判斷,從而提高性能。圖2 是Uni-App 編譯原理架構(gòu)圖,其實(shí)uni 擴(kuò)展組件及mpvue 兼容組件是上層代碼與底層編譯調(diào)用的中間層,上面的優(yōu)化方法主要就是通過減少這一層對各個(gè)平臺(tái)不同接口的兼容性,從而減少判斷,最終實(shí)現(xiàn)提升性能的效果。
圖2 Uni-App 編譯原理架構(gòu)圖
對于云服務(wù)的負(fù)載和請求情況,DCloud 官方為我們提供了可視化界面,記錄了對云函數(shù)調(diào)用情況,云數(shù)據(jù)庫的日志文件,以及整個(gè)云服務(wù)器的請求次數(shù),CDN 流量,請求延遲等。在我們傳統(tǒng)的資訊類網(wǎng)站或者App 開發(fā)時(shí),我們還要配置自己的域名,做備案,云服務(wù)后臺(tái)為我們提供了兩種選擇方式:其一是我們可以省略了備案的步驟,把小程序的審核發(fā)布交給公眾號(hào)服務(wù)平臺(tái),因?yàn)椴环弦?guī)定的小程序只能用于開發(fā)者測試,也就是我們根本不用去配置自己的域名。其二是很多已經(jīng)開發(fā)好的三方接口,我們可以繼續(xù)使用,但是這里我們要在云服務(wù)后天做跨域配置,添加第三方域名。這些對于一個(gè)普通的商戶的程序員來說已經(jīng)足夠使用了,但是對于很多經(jīng)常做開發(fā)的開發(fā)者來說還遠(yuǎn)遠(yuǎn)不夠,因?yàn)楹芏鄷r(shí)候我們寫一個(gè)服務(wù)接口可以給很多程序同時(shí)通過服務(wù),用云開發(fā)的方式每一套云函數(shù)都只能對應(yīng)本小程序的某個(gè)請求。DCloud 也給我們提供了解決方案,首先我們也要配置相應(yīng)的跨域請求,讓第三方請求時(shí)不被攔截,然后我們在云控制臺(tái)后臺(tái)進(jìn)入我們目前正在使用的云服務(wù)器找到云函數(shù)的詳情頁面,在云函數(shù)URL 化里面去配置自己的HTTP 或者HTTPS 路徑,我們也可以采用官方的路徑。我們每一個(gè)云函數(shù)的根域名都是一樣的,我們只需要通過不同的原函數(shù)名字去請求拼接我們的URL地址即可,這樣就實(shí)現(xiàn)了為一個(gè)小程序編寫的云函數(shù)也可以供第三方請求使用。DCloud 云平臺(tái)網(wǎng)絡(luò)拓?fù)鋱D如圖3 所示。
圖3 DCloud 網(wǎng)絡(luò)拓?fù)鋱D
很多商戶把自己的產(chǎn)品通過小程序的方式展現(xiàn)在用戶面前,云開發(fā)現(xiàn)在也越來越流行,目前通過UniCloud 提供的云服務(wù)用戶使用的并不多,一部分用戶認(rèn)為自己的數(shù)據(jù)存儲(chǔ)在別人的服務(wù)器上面害怕數(shù)據(jù)安全的問題,數(shù)字天堂公司目前不僅受到我們普通開發(fā)者提供了存儲(chǔ)與計(jì)算服務(wù),還為很多央企和運(yùn)營商也提供了服務(wù)UniCloud 也為我們簽署了保密協(xié)議,安全性是可以得到很好的保障的,如果我們購買阿里云的服務(wù)器自己掛載,如果沒有定期檢測安全性,那么我們數(shù)據(jù)受到威脅到可能性更大。對于服務(wù)器的增配,一般我們需要購買一個(gè)更大型運(yùn)算能力和吞吐量更大的服務(wù)器,最簡單的方式是通過阿里云提供的克隆的方式進(jìn)行數(shù)據(jù)拷貝,然后很多配置我們還要重新配置,如果數(shù)據(jù)量很大克隆時(shí)間也會(huì)比較長。從這些角度來分析,如果采用云開發(fā),我們升降配自己的服務(wù)器則不必考慮這些問題。無疑目前資訊類微信小程序通過云開發(fā)的理念設(shè)計(jì)和開發(fā)是最符合用戶和開發(fā)人員需求的。