基于微信小程序的通用新聞網的開發與實現

摘要：隨著移動互聯網的蓬勃興起，微信小程序以無需下載安裝、用完即走、隨時可用等特點，得到了廣泛應用。本文利用微信小程序開發了一款通用新聞網系統，設計并實現了前端新聞瀏覽和后端新聞管理的功能。

關鍵詞：微信小程序;新聞網;開發

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

一、系統分析與設計

1.需求分析

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

2.系統總體架構

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

3.功能模塊

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

4.數據庫設計

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

二、系統實現

1.“走進校園”的實現

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

2.“校園新聞”的實現

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

3.“杰出校友”的實現

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

4.“我的”的實現

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

5.“新聞管理”的實現

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

三、結語

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

參考文獻：

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

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

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

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

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