基于微信小程序的通用新聞網(wǎng)的開發(fā)與實現(xiàn)

摘要：隨著移動互聯(lián)網(wǎng)的蓬勃興起，微信小程序以無需下載安裝、用完即走、隨時可用等特點，得到了廣泛應用。本文利用微信小程序開發(fā)了一款通用新聞網(wǎng)系統(tǒng)，設計并實現(xià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ā)布，它依托超級APP微信平臺，只需要掃描二維碼或者直接搜索，就能打開使用，用戶不用擔心安裝太多的應用而帶來手機的存儲容量問題，因無需下載安裝、用完即走、隨時可用等特點而得到了廣泛的應用。受用戶使用習慣的原因，師生很少會通過電腦訪問校園新聞去關注學校的新聞，造成很多師生不知道學校的一些重大事件，引起了諸多不便。本文基于微信小程序開發(fā)的通用校園新聞網(wǎng)就是為了解決這一問題，通過與校園網(wǎng)站數(shù)據(jù)共享來實現(xiàn)校園網(wǎng)的通常操作，方便學生和老師能隨時查閱校園新聞。該系統(tǒng)可以運用于不同的場景，可以是校園新聞，企業(yè)新聞等。為了方便描述，下文以我校校園新聞網(wǎng)舉例進行介紹。

一、系統(tǒng)分析與設計

1.需求分析

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

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

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

3.功能模塊

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

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

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

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

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

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

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

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

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

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

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

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

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

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

三、結語

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

參考文獻：

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

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

[3]馬俊超，牟曉楓.基于微信小程序的教務平臺助手分析與設計[J].電腦知識與技術，2021，17（08）：81-82.

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

【作者簡介】仲泓屹（2005.07-），男，漢族，上海市人，上海市宜川中學高中一年級學生。