摘要：隨著移動(dòng)互聯(lián)網(wǎng)的蓬勃興起，微信小程序以無(wú)需下載安裝、用完即走、隨時(shí)可用等特點(diǎn)，得到了廣泛應(yīng)用。本文利用微信小程序開發(fā)了一款通用新聞網(wǎng)系統(tǒng)，設(shè)計(jì)并實(shí)現(xiàn)了前端新聞瀏覽和后端新聞管理的功能。

關(guān)鍵詞：微信小程序;新聞網(wǎng);開發(fā)

Abstract： With the booming of mobile Internet， WeChat applet has been widely used for its features of no need to download and install， ready to use and ready to use. In this paper， a general news network system is developed by using WeChat applet， and the functions of front-end news browsing and back-end news management are designed and implemented.

Keywords： WeChat applet; News network; exploitation

微信小程序2017年1月9日正式發(fā)布，它依托超級(jí)APP微信平臺(tái)，只需要掃描二維碼或者直接搜索，就能打開使用，用戶不用擔(dān)心安裝太多的應(yīng)用而帶來(lái)手機(jī)的存儲(chǔ)容量問題，因無(wú)需下載安裝、用完即走、隨時(shí)可用等特點(diǎn)而得到了廣泛的應(yīng)用。受用戶使用習(xí)慣的原因，師生很少會(huì)通過(guò)電腦訪問校園新聞去關(guān)注學(xué)校的新聞，造成很多師生不知道學(xué)校的一些重大事件，引起了諸多不便。本文基于微信小程序開發(fā)的通用校園新聞網(wǎng)就是為了解決這一問題，通過(guò)與校園網(wǎng)站數(shù)據(jù)共享來(lái)實(shí)現(xiàn)校園網(wǎng)的通常操作，方便學(xué)生和老師能隨時(shí)查閱校園新聞。該系統(tǒng)可以運(yùn)用于不同的場(chǎng)景，可以是校園新聞，企業(yè)新聞等。為了方便描述，下文以我校校園新聞網(wǎng)舉例進(jìn)行介紹。

一、系統(tǒng)分析與設(shè)計(jì)

1.需求分析

目前，學(xué)校的各類信息發(fā)布均通過(guò)網(wǎng)站進(jìn)行，但隨著移動(dòng)用戶越來(lái)越多，能直接通過(guò)手機(jī)掃碼進(jìn)行信息查詢的需求越來(lái)越強(qiáng)烈。一般的師生員工希望通過(guò)小程序，進(jìn)行新聞的瀏覽和收藏，系統(tǒng)管理員可以通過(guò)小程序進(jìn)行新聞的增加、刪除、修改、查詢等管理工作。

2.系統(tǒng)總體架構(gòu)

從技術(shù)角度看，系統(tǒng)分為微信小程序前端和云端服務(wù)器兩大部分，微信小程序采用微信開發(fā)者工具開發(fā)。服務(wù)器端采用微信提供的云服務(wù)器和云數(shù)據(jù)庫(kù)。程序可跨平臺(tái)在平板、手機(jī)等移動(dòng)設(shè)備上訪問。從用戶角度看，系統(tǒng)由2個(gè)微信小程序組成，共用1個(gè)云數(shù)據(jù)庫(kù)，分別面向普通用戶和系統(tǒng)管理員。普通用戶主要是瀏覽數(shù)據(jù)庫(kù)，系統(tǒng)管理員可以對(duì)數(shù)據(jù)庫(kù)的數(shù)據(jù)進(jìn)行增刪改查等維護(hù)操作。

3.功能模塊

系統(tǒng)包括5個(gè)功能模塊，即走進(jìn)校園、校園新聞、杰出校友、我的、新聞管理。如圖1所示。（1）走進(jìn)校園。小程序的主頁(yè)。介紹學(xué)校的歷史和特色，介紹學(xué)生的校園生活。（2）校園新聞。輪播圖播出近期新聞圖片，以列表的形式顯示新聞，觸底可以顯示下一頁(yè)的新聞列表，點(diǎn)擊某條新聞，可以看到新聞的細(xì)節(jié)，如果喜歡這條新聞，可以進(jìn)行收藏。（3）杰出校友。介紹學(xué)校的杰出校友以及他們與學(xué)校的故事。（4）我的收藏。顯示收藏過(guò)的新聞，并能顯示新聞的細(xì)節(jié)，如果不想收藏了，可以取消收藏。（5）新聞管理。完成新聞的新增、查詢、刪除、修改等后臺(tái)管理工作。

4.數(shù)據(jù)庫(kù)設(shè)計(jì)

采用騰訊提供的云端數(shù)據(jù)庫(kù)，云數(shù)據(jù)庫(kù)是非關(guān)系型的數(shù)據(jù)庫(kù)，是文檔數(shù)據(jù)庫(kù)。建立了一個(gè)集合news，其中包含若干條文檔記錄，每條文檔的結(jié)構(gòu)類似，包括文檔的id（系統(tǒng)自動(dòng)生成），新聞的發(fā)布日期pDate字段，新聞的內(nèi)容content字段，新聞圖片地址imgURL字段，新聞標(biāo)題title字段，均為字符串類型。

二、系統(tǒng)實(shí)現(xiàn)

1.“走進(jìn)校園”的實(shí)現(xiàn)

新聞網(wǎng)的首頁(yè)如圖2所示，底部是首頁(yè)、校園新聞、杰出校友、我的的入口，通過(guò)在app.json文件中設(shè)置tabBar屬性完成導(dǎo)航欄的設(shè)置。首頁(yè)中利用了view、image、text等組件完成頁(yè)面內(nèi)容的顯示。

2.“校園新聞”的實(shí)現(xiàn)

校園新聞的頁(yè)面如圖3所示，上面是輪播圖，顯示近期的新聞圖片，下面是新聞列表，單擊新聞可進(jìn)入詳情頁(yè)面，如果想收藏該新聞（尚未收藏），可以“點(diǎn)擊收藏”（圖4），如果該新聞已經(jīng)收藏，可以“取消收藏”（圖5）。（1）新聞列表頁(yè)：從數(shù)據(jù)庫(kù)中首先提取若干條JSON格式的文檔記錄，核心代碼見圖9。當(dāng)頁(yè)面上拉觸底的時(shí)候，繼續(xù)提取文檔，在wxml頁(yè)面顯示。（2）新聞詳情頁(yè)：通過(guò)文檔的id來(lái)訪問具體的新聞頁(yè)面。如該頁(yè)沒有被收藏，頁(yè)面下端顯示“點(diǎn)擊收藏”按鈕，點(diǎn)擊按鈕利用wx.setStorageSync（）方法把新聞頁(yè)保存在本地。如果該頁(yè)已收藏，頁(yè)面下端顯示“取消收藏”按鈕，點(diǎn)擊按鈕利用wx.removeStorageSync（）方法把新聞頁(yè)取消收藏。

3.“杰出校友”的實(shí)現(xiàn)

杰出校友的頁(yè)面中運(yùn)用了view、image、text等組件完成頁(yè)面內(nèi)容的顯示，通過(guò)wxss對(duì)組件內(nèi)容進(jìn)行格式化，因涉及多名校友，故而使用數(shù)組、wx：for屬性對(duì)view組件進(jìn)行列表渲染。

4.“我的”的實(shí)現(xiàn)

界面如圖6所示，利用wx.getStorageInfoSync（）讀取本地緩存信息，依次讀取每一條緩存信息，把緩存信息加入數(shù)組后依次在wxml頁(yè)面顯示。綁定tap方法，通過(guò)文檔的id鏈接跳轉(zhuǎn)到具體的新聞詳情頁(yè)。

5.“新聞管理”的實(shí)現(xiàn)

主要包括新聞頁(yè)的增加，新聞頁(yè)的瀏覽，新聞頁(yè)的刪除和修改。（1）新聞頁(yè)的增加，界面如圖7所示。獲取表單中各個(gè)輸入框的值后，利用圖10所示代碼完成新增。（2）新聞頁(yè)的瀏覽與3.2小節(jié)中的功能類似，選中一條新聞后，進(jìn)入詳情頁(yè)，界面如圖8所示，單擊“刪除”按鈕，利用圖11所示代碼完成刪除。單擊“修改”按鈕，進(jìn)入類似圖7的界面，獲取表單中各個(gè)輸入框的值后，利用圖12所示代碼完成指定新聞頁(yè)的修改。

三、結(jié)語(yǔ)

在微信平臺(tái)的廣泛應(yīng)用和移動(dòng)設(shè)備的普及下，本文設(shè)計(jì)了一套通用的新聞發(fā)布和展示系統(tǒng)，該 系 統(tǒng) 采 用 了WXML、WXSS、JavaScript等多種開發(fā)技術(shù)，可以完成前端新聞頁(yè)面的瀏覽，后端新聞頁(yè)面的管理。該系統(tǒng)具有“觸手可及”“用完即走”的輕量級(jí)用戶體驗(yàn)，無(wú)論是開發(fā)還是維護(hù)成本都要低很多，提升了用戶的體驗(yàn)。今后，還可以考慮運(yùn)用云函數(shù)來(lái)完成對(duì)云數(shù)據(jù)庫(kù)的訪問，以突破小程序端對(duì)數(shù)據(jù)庫(kù)訪問的諸多限制，提升訪問效率。

參考文獻(xiàn)：

[1]周文潔.微信小程序開發(fā)實(shí)戰(zhàn)[M].北京：清華大學(xué)出版社，2020：333-344.

[2]馬靜.基于微信小程序的購(gòu)物商城系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].微型電腦應(yīng)用，2021，37（03）：31-34.

[3]馬俊超，牟曉楓.基于微信小程序的教務(wù)平臺(tái)助手分析與設(shè)計(jì)[J].電腦知識(shí)與技術(shù)，2021，17（08）：81-82.

[4]林仙土.基于微信小程序的實(shí)驗(yàn)室安全教育系統(tǒng)研究[J].吉林大學(xué)學(xué)報(bào)（信息科學(xué)版），2021，39（02）：223-228.

【作者簡(jiǎn)介】仲泓屹（2005.07-），男，漢族，上海市人，上海市宜川中學(xué)高中一年級(jí)學(xué)生。