基于HBuilder 的冬奧會(huì)新聞小程序的設(shè)計(jì)與實(shí)現(xiàn)

李梓瑤, 舒 后, 宋 瑋

(北京印刷學(xué)院新媒體學(xué)院,北京 102600)

隨著微信的迅速發(fā)展,人們的溝通變得親密無間,微信成為了市面上最主流的通訊類APP 之一。微信小程序在微信穩(wěn)步發(fā)展后誕生,它是一種不用下載就可以使用的應(yīng)用程序,用戶只需要在微信中“掃一掃”或“搜一搜”即可打開,不需要額外的安裝或是卸載,所以小程序從誕生至今以便捷、輕量級(jí)、內(nèi)存小等優(yōu)勢成為了當(dāng)下焦點(diǎn)。因此,本文以冬奧會(huì)為背景,討論并設(shè)計(jì)了一個(gè)基于微信小程序的冬奧新聞資訊平臺(tái),為用戶提供最新冬奧資訊、視頻等。

1 主要技術(shù)簡介

1.1 Web 前端技術(shù)

Web 前端技術(shù)主要包括HTML5、CSS3 和JavaScript。HTML5 提供了豐富的語義標(biāo)簽,滿足了用戶對(duì)網(wǎng)頁上的各種需求;CSS3 則是提供了豐富的網(wǎng)頁特效及樣式,增強(qiáng)了網(wǎng)頁的表現(xiàn)能力;JavaScript 是整個(gè)網(wǎng)頁的支撐,它是主流瀏覽器中最主要的編程語言。

1.2 Vue.js

Vue.js 是用于構(gòu)建用戶界面的漸進(jìn)式JavaScript 框架,它和其他前端框架相比采用的是自底向上增量開發(fā)的設(shè)計(jì)。Vue.js 框架的核心庫更加注重視圖層,所以它不僅容易上手,還便于與第三方庫相融合。

1.3 HBuilder 平臺(tái)

對(duì)于開發(fā)者而言,采用HBuilder 平臺(tái)而不是微信開發(fā)者工具是因?yàn)镠Builder 具有很好的跨平臺(tái)優(yōu)勢,它將常用的組件和API 進(jìn)行了跨平臺(tái)封裝。因此,它不但可以輸出成微信小程序,還可以輸出到10 個(gè)不同的平臺(tái)中,包括安卓和iOS 系統(tǒng),這就讓開發(fā)者的學(xué)習(xí)成本和開發(fā)成本都大大降低。

1.4 uni-app

uni-app 是一個(gè)使用Vue.js、微信小程序標(biāo)簽以及API 的跨平臺(tái)前端框架。uni-app 中組件標(biāo)簽規(guī)范和小程序平臺(tái)的規(guī)范基本一致,這樣方便開發(fā)者將新的API 與原生API 進(jìn)行關(guān)聯(lián)。同時(shí)uniapp 擁有活躍的插件市場,極大提高了開發(fā)速度和效率。

1.5 uniCloud 云數(shù)據(jù)庫

uniCloud 是DCloud 聯(lián)合阿里云和騰訊云為uni-app 開發(fā)者提供的基于serverLess 模式和js 編程的云開發(fā)平臺(tái)。在uniCloud 中,提供了一個(gè)JSON 格式的文檔型數(shù)據(jù)庫。

2 系統(tǒng)分析與數(shù)據(jù)設(shè)計(jì)

2.1 需求分析

2015 年,中國獲得了第24 屆冬季奧林匹克運(yùn)動(dòng)會(huì)的主辦權(quán),北京成為了世界第一個(gè)既舉辦過夏季奧運(yùn)會(huì)又舉辦冬季奧運(yùn)會(huì)的城市。2020 年,新冠肺炎疫情給全球體育賽事帶來了巨大挑戰(zhàn),但北京冬奧會(huì)籌辦工作不斷、力度不減,體現(xiàn)了國家對(duì)其高度地重視,越來越多的人也愿意參加到冰雪運(yùn)動(dòng)中來。

與此同時(shí),相關(guān)的冬奧資訊也如雨后春筍般涌現(xiàn)。但針對(duì)目前網(wǎng)上已有的APP 或小程序來看,冬奧模塊只占其一小部分,并且內(nèi)容和形式比較單一。隨著冬奧會(huì)的臨近,還有許多人對(duì)冰雪運(yùn)動(dòng)并不了解,因此研究并開發(fā)一個(gè)有關(guān)冬奧的小程序可以為冰雪愛好者提供最新資訊平臺(tái),也可以為普通用戶提供學(xué)習(xí)和科普平臺(tái)。

2.2 數(shù)據(jù)設(shè)計(jì)

小程序主要的展現(xiàn)形式為文字、圖片和視頻。但是大量的圖片和視頻并不適合直接放到前端頁面中,因此本文采用了uniCloud 云數(shù)據(jù)庫來存儲(chǔ)信息,數(shù)據(jù)庫中包含了文章信息表、導(dǎo)航欄內(nèi)容表、用戶表和視頻信息表,其余的圖片和視頻文件則上傳到了云存儲(chǔ)中。小程序的數(shù)據(jù)設(shè)計(jì)如圖1 所示。

圖1 數(shù)據(jù)來源

3 系統(tǒng)功能設(shè)計(jì)與實(shí)現(xiàn)

3.1 功能設(shè)計(jì)

冬奧會(huì)新聞小程序包括首頁、視頻、收藏和我的4 個(gè)主界面,如圖2 所示。

圖2 系統(tǒng)功能圖

其中首頁包括搜索框、輪播圖、導(dǎo)航欄和新聞四個(gè)部分。首頁新聞包含了6 種分類:冬奧聚焦、冬奧百科、精彩瞬間、冬殘奧會(huì)、運(yùn)動(dòng)會(huì)和古代冰雪運(yùn)動(dòng)。用戶不僅可以在小程序中了解最新的冬奧資訊、賽程安排等,還能夠?qū)W習(xí)到冬奧會(huì)的相關(guān)知識(shí)和古代中國冰雪運(yùn)動(dòng)的歷史?？赐暌黄Y訊后,用戶可以在文章底部評(píng)論來抒發(fā)自己的觀點(diǎn)。

視頻頁功能與首頁相似,以視頻流的方式呈現(xiàn)。不僅會(huì)發(fā)布一些往屆冬奧會(huì)的精彩瞬間,還會(huì)加入一些適合青少年觀看的動(dòng)畫視頻等。

在收藏頁中,用戶可以快速便捷地查看首頁收藏的文章,也可以進(jìn)行取消收藏的操作;我的頁則呈現(xiàn)的是用戶的個(gè)人信息。

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

基于以上系統(tǒng)功能設(shè)計(jì),小程序采用HBuilder為開發(fā)平臺(tái),微信開發(fā)者工具進(jìn)行小程序的調(diào)試。主要技術(shù)包含導(dǎo)航欄設(shè)計(jì)、首頁和視頻頁內(nèi)文章數(shù)據(jù)庫的創(chuàng)建和調(diào)用、微信開發(fā)者工具測試等。

3.2.1 導(dǎo)航欄設(shè)計(jì)

微信小程序因?yàn)榘谖⑿艃?nèi),所以它不能與APP 一樣可以多個(gè)軟件同時(shí)切換使用,如果需要更換小程序或是要回到微信的主界面時(shí),通常需要點(diǎn)擊屏幕右上角的膠囊按鈕返回,如圖3 所示。

圖3 小程序中的導(dǎo)航欄(上)與APP 中的導(dǎo)航欄(下)

因此,在設(shè)計(jì)時(shí)需要考慮到導(dǎo)航欄自適應(yīng)、膠囊按鈕的寬度和高度等問題,主要代碼如下:

同時(shí),首頁和視頻頁的導(dǎo)航欄可以直觀地展現(xiàn)出整個(gè)小程序的主要信息模塊,所以采用了滑動(dòng)的形式,運(yùn)用＜scroll＞標(biāo)簽進(jìn)行設(shè)計(jì)。同時(shí),用戶可以根據(jù)自己的喜好,刪除或是添加新聞分類模塊,主要代碼如下:

3.2.2 數(shù)據(jù)庫的創(chuàng)建和調(diào)用

文章信息表是小程序中最主要的數(shù)據(jù)庫,存儲(chǔ)了新聞文章的ID、標(biāo)題、正文內(nèi)容、評(píng)論、作者等信息,如圖4 所示。

圖4 文章信息表

將以上所提到的信息添加到云數(shù)據(jù)庫后,代表一個(gè)數(shù)據(jù)庫的創(chuàng)建完成,接下來需要將數(shù)據(jù)庫中的信息與小程序的前端頁面進(jìn)行關(guān)聯(lián)和調(diào)用,主要代碼如下:

在引用完數(shù)據(jù)庫后,需要獲取表中的相關(guān)數(shù)據(jù),主要代碼如下:

最后,再將數(shù)據(jù)返回給客戶端,代碼如下:

3.2.3 懶加載

懶加載是一種獨(dú)特并且強(qiáng)大的獲取數(shù)據(jù)的方式,常用在新聞資訊類、購物類等APP 中。當(dāng)用戶滾動(dòng)界面時(shí),它會(huì)自動(dòng)地獲取更多數(shù)據(jù),并且還減少了頁面的加載時(shí)間,減輕了服務(wù)器的壓力,主要代碼如下:

3.2.4 微信開發(fā)者工具調(diào)試

在項(xiàng)目開發(fā)時(shí),uni-app 可以隨時(shí)調(diào)用微信開發(fā)者工具進(jìn)行調(diào)試,通過微信“掃一掃”功能或微信開發(fā)者平臺(tái)的自動(dòng)預(yù)覽功能,開發(fā)者就可以直接在手機(jī)上查看小程序的運(yùn)行情況,并進(jìn)行調(diào)試修改,如圖5 所示。

圖5 調(diào)試、運(yùn)行小程序

4 結(jié)語

隨著2022 北京冬奧會(huì)的臨近,大量相關(guān)新聞、視頻等信息涌現(xiàn)?；谟脩糸喿x更加快捷和便利的需求,本文使用HBuilder 平臺(tái)和uni-app 框架較全面地完成了冬奧會(huì)新聞?lì)愋〕绦虻脑O(shè)計(jì)與實(shí)現(xiàn)。同時(shí),小程序設(shè)計(jì)中還存在一些不足之處,需要不斷地進(jìn)行完善和改進(jìn)。