基于微信小程序的“云便簽系統(tǒng)”設(shè)計

谷元滿 楊家樂 姜育祥 周晗 周駱輝

摘要：云便簽系統(tǒng)項(xiàng)目，結(jié)合微信小程序的開放能力，無需下載，實(shí)現(xiàn)應(yīng)用“觸手可及”的理念。實(shí)現(xiàn)了便簽多功能，包括公共便簽，限時便簽，私密便簽，更多功能保護(hù)在便捷用戶體驗(yàn)的同時，保證信息安全。

關(guān)鍵詞：微信小程序;云便簽;開發(fā)

中圖分類號：TP391 文獻(xiàn)標(biāo)識碼：A 文章編號：1007-9416（2019）12-0168-02

0 引言

小程序是一種新的開放能力，開發(fā)者可以快速地開發(fā)一個小程序。小程序可以在微信內(nèi)被便捷地獲取和傳播，同時具有出色的使用體驗(yàn)。無需下載就能使用的應(yīng)用，更迎合了快節(jié)奏，高便捷的用戶需求。

1 項(xiàng)目背景

傳統(tǒng)的手機(jī)便簽，其實(shí)就是一個簡單的記事本，功能單一。用戶只能填寫信息，通過增加的便簽的數(shù)量來記錄便簽信息。

在這樣的背景下，基于微信小程序的云便簽就產(chǎn)生了?；谖⑿判〕绦虻脑O(shè)計，用戶在無需下載的情況下就可以體驗(yàn)到便簽服務(wù)。

用戶可以根據(jù)自己需求選擇便簽?zāi)Ｊ剑喾N便簽?zāi)Ｊ教峁└嗟倪x擇。（1）公共便簽;（2）限時便簽;（3）私密便簽，更加注重保證用戶的信息安全。同時云便簽系統(tǒng)，自帶“轉(zhuǎn)碼”功能。能將用戶記錄的信息，生成二維碼，方便用戶打印實(shí)體便簽。實(shí)體便簽的二維碼圖案，在張貼時，能初步保證用戶的信息安全，讓人一眼無法直接獲取便簽內(nèi)的信息?？梢酝ㄟ^云便簽系統(tǒng)的掃一掃功能可以根據(jù)便簽類型獲取信息。

2 技術(shù)介紹

2.1 微信小程序相關(guān)技術(shù)

微信小程序便捷開發(fā)，即點(diǎn)即用，用戶無需下載，點(diǎn)開即用?？焖龠\(yùn)行，不占內(nèi)存，微信小程序不占用手機(jī)內(nèi)存的，其前端代碼在微信自己的服務(wù)器上。安全穩(wěn)定，保密性強(qiáng)，小程序需要通過審核才能發(fā)布，同時數(shù)據(jù)通信采用https訪問，ssl加密對域名備案規(guī)范化。功能強(qiáng)大，適用于多種場景。

2.2 We-ui相關(guān)技術(shù)

Weui是由微信官方推出的一套樣式庫，類似于css樣式，微信官方推出的，解決開發(fā)時，出現(xiàn)兼容性的問題，同時weui的推出既是廣大微信小程序開發(fā)者的福音，簡化開發(fā)，規(guī)范化小程序前端界面。

2.3 JavaScript相關(guān)技術(shù)

JavaScript是一種弱類型的腳本語言，具有優(yōu)秀的跨平臺性，減少了服務(wù)器端的工作，比如一些表單驗(yàn)證，數(shù)據(jù)的初步運(yùn)算。減少了與服務(wù)器之間的交互。JavaScript的基本語法簡單，易上手。它不需要依賴操作系統(tǒng)，在瀏覽器中就可以運(yùn)行。在題服務(wù)器端分擔(dān)工作時，JavaScript還能幫前端的css實(shí)現(xiàn)一些效果。

3 系統(tǒng)設(shè)計

3.1 系統(tǒng)的功能模塊設(shè)計

云便簽系統(tǒng)功能模塊如圖1所示。

3.2 掃一掃

用戶進(jìn)入首頁，點(diǎn)擊“掃一掃”，調(diào)用系統(tǒng)相機(jī)，可開啟掃描二維碼的功能。系統(tǒng)會根據(jù)用戶的掃描的二維碼，判斷其為什么類型的便簽。若是公共便簽，用戶即刻獲得二維碼便簽中的信息。如果是私密便簽則需用通過系統(tǒng)驗(yàn)證。

3.3 公共便簽

用戶進(jìn)入首頁，點(diǎn)擊“公共便簽”，進(jìn)入便簽記錄頁面，用戶輸入需要記錄的信息，可生成便簽。同時可以選擇，是否要圖文轉(zhuǎn)碼，將輸入的信息轉(zhuǎn)成二維碼。點(diǎn)擊“二維碼生成”，系統(tǒng)將用戶記錄的信息對應(yīng)轉(zhuǎn)成二維碼，用戶可長按保存二維碼到相冊，也可直接截圖。

3.4 限時便簽

限時便簽用戶信息及時提醒，用戶在選擇限時便簽后，可以設(shè)置便簽提醒時間和銷毀時間。及時提醒幫助用戶規(guī)范化行程，避免信息遺漏。定時銷毀，提高了用戶體驗(yàn)，避免大量便簽堆積，浪費(fèi)資源。

3.5 私密便簽

私密便簽用于保護(hù)用戶的信息的私密性，私密便簽中記錄的信息需要通過驗(yàn)證才能獲取。區(qū)別于公共的便簽，即使用戶手機(jī)被竊取，私密便簽中的信息也不會泄露。

4 項(xiàng)目的實(shí)現(xiàn)開發(fā)環(huán)境（表1）

用戶選擇便簽，便簽生成器及其保存核心代碼如下：

createQrCode： function （url， canvasId， cavW， cavH） {

//調(diào)用插件中的draw方法，繪制二維碼圖片

QR.api.draw（url， canvasId， cavW， cavH）;

setTimeout（（） => {

this.canvasToTempImage（）;

}， 1000）;}，

//獲取臨時緩存照片路徑，存入data中

canvasToTempImage： function （） {

//把當(dāng)前畫布指定區(qū)域的內(nèi)容導(dǎo)出生成指定大小的圖片，并返回文件路徑。

var that = this;

wx.canvasToTempFilePath（{

canvasId： 'mycanvas'，

success： function （res） {

console.log（res， "dadas"）

var tempFilePath = res.tempFilePath;

console.log（tempFilePath）;

that.setData（{

imagePath： tempFilePath}）;}， }）; }，

5 結(jié)論

本文介紹的是基于微信小程序的云便簽設(shè)計。通過發(fā)現(xiàn)普通便簽在使用過程中的不足，結(jié)合微信小程序即點(diǎn)即用的方式，快速開發(fā)。運(yùn)用微信官方團(tuán)推提供的weui，規(guī)范化設(shè)計系統(tǒng)前端界面。用戶通過手機(jī)掃描二維碼可獲取信息，也可通過系統(tǒng)選擇性生成二維碼，提高用戶的選擇和信息安全。

參考文獻(xiàn)

[1] 劉嘉琳，梁博，李坤，等.基于微信小程序的“一帶一路”信息及路線動態(tài)可視化[J].北京測繪，2018，32（11）：1293-1296.

[2] 田智雁，張曉麗，梁波.基于微信小程序的學(xué)生家校信息系統(tǒng)設(shè)計與實(shí)現(xiàn)[J].軟件導(dǎo)刊，2018，17（09）：122-124.

Design of? "Cloud Note System" Based on Wechat Applet

GU Yuan-man，YANG Jia-le，JIANG Yu-xiang，ZHOU Han，ZHOU Luo-hui

（Jiangsu Maritime Institute， Nanjing? Jiangsu? 211100）

Abstract：The cloud note system project， combined with the open ability of wechat applet， does not need to download， and realizes the application of the concept of "within reach". It realizes the multi-function of notes， including public notes， time limited notes， private notes， and more functions to protect the convenient user experience and ensure information security.

Key words：wechat applet; cloud notes; development