資訊類微信小程序的設(shè)計(jì)與開(kāi)發(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)火火，阿里巴巴和百度也開(kāi)始提出自己的小程序。為什么新聞資訊類小程序更適合于微信小程序的開(kāi)發(fā)而不適合支付寶、百度等。首先微信小程序與百度小程序和支付寶小程序的最主要區(qū)別之一是微信小程序借助自身優(yōu)勢(shì)有有龐大的流量和社交資源，與新聞資訊相輔相成。百度和支付寶兩家小程序，百度主要強(qiáng)調(diào)智能，建設(shè)自己的開(kāi)放體系，支付寶則強(qiáng)調(diào)線上線下資源，工具性強(qiáng)。與他們大體相同的是Google 推出的快應(yīng)用，目前也得到了大部分手機(jī)廠商的支持，快應(yīng)用沒(méi)有流量，無(wú)法轉(zhuǎn)移，也是資訊類軟件不能設(shè)計(jì)在快應(yīng)用的主要原因。

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

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

研究報(bào)告顯示目前資訊類App 種，占多數(shù)的是在22-35 歲的年輕用戶群體，因此整個(gè)小程序設(shè)計(jì)風(fēng)格偏輕量化、品質(zhì)化、簡(jiǎn)潔化、年輕化。頁(yè)面的扁平化設(shè)計(jì)方案，同樣層次，富有細(xì)節(jié)，動(dòng)效精致為用戶提供便捷和高效的閱讀體驗(yàn)。對(duì)于熱門(mén)跟帖欄目，我們專門(mén)設(shè)計(jì)一個(gè)閱讀欄目，因?yàn)闊衢T(mén)跟帖是提高用戶黏性的主要功能之一。研究報(bào)告顯示用戶使用時(shí)間以及場(chǎng)景分布其中睡前占大部分，其次是上下班途中和課間休息中。超過(guò)半數(shù)用戶集中在睡前時(shí)間段閱讀新聞咨詢等，針對(duì)大部分用戶需求，夜間配色模式的設(shè)計(jì)尤為重要。為了迎合視覺(jué)柔和的原則，背景色和文字色對(duì)比度采用WCAG2.0 標(biāo)準(zhǔn)，AAA級(jí)別的視覺(jué)標(biāo)準(zhǔn)。對(duì)于圖片本身的顏色來(lái)說(shuō)，為了追尋效率，減少服務(wù)器計(jì)算，我們對(duì)圖片添加30%的深色遮罩來(lái)降低對(duì)視覺(jué)的刺激。一味追尋用戶健康的同時(shí)，我們?yōu)榱肆糇∮脩簦ㄟ^(guò)使用庫(kù)克定律，通過(guò)測(cè)試，我們把用戶是用最少的功能進(jìn)行了刪除，讓用戶選擇數(shù)量變少，選擇所花時(shí)間縮短，使用常常激起用戶情緒的顏色作為點(diǎn)綴色，資訊信息首頁(yè)布局采用傳統(tǒng)的尼爾森F 視覺(jué)模型。

2.2 小程序開(kāi)發(fā)

小程序原生云開(kāi)發(fā)采用騰訊自己的服務(wù)器，提供免費(fèi)的額度，我們?cè)陂_(kāi)發(fā)時(shí)候可以采用Uni 的框架，然后采用UniCloud 提供的阿里云服務(wù)器，阿里云服務(wù)器提供的免費(fèi)額度會(huì)大于騰訊提供的免費(fèi)額度，未來(lái)擴(kuò)容也更容易。設(shè)計(jì)數(shù)據(jù)庫(kù)唯一主鍵采用存儲(chǔ)用戶唯一OpenId 的形式，通過(guò)微信開(kāi)發(fā)平臺(tái)提供的getUserInfo 函數(shù)接口獲取code 在云函數(shù)通過(guò)code 去換取OpenId。小程序沒(méi)有cookie 機(jī)制，我們把登陸狀態(tài)存在微信給我們提供的storage 中。這里很多開(kāi)發(fā)者一般把OpenId 作為登錄狀態(tài)進(jìn)行存儲(chǔ)，對(duì)于一般小程序的開(kāi)發(fā)不會(huì)造成用戶信息泄露的影響，但是一個(gè)用戶對(duì)應(yīng)一個(gè)OpenId，一些用戶非法獲取他人的OpenId 之后，可以通過(guò)OpenId 去獲取其他不安全小程序的用戶信息。這里我們采用的是 session_key 作為登陸狀態(tài)通過(guò)session_key 與OpenId 的一一對(duì)應(yīng)關(guān)系去存儲(chǔ)云數(shù)據(jù)庫(kù)數(shù)據(jù)，圖1 是小程序登錄流程圖。

圖1 小程序登錄流程圖

云函數(shù)為了維護(hù)方便，采用ES6 面向?qū)ο缶幊蹋谛〕绦蚓幾g時(shí)勾選ES6 轉(zhuǎn)ES5 的選項(xiàng)，以前我們?cè)陂_(kāi)發(fā)時(shí)候不采用ES6 語(yǔ)法是因?yàn)橐恍g覽器對(duì)于ES6 的支持不友好，而在小程序開(kāi)發(fā)時(shí)我們不必考慮這個(gè)問(wèn)題class一定比ES5 函數(shù)的寫(xiě)法帶來(lái)更好的性能，代碼變少了，運(yùn)行速度變快了。云函數(shù)的開(kāi)發(fā)語(yǔ)法規(guī)范類似與Node 或者我們可以采用純Node 開(kāi)發(fā)。對(duì)于云數(shù)據(jù)庫(kù)表Schema 的設(shè)計(jì)開(kāi)發(fā)，資訊類小程序設(shè)計(jì)了七張表，分別是用戶表、Banner 表、用戶搜索記錄表、留言反饋表、熱搜表、資訊信息表以及評(píng)論記錄表。用戶搜索記錄表通過(guò)記錄搜索時(shí)間搜索內(nèi)容和搜索類別用來(lái)做簡(jiǎn)單的用戶首頁(yè)非熱搜內(nèi)容推薦。

UniApp 開(kāi)發(fā)過(guò)程中我們可以通過(guò)一些優(yōu)化手段加快速度，通過(guò)UniApp 與RN 和Flutter 的比較我們發(fā)現(xiàn)UniApp 的性能最弱，F(xiàn)lutter 性能最好，但是Flutter 上手最難，RN 采用React 語(yǔ)法，兩方面都適中。針對(duì)跨端能力Flutter 和RN 分別來(lái)自FaceBook 和谷歌沒(méi)有提供跨端編譯小程序的能力，目前國(guó)內(nèi)對(duì)開(kāi)發(fā)者對(duì)小程序開(kāi)發(fā)需求增加，目前RN 已經(jīng)有了支持小程序開(kāi)發(fā)的能力，但是目前生態(tài)不如UniApp，UniApp 和RN 開(kāi)發(fā)性能都遠(yuǎn)不及Flutter，因?yàn)镕lutter 采用Dart 語(yǔ)言無(wú)限接近原生開(kāi)發(fā)，擺脫了JsBridge 對(duì)邏輯層的渲染，采用自渲染引擎，大大提高了速度，沒(méi)有對(duì)Js 的渲染那么就只適合對(duì)跨端App 的開(kāi)發(fā)。既然UniApp 是我們唯一的選擇，我們可以通過(guò)底層編譯分析，讓UniApp 編譯出App 或小程序的性能接近與RN。那就是我們盡量使用WEEX 渲染引擎的代碼，渲染成原生組件提高運(yùn)行性能。在開(kāi)發(fā)時(shí)候如果只開(kāi)發(fā)小程序端，避免使用uni 前綴開(kāi)頭的接口和官方提供的庫(kù)函數(shù)，目前官方所有的uni 前綴開(kāi)頭的語(yǔ)法都支持wx 前綴的組件，避免使用可以減少運(yùn)行時(shí)的兼容判斷，從而提高性能。圖2 是Uni-App 編譯原理架構(gòu)圖，其實(shí)uni 擴(kuò)展組件及mpvue 兼容組件是上層代碼與底層編譯調(diào)用的中間層，上面的優(yōu)化方法主要就是通過(guò)減少這一層對(duì)各個(gè)平臺(tái)不同接口的兼容性，從而減少判斷，最終實(shí)現(xiàn)提升性能的效果。

圖2 Uni-App 編譯原理架構(gòu)圖

對(duì)于云服務(wù)的負(fù)載和請(qǐng)求情況，DCloud 官方為我們提供了可視化界面，記錄了對(duì)云函數(shù)調(diào)用情況，云數(shù)據(jù)庫(kù)的日志文件，以及整個(gè)云服務(wù)器的請(qǐng)求次數(shù)，CDN 流量，請(qǐng)求延遲等。在我們傳統(tǒng)的資訊類網(wǎng)站或者App 開(kāi)發(fā)時(shí)，我們還要配置自己的域名，做備案，云服務(wù)后臺(tái)為我們提供了兩種選擇方式：其一是我們可以省略了備案的步驟，把小程序的審核發(fā)布交給公眾號(hào)服務(wù)平臺(tái)，因?yàn)椴环弦?guī)定的小程序只能用于開(kāi)發(fā)者測(cè)試，也就是我們根本不用去配置自己的域名。其二是很多已經(jīng)開(kāi)發(fā)好的三方接口，我們可以繼續(xù)使用，但是這里我們要在云服務(wù)后天做跨域配置，添加第三方域名。這些對(duì)于一個(gè)普通的商戶的程序員來(lái)說(shuō)已經(jīng)足夠使用了，但是對(duì)于很多經(jīng)常做開(kāi)發(fā)的開(kāi)發(fā)者來(lái)說(shuō)還遠(yuǎn)遠(yuǎn)不夠，因?yàn)楹芏鄷r(shí)候我們寫(xiě)一個(gè)服務(wù)接口可以給很多程序同時(shí)通過(guò)服務(wù)，用云開(kāi)發(fā)的方式每一套云函數(shù)都只能對(duì)應(yīng)本小程序的某個(gè)請(qǐng)求。DCloud 也給我們提供了解決方案，首先我們也要配置相應(yīng)的跨域請(qǐng)求，讓第三方請(qǐng)求時(shí)不被攔截，然后我們?cè)谠瓶刂婆_(tái)后臺(tái)進(jìn)入我們目前正在使用的云服務(wù)器找到云函數(shù)的詳情頁(yè)面，在云函數(shù)URL 化里面去配置自己的HTTP 或者HTTPS 路徑，我們也可以采用官方的路徑。我們每一個(gè)云函數(shù)的根域名都是一樣的，我們只需要通過(guò)不同的原函數(shù)名字去請(qǐng)求拼接我們的URL地址即可，這樣就實(shí)現(xiàn)了為一個(gè)小程序編寫(xiě)的云函數(shù)也可以供第三方請(qǐng)求使用。DCloud 云平臺(tái)網(wǎng)絡(luò)拓?fù)鋱D如圖3 所示。

圖3 DCloud 網(wǎng)絡(luò)拓?fù)鋱D

3 結(jié)論

很多商戶把自己的產(chǎn)品通過(guò)小程序的方式展現(xiàn)在用戶面前，云開(kāi)發(fā)現(xiàn)在也越來(lái)越流行，目前通過(guò)UniCloud 提供的云服務(wù)用戶使用的并不多，一部分用戶認(rèn)為自己的數(shù)據(jù)存儲(chǔ)在別人的服務(wù)器上面害怕數(shù)據(jù)安全的問(wèn)題，數(shù)字天堂公司目前不僅受到我們普通開(kāi)發(fā)者提供了存儲(chǔ)與計(jì)算服務(wù)，還為很多央企和運(yùn)營(yíng)商也提供了服務(wù)UniCloud 也為我們簽署了保密協(xié)議，安全性是可以得到很好的保障的，如果我們購(gòu)買(mǎi)阿里云的服務(wù)器自己掛載，如果沒(méi)有定期檢測(cè)安全性，那么我們數(shù)據(jù)受到威脅到可能性更大。對(duì)于服務(wù)器的增配，一般我們需要購(gòu)買(mǎi)一個(gè)更大型運(yùn)算能力和吞吐量更大的服務(wù)器，最簡(jiǎn)單的方式是通過(guò)阿里云提供的克隆的方式進(jìn)行數(shù)據(jù)拷貝，然后很多配置我們還要重新配置，如果數(shù)據(jù)量很大克隆時(shí)間也會(huì)比較長(zhǎng)。從這些角度來(lái)分析，如果采用云開(kāi)發(fā)，我們升降配自己的服務(wù)器則不必考慮這些問(wèn)題。無(wú)疑目前資訊類微信小程序通過(guò)云開(kāi)發(fā)的理念設(shè)計(jì)和開(kāi)發(fā)是最符合用戶和開(kāi)發(fā)人員需求的。