基于微信小程序的“云便簽系統”設計

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

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

關鍵詞：微信小程序;云便簽;開發

中圖分類號：TP391 文獻標識碼：A 文章編號：1007-9416（2019）12-0168-02

0 引言

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

1 項目背景

傳統的手機便簽，其實就是一個簡單的記事本，功能單一。用戶只能填寫信息，通過增加的便簽的數量來記錄便簽信息。

在這樣的背景下，基于微信小程序的云便簽就產生了。基于微信小程序的設計，用戶在無需下載的情況下就可以體驗到便簽服務。

用戶可以根據自己需求選擇便簽模式，多種便簽模式提供更多的選擇。（1）公共便簽;（2）限時便簽;（3）私密便簽，更加注重保證用戶的信息安全。同時云便簽系統，自帶“轉碼”功能。能將用戶記錄的信息，生成二維碼，方便用戶打印實體便簽。實體便簽的二維碼圖案，在張貼時，能初步保證用戶的信息安全，讓人一眼無法直接獲取便簽內的信息。可以通過云便簽系統的掃一掃功能可以根據便簽類型獲取信息。

2 技術介紹

2.1 微信小程序相關技術

微信小程序便捷開發，即點即用，用戶無需下載，點開即用。快速運行，不占內存，微信小程序不占用手機內存的，其前端代碼在微信自己的服務器上。安全穩定，保密性強，小程序需要通過審核才能發布，同時數據通信采用https訪問，ssl加密對域名備案規范化。功能強大，適用于多種場景。

2.2 We-ui相關技術

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

2.3 JavaScript相關技術

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

3 系統設計

3.1 系統的功能模塊設計

云便簽系統功能模塊如圖1所示。

3.2 掃一掃

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

3.3 公共便簽

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

3.4 限時便簽

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

3.5 私密便簽

私密便簽用于保護用戶的信息的私密性，私密便簽中記錄的信息需要通過驗證才能獲取。區別于公共的便簽，即使用戶手機被竊取，私密便簽中的信息也不會泄露。

4 項目的實現開發環境（表1）

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

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

//調用插件中的draw方法，繪制二維碼圖片

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

setTimeout（（） => {

this.canvasToTempImage（）;

}， 1000）;}，

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

canvasToTempImage： function （） {

//把當前畫布指定區域的內容導出生成指定大小的圖片，并返回文件路徑。

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 結論

本文介紹的是基于微信小程序的云便簽設計。通過發現普通便簽在使用過程中的不足，結合微信小程序即點即用的方式，快速開發。運用微信官方團推提供的weui，規范化設計系統前端界面。用戶通過手機掃描二維碼可獲取信息，也可通過系統選擇性生成二維碼，提高用戶的選擇和信息安全。

參考文獻

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

[2] 田智雁，張曉麗，梁波.基于微信小程序的學生家校信息系統設計與實現[J].軟件導刊，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