评论

云开发实战分享|随手记Lite小程序

从0到1手把手教你实现一个工具小程序

作者:锋少

一、做一款轻便的备忘录小工具

有次在外地出差开会,台上的演讲者妙语连珠,分享的颇具启发性,我想把这些分享都记录下来,但一时找不到合适的记录地方,于是和身边大多数人一样,打开微信在 文件传输助手或 亲人的微信开始记录。但是这种形式的记录没有形成一个完整的记录体系,且时间久了很难再找到。

会后我在软件市场找了一圈,都没有找到特别合适的软件应用:一方面它们功能太繁琐复杂,远超我的需求;另一方面像这种不是特别高频使用的 APP,说实话,我真不太愿意专门为此下载安装。

于是我想到小程序 —— 轻量、 便捷、 即开即用,用小程序开发这么一款这样做备忘录的小工具,非常合适。

二、主要功能

  • 创建备忘录:内容快速记录,支持表情和图片,自动获取标题和时间,可选择记录位置
  • 备忘录查询:历史记录按时间排序,允许记录回查,导航到记录位置
  • 备忘录修改:允许重复编辑修改

三、随手记Lite功能实现

3.1、准备工作

1、注册微信小程序账号:
方式一:直接注册(https://mp.weixin.qq.com/wxopen/waregister?action=step1)
方式二:已经有微信公众号(已认证)朋友可以直接【登录公众号】 -> 【小程序管理】 -> 【添加】->【快速注册并认证小程序】
注册完成后,找到小程序的 AppID和 AppSecret

2、下载微信开发者工具、创建项目 ,打开开发者工具,键入项目目录、项目名称、刚才的 AppID,此时项目创建成功,然后点击开发者工具上方的【云开发】开通云开发。小程序·云开发官方地址(https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html)

3.2功能实现一:

创建备忘录(用户文本及图片内容的上传存储)

1)功能简要描述:对于随手记Lite来说,为用户提供文本及图片上传,快速记录,是最基本的功能
2)从用户端到云开发的信息处理流程图及描述

如果记录中包含图片,则先上传图片,将返回的 fileID添加到数组,最后将数组和记录内容上传到云数据库;如果记录中不包含图片则直接将记录内容上传到云数据库。

3)功能核心代码
// 用户填写信息后,提交事件 
fromSubmit: function(e) {   
	let submitInfo = e.detail.value   
	let categoryId = Number(submitInfo.categoryIndex)   
	var title = submitInfo.title ? submitInfo.title : this.data.datas.title2   
	var images = [];   
	for (vari = 0; i < this.data.uploadImages.length; i++) {    
		let randString = Math.floor(Math.random() * 1000000).toString() + '.png'     
		wx.cloud.uploadFile({    
        // 以昵称创建云存储文件夹路径    
		cloudPath: wx.getStorageSync("wxUserInfo").nickName + '/' + Date.now() + '.png',     
		filePath: this.data.uploadImages[i],     
		success: res => {       
			images = images.concat(res.fileID)       
            // 图片全部上传完毕,上传记录数据       
			if (images.length == this.data.uploadImages.length) {   
			db.collection('allnote')
 			.add({         
				data: {          
				        "titlename": title,          
 					"createtime": util.formatTime2(new Date()),          
					"updatetime": null,          
					"address": submitInfo.locationName ? submitInfo.locationName : "未选择位置",          
 					"latAndLong": this.data.datas.latAndLong,          
					"content": submitInfo.content,          
					"images": images,          
					'nickName': wx.getStorageSync("wxUserInfo").nickName,         
					'avatar': wx.getStorageSync("wxUserInfo").avatarUrl,  
					'province': wx.getStorageSync("wxUserInfo").province,        
				}       
			})      
			.then(res => {         
				wx.hideLoading()         
				wx.navigateBack({})          
			})        
		}        
		},       
   	 fail: console.error    
     })   
   } 
 }
},

3.2 功能实现二:记录查询功能

1)功能简要描述:已经创建备忘录的用户,可以按照时间顺序查看所有记录及任意记录的详细内容
2)从用户端到云开发的信息处理流程图及描述

小程序端用户上传自己的 userId到云函数,云函数根据该 userId到云数据库请求对应数据,数据返回到云函数后,云函数进行排序和时间格式截取处理,最后将数据返回到小程序端。

3)功能核心代码
<!--云函数端-->
// 云函数入口函数
exports.main = async(event, context) => {  
	return await new Promise(function(resolve, reject) {    
	var notes = []    
	var notesNew = []    
	db.collection('allnote').where({     
		_openid: event.userOpenid    
	}).get().then(res => {      
		console.log(res)      
		notes = res.data      
		if (res.data) {       
      		        // 由于时间格式问题,orderBy('createtime', 'desc')排序无效,所以使用以下排序方式        
  			// 按照时间倒叙排列        
			notes.sort(function(a, b) {          
				return Date.parse(b.createtime) - Date.parse(a.createtime);         
			});        
     // 显示的时间格式转换,截取秒        
	for (var i = 0; i < res.data.length; i++) {          
		let showTime = res.data[i].createtime.substring(0, res.data[i].createtime.length - 3)          
		notes[i].showCreateTime = showTime          
        	// 数据解码         		
        	notes[i].titlename = decodeURI(notes[i].titlename)         
               // 将加入新格式的时间放入新的数组          
		notesNew.push(notes[i])        
        }        
        // 返回新的数组        
        resolve(notesNew)      
        }    
     }).catch(error => {      
	reject(error)    
    })  
 })
}
<!--小程序端--> 
// 请求心得数据  
requestNoteData: function() {    
	let _this = this;     
    	wx.cloud.callFunction({      
        name: 'getMyNote',      
        data: {        
        	userOpenid: wx.getStorageSync('userId'),       
            	skip:0      
                }    
        }).then(res => {      
        console.log(res)    
        _this.setData({        
        	notes: res.result      
            })    
       }).catch(err => {      
        	console.log(err)   
      })  
},

3.3 功能实现三:备忘录修改功能

1)功能简要描述:对于记录详细内容,用户除了可以查看时间、位置和内容之外,还可以进行内容的编辑和删除记录
2)从用户端到云开发的信息处理流程图及描述

用户修改记录时,直接上传新的记录内容和记录id调用 .update进行即可。

3)功能核心代码
<!--记录详情页数据获取-->
onLoad: function(options) {    
	// 根基记录id获取记录详情    
	db.collection('allnote')      
    	.where({        
        	_id: options._id      
            })      
	.get()      
	.then(res => {        
		console.log(res)        
        	noteData = res.data[0]        
            // 显示的时间格式转换,截取秒        
            let showTime = res.data[0].createtime.substring(0, res.data[0].createtime.length - 3)        
            noteData.createtime = showTime        
            // 数据解码,如果上传的时候没有encodeURI,则不需要decodeURI        
            noteData.titlename = decodeURI(noteData.titlename)       
            noteData.content = decodeURI(noteData.content)        
            _this.setData({          
            	noteData: noteData        
            })        
            wx.hideLoading()     
            })  
	},
  <!--更新单条记录-->  
  // 单条记录提交更新  
  fromSubmit: function(e) {    
  	let _this = this;    
    	var submitInfo = e.detail.value    
        db.collection('allnote').doc(_this.data.noteData._id).update({        
        data: {          
        	titlename: submitInfo.name,          
            	content: submitInfo.content       
 		}     
        })       
        .then(res => {           
        	wx.navigateBack({          
            })      
        })      
	.catch(console.error)  
},

四、小结

其实一开始,我的随手记LIte小程序是计划用小程序+WEB后台开发实现的,从买域名(备案···)到后台开发环境搭建占到了这个项目的2/3的时间,且域名、服务器、CA证书都需要管理续费。

有一天我收到公众号推送小程序·云开发的消息,打开一看太惊喜了,用1天时间了解学习了下,第二天我便将后台切换到了云开发。

我可以将大部分精力都放在业务的实现上,可以说是零部署,零维护,也不需要操心域名和服务器相关的东西,而且云控制台的数据和文件都是可视化管理,用户登录寥寥几行代码就可实现,常规的数据读写都封装好了接口。

期待小程序·云开发开放出更多的接口和功能···

五、项目预览

最后一次编辑于  03-07  (未经腾讯允许,不得转载)
点赞 4
收藏
评论