郭燦杰
(泉州經貿職業技術學院,福建泉州362000)
近些年,移動互聯網應用快速發展,微信小程序在網購、餐飲、生活服務、教育等領域用戶量大幅度增長。用戶只需掃一掃或搜一下就能夠打開應用,讓應用在指尖“觸手可及”。微信小程序不消耗流量、不占用內存空間且無須專門下載和安裝,用完即走。作為無處不在、隨時可用的移動應用,給大家的學習生活帶來了深刻的影響[1]。黨務工作人員在工作中經常要了解發展黨員的相關信息,通常的做法是從不同的Excel 表格中去查詢、篩選、統計需要的數據信息,這往往需要在辦公電腦上操作,加上數據大都是零散的,數據之間沒有形成聯動,當數據逐漸增多后,帶來了諸多不便,影響了信息查詢工作的效率。本文使用微信開發者工具開發一款基于微信小程序的發展黨員信息查詢系統,能夠很好地解決以上問題,讓黨務工作人員隨時隨地查詢發展黨員信息。
微信小程序是基于微信平臺的一款移動終端應用,它有成熟的框架、組件等工具,開發周期更短、流程更簡單,只需開發一個版本,即可跨平臺運行在Android 和iOS 上;非常適合低頻簡單的應用程序;大小不到1 MB,無須下載加載且速度極快;支持多級緩存,查詢獲取信息的效率更高。
微信小程序分成視圖層和邏輯層。視圖層用于實現用戶與程序的交互,由組件(Component)、WXML 文件(WeiXin Markup Language)、WXSS 文件(WeiXin Style Sheet)等元素構成。[2]組件作為頁面構成的基本元素,也是小程序界面的基本組成單元。WXML 文件使用類似于HTML 的標記性語言WXML 描述頁面的結構。WXSS 文件使用類似于CSS 的語法格式WXSS描述頁面的樣式。邏輯層負責事務邏輯處理,實現視圖層與服務器之間的數據交互,它接收來自視圖層的服務請求和事件反饋,向服務器發送請求,進行數據處理后再將結果返回給視圖層,它采用Java Script 語言編寫,所有的JS 腳本文件都存放于此[3]。
PHP 是Hypertext Preprocessor(超文本預處理器)的簡寫,它包含文本、HTML、CSS 以及PHP 代碼,具有強大的功能,可以融合像Java、C 語言、Perl 等多種語言的特點,是一種應用于Web 開發的多用途腳本語言。此外,PHP 開源免費、操作簡單、可擴展且支持面向對象,運行在像Windows、Linux 等絕大多數操作系統平臺和服務器端。在服務器端,PHP 代碼能夠被解釋成純文本返回瀏覽器端[4]。
本系統使用了一種輕量級數據交換格式JSON(JavaScript Object Notation)在微信小程序與服務器之間實現通信。JSON 使用了JavaScript 編程語言來描述數據對象,閱讀、編寫簡單,方便機器的解析和生成;任何語言編寫的服務器程序都能轉換JSON 格式數據,這有利于在客戶端和服務器端之間數據通信。相對于XML,解析速度更快,文檔更小,能更高效在客戶端進行數據處理與顯示。因此,JSON 成為手機客戶端理想的數據交換語言[5]。
根據使用權限將系統用戶分為管理員和普通用戶。管理員負責系統后臺操作,從Web 端登錄,可對發展黨員等信息進行增、刪、改、查的操作。普通用戶即為微信用戶,通過微信登錄系統前端,可設置條件查詢滿足需求的發展黨員有關信息,并進行相關數據的統計。

圖1 系統的功能結構圖
系統的功能結構圖如圖1 所示。本系統的前端開發采用的是微信小程序,后臺開發的服務器語言采用的是PHP,選擇MySQL 作為后臺數據庫。系統提供了用戶登錄、信息查詢、信息統計、信息管理等功能模塊。各模塊相輔相成,有機組成該系統,模塊間只有數據耦合,充分體現高內聚、低耦合的特點。
微信小程序組件之間通過WXML 和WXSS 的編寫來完成界面設計,構造良好的用戶體驗。系統的頁面由查詢首頁、查詢結果信息顯示頁等組成。頁面布局選擇了列表式,從上而下垂直排列各組件元素。其中采用了彈性布局Flex,在WXCSS 設置display 屬性為flex,讓頁面中的各元素垂直方向排列。頁面中使用了按鈕(button)、滾動選擇器(picker)、輸入框(input)、表單控件(form)等表單組件收集用戶輸入、選擇的各項查詢條件。
數據庫是信息的集合,通過它來組織、存儲和管理數據。MySQL 體積小、運行速度快、免費開源、支持用結構化查詢語句(SQL),為多種語言連接操作提供接口,多線程編程,系統資源利用率高,具有完整的控制措施,系統安全、穩定,是一款小型關系型數據庫管理系統。由于本系統應用的數據量不大,因而選擇MySQL 作為后臺數據庫。創建數據庫tb_fzdy,它包括兩個數據表:User 表、member 表[6]。User 表用于保存用戶基本信息,表結構如表1 所示。member 表用于保存發展黨員基本信息,表結構如表2 所示。

表1 用戶信息表(User)

表2 發展黨員基本信息表(member)
微信小程序賬號注冊,打開微信客戶端,選擇“立即注冊”,按步驟要求依次填寫賬號信息、郵箱驗證激活、上傳個人身份證件信息等,即可完成小程序的賬號注冊,成為開發者;下載微信開發者工具,安裝完成后,掃碼綁定管理員就可以開始進行系統開發。
登錄是每個程序不可缺少的環節。通過用戶授權登錄,獲取用戶唯一標識(openid)、本次登錄會話密鑰(session_key)等用戶有關的公開、加密資料信息。
用戶使用微信小程序提供的wx.login()接口獲取code(登錄憑證),通過登錄憑證、ApplD、AppSecret 換取用戶登錄態信息,包括用戶的唯一標識(openid)及登錄的會話密鑰(session key)等信息。具體的登錄步驟包括:通過wx.login()接口調用獲取code 值,并返回code 值;調用wx.request()發送code 值至開發者服務器;將code 值加上ApplD 和AppSecret 一起發送到微信服務器換取openid 和session_key。
微信小程序沒有提供直接連接MySQL 數據庫的接口,而是采用微信端小程序連接服務器端程序,再通過服務器程序連接數據庫的方式來間接連接數據庫,如圖2 所示。微信端小程序通過調用網絡接口wx.request(),發送https 網絡請求,實現與服務器端程序的連接。wx.request()只能讀取JSON 格式的數據,所以服務器端程序要形成JSON 數據才可以供微信端小程序使用。

圖2 微信小程序、服務器、數據庫的交互示意圖
服務器端程序使用PHP 語言編寫,通過PHP 的mysqli 訪問MySQL 數據庫,執行數據操作。mysqli 訪問數據庫的流程:使用mysqli_connect () 函數與MySQL 數據庫服務器創建連接;使用mysqli_connect()函數選擇MySQL 數據庫服務器上的數據庫;使用mysqli_query()來執行SQL 語句,查詢數據庫數據;使用mysqli_fetch_array()函數將查詢結果集返回數組;使用json_encode()將數組結果轉為JSON 數據,返回微信小程序顯示在前臺微信端。主要代碼如下:
$hostname="localhost";
$username="root";
$pwd="";
$datas="tb_fzdy";
$conn=mysqli_connect ($hostname,$username,$p wd); // 創建連接
mysqli_select_db($conn,$datas);
mysqli_query($conn,"set names utf8");
$que="select * from member";
$res=mysqli_query($conn,$que);
while($rs=mysqli_fetch_array($res,MYSQL_ASS OC))
{
$result1[]=$rs;
}
if($result1){
echo json_encode($result1,JSON_UNESCA PED_UNICODE);
}else{
echo mysql_error();
}
?>
在JS 文件中調用wx.request()函數,向服務器端提供的接口地址發起請求,同時攜帶從查詢頁面收集到的查詢條件作為參數一起傳遞,返回結果是JSON格式數據。使用組件
onLoad:function (options) {
var that = this
wx.request({
url:'"baseurl"+/list/list.php',
header: {
"content- type":"application/json"
},
success: function (res) {
console.log(res.data)
that.setData({
array: res.data })
}
視圖層數據列表渲染主要代碼:
運行效果如圖3 所示。

圖3 查詢結果圖
本文從黨建工作的實際出發,運用了PHP 編程語言、MySQL 數據庫研究設計了一款基于微信小程序的發展黨員信息查詢系統,用戶通過微信端登錄系統,就能夠及時、方便快捷使用微信小程序去查詢、統計發展黨員的相關信息,在提升了黨務工作者工作效率的同時,也促進了黨建業務信息化水平的提高。