資訊類微信小程序的設(shè)計(jì)與開發(fā)

李 想 張玉軍 余 謹(jǐn) 楊維昊

（遼寧科技大學(xué)計(jì)算機(jī)與軟件工程學(xué)院，遼寧 鞍山 114004）

1 概述

小程序目前是有別于傳統(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)用的主要原因。

2 新聞資訊類小程序設(shè)計(jì)

2.1 小程序頁面設(shè)計(jì)

研究報(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 視覺模型。

2.2 小程序開發(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

3 結(jié)論

很多商戶把自己的產(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ā)人員需求的。