微信小程序的云笔记平台设计与实现
- 一、课题背景与意义
- 二、研究内容与方法
- 三、预期成果与进度安排
- 四、界面展示
- 五、源码获取
一、课题背景与意义
随着移动互联网的发展，人们对于信息记录和储存的需求越来越高，希望能够随时随地记录、整理和分享自己的信息。微信小程序作为一种新型的应用形态，具有方便快捷、用户无需下载安装等优点，备受用户和开发者青睐。因此，设计一个基于微信小程序的云笔记平台具有很高的实际应用价值和使用价值。
本课题旨在结合微信小程序的理论知识和编程设计，实现一个具有文字笔记、图片笔记和笔记分享功能的云笔记平台，并融合云储存和实时更新等技术，提高用户的信息管理效率和便利性。本课题的研究成果将有助于提高学生知识的综合利用能力以及分析问题、解决问题的能力，同时也可以为相关领域的开发提供一定的参考价值。
二、研究内容与方法
本课题的研究内容主要包括以下几个方面：
微信小程序开发环境的研究：了解微信小程序的开发框架、开发流程和相关API的使用，为后续的设计和实现提供技术基础。
云笔记平台功能设计：根据需求分析，设计出文字笔记、图片笔记和笔记分享等核心功能，并考虑用户交互体验和数据安全等方面的问题。
云储存和实时更新技术的研究：了解常见的云储存技术及其应用，研究如何将云储存技术应用到云笔记平台中，并实现实时更新功能，保证数据的及时性和一致性。
微信小程序与云笔记平台的集成：研究如何将微信小程序与云笔记平台进行集成，实现用户通过微信小程序快速访问和操作云笔记平台的功能。
测试与优化：对开发完成的云笔记平台进行全面测试，发现并解决存在的问题，优化性能和用户体验。
本课题采用的研究方法主要包括文献调研、需求分析和系统设计等。首先通过文献调研了解微信小程序和云储存等相关技术的研究现状和发展趋势，明确研究方向；其次进行需求分析，深入了解用户需求，为系统设计提供依据；最后进行系统设计，实现云笔记平台的核心功能并对其进行测试与优化。
三、预期成果与进度安排
本课题预期设计出一个功能完备、性能稳定、用户体验良好的基于微信小程序的云笔记平台。具体成果包括：
完成微信小程序开发环境的搭建和相关API的学习与使用，为云笔记平台的开发提供技术支持。
完成云笔记平台的功能设计，实现文字笔记、图片笔记和笔记分享等核心功能，并进行用户交互体验和数据安全等方面的优化。
研究并实现云储存和实时更新技术，将云储存技术应用到云笔记平台中，保证数据的及时性和一致性，提高用户的信息管理效率和便利性。
完成微信小程序与云笔记平台的集成，实现用户通过微信小程序快速访问和操作云笔记平台的功能，提高用户的使用体验。
对开发完成的云笔记平台进行全面测试，发现并解决存在的问题，优化性能和用户体验。最终形成一套完整的基于微信小程序的云笔记平台设计方案，并进行实践验证。
进度安排方面，本课题计划在第一年完成微信小程序开发环境的搭建和相关API的学习与使用，同时进行云储存和实时更新技术的调研和学习；第二年进行云笔记平台的功能设计和实现，并进行用户交互体验和数据安全等方面的优化；第三年进行微信小程序与云笔记平台的集成，并进行全面测试和优化；最后一年进行总结与论文撰写。
四、界面展示
getUserProfile(e) {
// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
wx.getUserProfile({
desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
success: (res) => {
console.log(res)
wx.setStorageSync("user", res.userInfo)
wx.switchTab({
url: '/pages/index/index',
})
},fail(e){
console.log(e)
wx.showModal({
title: '警告',
content: '您点击了拒绝授权,将无法进入小程序,请重新授权',
showCancel: false,
confirmText: '返回授权',
success: function (res) {
if (res.confirm) {
console.log('用户点击了“返回授权')
}
}
})
}
})
},
getNotes(){
db.collection("notes").orderBy('time','desc').get().then(res=>{
this.setData({note:res.data})
this.setWaterFlow()
})
},
setWaterFlow(){
wx.lin.renderWaterFlow(this.data.note, true ,()=>{
console.log('渲染成功')
})
},
submit(event) {
wx.showLoading({
title: '正在上传...',
})
const {detail} = event;
//console.log(detail)
const title=detail.values.title
const info=detail.values.info
const imgs=detail.values.imgs
if(title==''){wx.showToast({title: '请填写标题！', });return }
if(info==''){wx.showToast({title: '请填写内容！', });return }
if(imgs.length==0){wx.showToast({title: '请选择图片！', });return }
const upFile=this.uploadFileAction(imgs)
.then(() => {
console.log(this.data.urls)
db.collection("notes").add({
data:{
time:formatTime(new Date()),
title:title,
info:info,
urls:this.data.urls,
user:wx.getStorageSync('user')
}
}) .then(res => {
console.log(res)
const imgView=this.selectComponent("#imgs")
imgView.linClearImage()
wx.hideLoading();
this.setData({
title:'',
info:""
})
wx.showToast({
title: '上传成功！',
})
setTimeout(()=>{
console.log("回调")
wx.switchTab({
url: '/pages/index/index',
})
},2000)
}).catch(console.error)
})
.catch(console.error)
},
<view class="weui-cell weui-cell_access" hover-class="weui-cell_active">
<view class="userInfo">
<open-data class="thumb" type="userAvatarUrl"></open-data>
<open-data class="name" lang="zh_CN" type="userNickName"></open-data>
</view>
</view>
</view>
<view class='thefirst'></view>
<view class='thesecond'></view>
<view class='list'>
<l-list title="我的笔记" icon="order" bind:lintap="myNote" />
<l-list title="系统消息" icon="notification" bind:lintap="msg" />
<l-list title="联系客服" icon="customer-service" bind:lintap="kefu" />
<l-list title="帮助信息" icon="help" bind:lintap="help" />
<l-list title="系统设置" icon="setting" bind:lintap="set" />
<l-list title="安全退出" icon="backward" bind:lintap="logout" />
</view>
del(e){
console.log(e)
wx.showModal({
title: '警告',
content: '确定要删除吗？',
success: (res) => {
console.log(res)
if (res.cancel) {
return
}
db.collection("notes").where({_id:e.currentTarget.id}).remove().then(rs=>{
wx.showToast({
title: '删除成功！',
})
this.getMyNote()
})
}
})
async uploadFileAction(imgs){
const urls=await uploadfils(imgs).then(res=>{
console.log("1上传后返回的FileId_2：",res)
this.setData({urls:res})
});
},const uploadfiles=(imgsArr)=>{
var urls=[]
return new Promise((resolve,reject)=>{
imgsArr.forEach(element => {
urls.push(new Promise((reso,reje)=>{
const idx=element.lastIndexOf('.');
const ext=element.substr(idx);
//let suffix = /\.\w+$/.exec(item)[0];//正则表达式返回文件的扩展名
const fileName=Math.floor(Math.random()*1000000000000)+ext
wx.cloud.uploadFile({
cloudPath: 'images/'+fileName,
filePath: element, // 文件路径
})
.then(res => {
console.log("成功：",res)
reso(res.fileID)
}).catch(error => {
wx.showToast({
title: '文件上传失败！',
})
reje(error)
})
}))
});
Promise.all(urls).then(res=>{
resolve(res)
}).catch(err=>{
reject(err)
})
})
}
wx.showShareMenu({
withShareTicket: true,
menus: ['shareAppMessage', 'shareTimeline']
})
console.log(options)
db.collection("notes").doc(options.id).get().then(res=>{
console.log(res)
this.setData({info:res.data})
})
