谷元滿(mǎn) 楊家樂(lè) 姜育祥 周晗 周駱輝

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

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

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

0 引言

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

1 項(xiàng)目背景

傳統(tǒng)的手機(jī)便簽，其實(shí)就是一個(gè)簡(jiǎn)單的記事本，功能單一。用戶(hù)只能填寫(xiě)信息，通過(guò)增加的便簽的數(shù)量來(lái)記錄便簽信息。

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

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

2 技術(shù)介紹

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

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

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

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

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

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

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

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

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

3.2 掃一掃

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

3.3 公共便簽

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

3.4 限時(shí)便簽

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

3.5 私密便簽

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

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

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

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

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

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

setTimeout（（） => {

this.canvasToTempImage（）;

}， 1000）;}，

//獲取臨時(shí)緩存照片路徑，存入data中

canvasToTempImage： function （） {

//把當(dāng)前畫(huà)布指定區(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è)計(jì)。通過(guò)發(fā)現(xiàn)普通便簽在使用過(guò)程中的不足，結(jié)合微信小程序即點(diǎn)即用的方式，快速開(kāi)發(fā)。運(yùn)用微信官方團(tuán)推提供的weui，規(guī)范化設(shè)計(jì)系統(tǒng)前端界面。用戶(hù)通過(guò)手機(jī)掃描二維碼可獲取信息，也可通過(guò)系統(tǒng)選擇性生成二維碼，提高用戶(hù)的選擇和信息安全。

參考文獻(xiàn)

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

[2] 田智雁，張曉麗，梁波.基于微信小程序的學(xué)生家校信息系統(tǒng)設(shè)計(jì)與實(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