基于微信小程序的發(fā)展黨員信息查詢系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

郭燦杰

（泉州經(jīng)貿(mào)職業(yè)技術(shù)學(xué)院，福建泉州362000）

近些年，移動(dòng)互聯(lián)網(wǎng)應(yīng)用快速發(fā)展，微信小程序在網(wǎng)購(gòu)、餐飲、生活服務(wù)、教育等領(lǐng)域用戶量大幅度增長(zhǎng)。用戶只需掃一掃或搜一下就能夠打開應(yīng)用，讓應(yīng)用在指尖“觸手可及”。微信小程序不消耗流量、不占用內(nèi)存空間且無須專門下載和安裝，用完即走。作為無處不在、隨時(shí)可用的移動(dòng)應(yīng)用，給大家的學(xué)習(xí)生活帶來了深刻的影響[1]。黨務(wù)工作人員在工作中經(jīng)常要了解發(fā)展黨員的相關(guān)信息，通常的做法是從不同的Excel 表格中去查詢、篩選、統(tǒng)計(jì)需要的數(shù)據(jù)信息，這往往需要在辦公電腦上操作，加上數(shù)據(jù)大都是零散的，數(shù)據(jù)之間沒有形成聯(lián)動(dòng)，當(dāng)數(shù)據(jù)逐漸增多后，帶來了諸多不便，影響了信息查詢工作的效率。本文使用微信開發(fā)者工具開發(fā)一款基于微信小程序的發(fā)展黨員信息查詢系統(tǒng)，能夠很好地解決以上問題，讓黨務(wù)工作人員隨時(shí)隨地查詢發(fā)展黨員信息。

1 開發(fā)技術(shù)

1.1 微信小程序

微信小程序是基于微信平臺(tái)的一款移動(dòng)終端應(yīng)用，它有成熟的框架、組件等工具，開發(fā)周期更短、流程更簡(jiǎn)單，只需開發(fā)一個(gè)版本，即可跨平臺(tái)運(yùn)行在Android 和iOS 上；非常適合低頻簡(jiǎn)單的應(yīng)用程序；大小不到1 MB,無須下載加載且速度極快；支持多級(jí)緩存，查詢獲取信息的效率更高。

微信小程序分成視圖層和邏輯層。視圖層用于實(shí)現(xiàn)用戶與程序的交互，由組件（Component）、WXML 文件（WeiXin Markup Language）、WXSS 文件（WeiXin Style Sheet）等元素構(gòu)成。[2]組件作為頁面構(gòu)成的基本元素,也是小程序界面的基本組成單元。WXML 文件使用類似于HTML 的標(biāo)記性語言WXML 描述頁面的結(jié)構(gòu)。WXSS 文件使用類似于CSS 的語法格式WXSS描述頁面的樣式。邏輯層負(fù)責(zé)事務(wù)邏輯處理，實(shí)現(xiàn)視圖層與服務(wù)器之間的數(shù)據(jù)交互，它接收來自視圖層的服務(wù)請(qǐng)求和事件反饋，向服務(wù)器發(fā)送請(qǐng)求，進(jìn)行數(shù)據(jù)處理后再將結(jié)果返回給視圖層，它采用Java Script 語言編寫，所有的JS 腳本文件都存放于此[3]。

1.2 PHP

PHP 是Hypertext Preprocessor（超文本預(yù)處理器）的簡(jiǎn)寫，它包含文本、HTML、CSS 以及PHP 代碼，具有強(qiáng)大的功能，可以融合像Java、C 語言、Perl 等多種語言的特點(diǎn)，是一種應(yīng)用于Web 開發(fā)的多用途腳本語言。此外，PHP 開源免費(fèi)、操作簡(jiǎn)單、可擴(kuò)展且支持面向?qū)ο?，運(yùn)行在像Windows、Linux 等絕大多數(shù)操作系統(tǒng)平臺(tái)和服務(wù)器端。在服務(wù)器端，PHP 代碼能夠被解釋成純文本返回瀏覽器端[4]。

1.3 JSON 數(shù)據(jù)

本系統(tǒng)使用了一種輕量級(jí)數(shù)據(jù)交換格式JSON（JavaScript Object Notation）在微信小程序與服務(wù)器之間實(shí)現(xiàn)通信。JSON 使用了JavaScript 編程語言來描述數(shù)據(jù)對(duì)象，閱讀、編寫簡(jiǎn)單，方便機(jī)器的解析和生成；任何語言編寫的服務(wù)器程序都能轉(zhuǎn)換JSON 格式數(shù)據(jù)，這有利于在客戶端和服務(wù)器端之間數(shù)據(jù)通信。相對(duì)于XML，解析速度更快，文檔更小，能更高效在客戶端進(jìn)行數(shù)據(jù)處理與顯示。因此，JSON 成為手機(jī)客戶端理想的數(shù)據(jù)交換語言[5]。

2 系統(tǒng)設(shè)計(jì)

2.1 需求分析

根據(jù)使用權(quán)限將系統(tǒng)用戶分為管理員和普通用戶。管理員負(fù)責(zé)系統(tǒng)后臺(tái)操作，從Web 端登錄，可對(duì)發(fā)展黨員等信息進(jìn)行增、刪、改、查的操作。普通用戶即為微信用戶，通過微信登錄系統(tǒng)前端，可設(shè)置條件查詢滿足需求的發(fā)展黨員有關(guān)信息，并進(jìn)行相關(guān)數(shù)據(jù)的統(tǒng)計(jì)。

2.2 總體設(shè)計(jì)

圖1 系統(tǒng)的功能結(jié)構(gòu)圖

系統(tǒng)的功能結(jié)構(gòu)圖如圖1 所示。本系統(tǒng)的前端開發(fā)采用的是微信小程序，后臺(tái)開發(fā)的服務(wù)器語言采用的是PHP，選擇MySQL 作為后臺(tái)數(shù)據(jù)庫。系統(tǒng)提供了用戶登錄、信息查詢、信息統(tǒng)計(jì)、信息管理等功能模塊。各模塊相輔相成，有機(jī)組成該系統(tǒng)，模塊間只有數(shù)據(jù)耦合，充分體現(xiàn)高內(nèi)聚、低耦合的特點(diǎn)。

2.3 界面設(shè)計(jì)

微信小程序組件之間通過WXML 和WXSS 的編寫來完成界面設(shè)計(jì),構(gòu)造良好的用戶體驗(yàn)。系統(tǒng)的頁面由查詢首頁、查詢結(jié)果信息顯示頁等組成。頁面布局選擇了列表式，從上而下垂直排列各組件元素。其中采用了彈性布局Flex，在WXCSS 設(shè)置display 屬性為flex,讓頁面中的各元素垂直方向排列。頁面中使用了按鈕（button）、滾動(dòng)選擇器（picker）、輸入框(input)、表單控件（form）等表單組件收集用戶輸入、選擇的各項(xiàng)查詢條件。

2.4 數(shù)據(jù)庫設(shè)計(jì)

數(shù)據(jù)庫是信息的集合，通過它來組織、存儲(chǔ)和管理數(shù)據(jù)。MySQL 體積小、運(yùn)行速度快、免費(fèi)開源、支持用結(jié)構(gòu)化查詢語句（SQL），為多種語言連接操作提供接口，多線程編程，系統(tǒng)資源利用率高，具有完整的控制措施，系統(tǒng)安全、穩(wěn)定，是一款小型關(guān)系型數(shù)據(jù)庫管理系統(tǒng)。由于本系統(tǒng)應(yīng)用的數(shù)據(jù)量不大，因而選擇MySQL 作為后臺(tái)數(shù)據(jù)庫。創(chuàng)建數(shù)據(jù)庫tb_fzdy，它包括兩個(gè)數(shù)據(jù)表：User 表、member 表[6]。User 表用于保存用戶基本信息，表結(jié)構(gòu)如表1 所示。member 表用于保存發(fā)展黨員基本信息，表結(jié)構(gòu)如表2 所示。

表1 用戶信息表（User）

表2 發(fā)展黨員基本信息表（member）

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

3.1 微信小程序開發(fā)準(zhǔn)備

微信小程序賬號(hào)注冊(cè)，打開微信客戶端，選擇“立即注冊(cè)”，按步驟要求依次填寫賬號(hào)信息、郵箱驗(yàn)證激活、上傳個(gè)人身份證件信息等，即可完成小程序的賬號(hào)注冊(cè)，成為開發(fā)者；下載微信開發(fā)者工具，安裝完成后，掃碼綁定管理員就可以開始進(jìn)行系統(tǒng)開發(fā)。

3.2 用戶登錄

登錄是每個(gè)程序不可缺少的環(huán)節(jié)。通過用戶授權(quán)登錄，獲取用戶唯一標(biāo)識(shí)（openid）、本次登錄會(huì)話密鑰（session_key）等用戶有關(guān)的公開、加密資料信息。

用戶使用微信小程序提供的wx.login（）接口獲取code（登錄憑證),通過登錄憑證、ApplD、AppSecret 換取用戶登錄態(tài)信息,包括用戶的唯一標(biāo)識(shí)（openid）及登錄的會(huì)話密鑰（session key）等信息。具體的登錄步驟包括：通過wx.login（）接口調(diào)用獲取code 值，并返回code 值；調(diào)用wx.request（）發(fā)送code 值至開發(fā)者服務(wù)器；將code 值加上ApplD 和AppSecret 一起發(fā)送到微信服務(wù)器換取openid 和session_key。

3.3 查詢實(shí)現(xiàn)

微信小程序沒有提供直接連接MySQL 數(shù)據(jù)庫的接口，而是采用微信端小程序連接服務(wù)器端程序,再通過服務(wù)器程序連接數(shù)據(jù)庫的方式來間接連接數(shù)據(jù)庫，如圖2 所示。微信端小程序通過調(diào)用網(wǎng)絡(luò)接口wx.request（），發(fā)送https 網(wǎng)絡(luò)請(qǐng)求，實(shí)現(xiàn)與服務(wù)器端程序的連接。wx.request（）只能讀取JSON 格式的數(shù)據(jù),所以服務(wù)器端程序要形成JSON 數(shù)據(jù)才可以供微信端小程序使用。

圖2 微信小程序、服務(wù)器、數(shù)據(jù)庫的交互示意圖

服務(wù)器端程序使用PHP 語言編寫，通過PHP 的mysqli 訪問MySQL 數(shù)據(jù)庫，執(zhí)行數(shù)據(jù)操作。mysqli 訪問數(shù)據(jù)庫的流程：使用mysqli_connect （） 函數(shù)與MySQL 數(shù)據(jù)庫服務(wù)器創(chuàng)建連接；使用mysqli_connect（）函數(shù)選擇MySQL 數(shù)據(jù)庫服務(wù)器上的數(shù)據(jù)庫；使用mysqli_query（）來執(zhí)行SQL 語句，查詢數(shù)據(jù)庫數(shù)據(jù)；使用mysqli_fetch_array（）函數(shù)將查詢結(jié)果集返回?cái)?shù)組；使用json_encode（）將數(shù)組結(jié)果轉(zhuǎn)為JSON 數(shù)據(jù)，返回微信小程序顯示在前臺(tái)微信端。主要代碼如下：

$hostname="localhost";

$username="root";

$pwd="";

$datas="tb_fzdy";

$conn=mysqli_connect （$hostname,$username,$p wd）; // 創(chuàng)建連接

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（）;

}

?>

3.4 查詢操作

在JS 文件中調(diào)用wx.request（）函數(shù)，向服務(wù)器端提供的接口地址發(fā)起請(qǐng)求，同時(shí)攜帶從查詢頁面收集到的查詢條件作為參數(shù)一起傳遞，返回結(jié)果是JSON格式數(shù)據(jù)。使用組件 中的wx:for 屬性循環(huán)返回JSON 數(shù)組，在查詢結(jié)果頁面中列表渲染顯示數(shù)據(jù)結(jié)果集。邏輯處理的JS 代碼如下：

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 }）

}

視圖層數(shù)據(jù)列表渲染主要代碼：

運(yùn)行效果如圖3 所示。

圖3 查詢結(jié)果圖

4 結(jié)束語

本文從黨建工作的實(shí)際出發(fā)，運(yùn)用了PHP 編程語言、MySQL 數(shù)據(jù)庫研究設(shè)計(jì)了一款基于微信小程序的發(fā)展黨員信息查詢系統(tǒng)，用戶通過微信端登錄系統(tǒng)，就能夠及時(shí)、方便快捷使用微信小程序去查詢、統(tǒng)計(jì)發(fā)展黨員的相關(guān)信息，在提升了黨務(wù)工作者工作效率的同時(shí)，也促進(jìn)了黨建業(yè)務(wù)信息化水平的提高。