李梓瑤, 舒 后, 宋 瑋

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

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

1 主要技術(shù)簡介

1.1 Web 前端技術(shù)

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

1.2 Vue.js

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

1.3 HBuilder 平臺

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

1.4 uni-app

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

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

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

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

2.1 需求分析

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

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

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

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

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

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

3.1 功能設(shè)計

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

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

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

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

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

3.2 功能實現(xiàn)

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

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

微信小程序因為包含在微信內(nèi),所以它不能與APP 一樣可以多個軟件同時切換使用,如果需要更換小程序或是要回到微信的主界面時,通常需要點擊屏幕右上角的膠囊按鈕返回,如圖3 所示。

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

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

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

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

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

圖4 文章信息表

將以上所提到的信息添加到云數(shù)據(jù)庫后,代表一個數(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 懶加載

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

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

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

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

4 結(jié)語

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