基于微信小程序的“云便签系统”设计.doc

文档介绍：基于微信小程序的“云便签系统”设计
摘要:云便簽系统项目,结合微信小程序的开放能力,无需下载,实现应用“触手可及”的理念。实现了便签多功能,包括公共便签,限时便签,私密便签,更多功能保护在便捷用户体验的同时,保证信息安全。
的交互。JavaScript的基本语法简单,易上手。它不需要依赖操作系统,在浏览器中就可以运行。在题服务器端分担工作时,JavaScript还能帮前端的css实现一些效果。
3 系统设计
系统的功能模块设计
云便签系统功能模块如图1所示。
扫一扫
用户进入首页,点击“扫一扫”,调用系统相机,可开启扫描二维码的功能。系统会根据用户的扫描的二维码,判断其为什么类型的便签。若是公共便签,用户即刻获得二维码便签中的信息。如果是私密便签则需用通过系统验证。
公共便签
用户进入首页,点击“公共便签”,进入便签记录页面,用户输入需要记录的信息,可生成便签。同时可以选择,是否要图文转码,将输入的信息转成二维码。点击“二维码生成”,系统将用户记录的信息对应转成二维码,用户可长按保存二维码到相册,也可直接截图。
限时便签
限时便签用户信息及时提醒,用户在选择限时便签后,可以设置便签提醒时间和销毁时间。及时提醒帮助用户规范化行程,避免信息遗漏。定时销毁,提高了用户体验,避免大量便签堆积,浪费资源。
私密便签
私密便签用于保护用户的信息的私密性,私密便签中记录的信息需要通过验证才能获取。区别于公共的便签,即使用户手机被窃取,私密便签中的信息也不会泄露。
4 项目的实现开发环境(表1)
用户选择便签,便签生成器及其保存核心代码如下:
createQrCode: function (url, canvasId, cavW, cavH) {
//调用插件中的draw方法,绘制二维码图片
(url, canvasId, cavW, cavH);
setTimeout(()=> {
();
}, 1000);},
//获取临时缓存照片路径,存入data中
canvasToTempImage: function () {
//把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径。
var that=this;
({
canvasId: 'mycanvas',
success: function (res) {
(res, "dadas")
var tempFilePath=;
(tempFilePath);
({
imagePath: tempFilePath});}, }); },
5 结论
本文介绍的是基于微信小程序的云便签设计。通过发现普通便签在使用过程中的不足,结合微信小程序即点即用的方式,快速开发。运用微信官方团推提供的we