微閱讀與電影小程序的設(shè)計(jì)與實(shí)現(xiàn)

徐祎麟　劉星含

摘要：隨著社會進(jìn)步和科技發(fā)展，移動(dòng)端技術(shù)得到迅速發(fā)展，手機(jī)已經(jīng)普及到各個(gè)年齡段，信息服務(wù)重心從電腦端向移動(dòng)端轉(zhuǎn)移。但學(xué)生信息服務(wù)的移動(dòng)應(yīng)用目前還不太完善，學(xué)生無法快速獲最新消息和對應(yīng)數(shù)據(jù)?；谖⑿判〕绦虻奈㈤喿x與電影前端使用原生態(tài)App進(jìn)行開發(fā)，后端采用云服務(wù)框架構(gòu)建，前后端信息交互通過架包封裝API接口實(shí)現(xiàn)，微閱讀與電影微信小程序?yàn)榇蟊娊⒁粋€(gè)公共電影服務(wù)以及文章閱讀平臺，敢于挑戰(zhàn)傳統(tǒng)的信息服務(wù)，采用個(gè)性化設(shè)計(jì)，時(shí)刻關(guān)注用戶的使用體驗(yàn)。

關(guān)鍵詞：微信小程序;數(shù)據(jù)爬取;小程序開發(fā);云服務(wù)

中圖分類號：TP393? ? ?文獻(xiàn)標(biāo)識碼： A

文章編號：1009-3044（2021）04-0083-02

小程序無需用戶進(jìn)行應(yīng)用的下載和安裝，大大縮短了等待時(shí)間，優(yōu)化用戶使用體驗(yàn)。微信小程序服務(wù)于微信平臺，只需要安裝微信便可使用各種各樣小程序。當(dāng)前網(wǎng)絡(luò)信息過度泛濫，造成信息的不一致和虛假傳播，用戶所能獲得的信息真實(shí)度有限，使用微信小程序，可以收獲大量的用戶群體，同時(shí)凈化網(wǎng)絡(luò)環(huán)境。使用者在使用小程序時(shí)，與微信賬號進(jìn)行綁定，產(chǎn)品公開免費(fèi)，因此小程序可以迅速獲得用戶關(guān)注并方便后期維護(hù)和優(yōu)化。此應(yīng)用可以幫助用戶第一時(shí)間獲取信息，同時(shí)進(jìn)行信息交流分享，創(chuàng)造良好的網(wǎng)絡(luò)環(huán)境。

1需求分析

通過數(shù)據(jù)分析和市場調(diào)研，信息服務(wù)重心更傾向于移動(dòng)端，但學(xué)生信息服務(wù)的移動(dòng)應(yīng)用目前還不太完善。高校學(xué)生的關(guān)注集中在日常生活和消費(fèi)娛樂，此應(yīng)用旨在提供觀影和閱讀方面的服務(wù)，為學(xué)生的生活提供便利。包括的功能有：瀏覽推薦文章，收聽流行音樂，查看電影排名和評分?jǐn)?shù)據(jù)，搜索電影等功能。此應(yīng)用為大眾建立一個(gè)公共電影服務(wù)以及文章閱讀平臺，程序分為三大的模塊：閱讀文章、瀏覽電影、用戶信息。

2體系架構(gòu)

該程序前端頁面使用原生態(tài)App進(jìn)行開發(fā)，方便查看源碼和代碼維護(hù)。前端頁面向后端發(fā)送請求獲取數(shù)據(jù)，后端再把結(jié)果傳遞給前端，經(jīng)過數(shù)據(jù)渲染功能顯示在頁面上。后端采用云服務(wù)框架構(gòu)建，與云數(shù)據(jù)庫進(jìn)行交互，從微信服務(wù)器獲取信息，經(jīng)過后端邏輯層處理數(shù)據(jù)，前端再進(jìn)行數(shù)據(jù)渲染和顯示。

3 功能模塊

3.1閱讀文章模塊

閱讀文章模塊包括文章閱讀和評論分享。用戶可以查看文章列表，會跳轉(zhuǎn)到具體文章頁面，查看文章作者，標(biāo)題和內(nèi)容。該頁面實(shí)現(xiàn)音樂播放接口，用戶通過點(diǎn)擊頁面圖片，實(shí)現(xiàn)音樂播放和暫停。文章底部有三個(gè)圖片，用戶可以為相關(guān)文章點(diǎn)贊，評論和收藏。點(diǎn)擊評論圖標(biāo)，可以查看用戶評論和發(fā)表評論內(nèi)容。

3.2瀏覽電影模塊

瀏覽電影模塊包括查看電影榜單和搜索功能。調(diào)用電影網(wǎng)站接口，頁面分成三個(gè)板塊：新片榜，熱映榜和高分榜。用戶點(diǎn)擊電影海報(bào)圖片，即可查看有關(guān)的電影信息，如電影評分，電影簡介，演員陣容等內(nèi)容。電影模塊界面上端有搜索框，用戶可以根據(jù)關(guān)鍵字，索引到具體電影名稱，進(jìn)而獲得想要的內(nèi)容。用戶可以拖曳榜單，實(shí)現(xiàn)數(shù)據(jù)的即時(shí)刷新。

3.3用戶信息模塊

用戶信息模塊根據(jù)功能不同進(jìn)行分類，主要分為八個(gè)功能：系統(tǒng)信息，網(wǎng)絡(luò)狀態(tài)，地圖顯示，即時(shí)定位，用戶登錄，應(yīng)用服務(wù)，掃碼支付，運(yùn)動(dòng)步數(shù)。用戶可以查看相關(guān)信息和體驗(yàn)服務(wù)，某些功能需要通知用戶進(jìn)行允許權(quán)限設(shè)置。例如，開啟地圖顯示功能，用戶可以查看自己位置。支持微信掃碼功能，獲得更多的信息服務(wù)與支持。打開應(yīng)用服務(wù)，里面有第三方平臺服務(wù)，增加用戶體驗(yàn)。

4 功能實(shí)現(xiàn)

4.1頁面布局

傳統(tǒng)的前端設(shè)計(jì)，依賴于盒子模型，但在某些特殊布局，如垂直居中設(shè)計(jì)就比較困難，采用Flex彈性布局可以有效解決此類問題。指定父容器display屬性為flex，對于文字列表，設(shè)置flex-direction屬性為column，垂直方向由上至下排列。每個(gè)列表內(nèi)容設(shè)置flex-direction屬性為row，對于主軸justify-content和交叉軸align-items對齊方式都設(shè)置為center。一般獲取的電影數(shù)量不只幾個(gè)，再設(shè)置元素的flex-wrap屬性為warp，當(dāng)數(shù)量超出屏幕寬度時(shí)，實(shí)現(xiàn)自動(dòng)換行。

4.2數(shù)據(jù)獲取

本地?cái)?shù)據(jù)庫存儲文字和圖片，音樂和電影數(shù)據(jù)分別調(diào)用音樂外鏈和電影API接口進(jìn)行實(shí)現(xiàn)。通過wx.request方法發(fā)起https請求，參數(shù)url為請求資源地址，調(diào)用默認(rèn)get方法獲得的資源是json格式文件，然后通過在線json轉(zhuǎn)碼器翻譯為js文件。定義一個(gè)函數(shù)，通過循環(huán)遍歷電影目錄，根據(jù)得到的數(shù)據(jù)字段，依此獲得電影名稱，評分，簡介和演員等數(shù)據(jù)，再設(shè)置success函數(shù)調(diào)用請求數(shù)據(jù)和fail函數(shù)如果返回資源錯(cuò)誤。

4.3接口調(diào)用

在用戶界面，實(shí)現(xiàn)運(yùn)動(dòng)步數(shù)功能獲得用戶步數(shù)，首先調(diào)用login函數(shù)登錄小程序，如果申請有appID的話，可以通過云函數(shù)得到cloudID后，weRunData的值便可以公開獲取，經(jīng)過前端界面數(shù)據(jù)渲染，用戶便可以查看。定位功能的實(shí)現(xiàn)，開發(fā)者需要登錄微信開發(fā)者平臺，申請第三方服務(wù)，按照官方文檔要求，調(diào)用第三方服務(wù)接口。

5結(jié)束語

微閱讀與電影小程序借助于微信平臺，開發(fā)成本簡單，代碼易于維護(hù)。目前小程序的初期效果已經(jīng)實(shí)現(xiàn)，后期還有待繼續(xù)完善，未來在大學(xué)校園里推廣，能有效節(jié)省學(xué)生時(shí)間和促進(jìn)合理消費(fèi)，同時(shí)數(shù)據(jù)實(shí)現(xiàn)即時(shí)更新，可以與學(xué)生會和廣播站進(jìn)行聯(lián)合，刊登優(yōu)秀文章到小程序中，營造良好的大學(xué)氛圍。合理設(shè)計(jì)和應(yīng)用小程序能為學(xué)生的學(xué)習(xí)和生活提供便利，同時(shí)宣傳和擴(kuò)大學(xué)校知名度。

參考文獻(xiàn)：

[1] 雷磊.微信小程序開發(fā)入門與實(shí)踐[M].北京：清華大學(xué)出版社，2017.

[2] 雷磊.微信官方文檔.小程序[EB/OL].[2020-08-15].https：//developers.weixin.qq.com/miniprogram/dev/framework/

[3] 蔣文娟，蘇喜紅，孟麗珍.基于微信小程序的音樂播放器研究與實(shí)現(xiàn)[J].軟件導(dǎo)刊，2020，19（6）：141-145.

[4] 徐星明.微信小程序第三方平臺的設(shè)計(jì)與實(shí)現(xiàn)[D].濟(jì)南：山東大學(xué)，2020.

[5] 余躍泓.基于彈性盒子的響應(yīng)式網(wǎng)頁布局[J].信息與電腦，2020，32（10）：181-183.

【通聯(lián)編輯：梁書】