笔者最近涉猎了小程序相关的知识,于是利用周末时间开发了一款类似于同事的小程序,深度体验了小程序云开发模式提供的云函数、数据库、存储三大能力。关于云开发,可参考文档:小程序·云开发。

个人感觉云开发带来的最大好处是鉴权流程的简化和对后端的弱化,所以像笔者这种从未接触过小程序开发的人也能够在周末两天时间内开发出一个功能完备、体验闭环的勉强能用的产品。

最后,本文并不是搬运官方文档,也不会详细介绍开发工具和云开发后台的使用,所以建议结合上面给出文档链接一起消化本文。

功能分析

该小程序功能目前较为简单(发布帖子、浏览帖子、发布评论),可用下图表示,无需赘述:

由架构图可知,云开发的数据库(存帖子、存评论)、存储(图片)、云函数(读、写、更新数据库等)都将涉及,很好地达到了练手的目的

发布帖子

如果帖子不带图片,直接写数据库即可,如果带图片则需要先存入图片到云开发提供的存储中,拿到返回的fileId(可理解为图片的url)再一并写入数据库,核心代码:

    for (let i = 0; i < img_url.length; i++) {var str = img_url[i];var obj = str.lastIndexOf("/");var fileName = str.substr(obj + 1)console.log(fileName)wx.cloud.uploadFile({cloudPath: 'post_images/' + fileName,//必须指定文件名,否则返回的文件id不对filePath: img_url[i], // 小程序临时文件路径success: res => {// get resource ID: console.log(res)//把上传成功的图片的地址放入数组中img_url_ok.push(res.fileID)//如果全部传完,则可以将图片路径保存到数据库if (img_url_ok.length == img_url.length) {console.log(img_url_ok)that.publish(img_url_ok)}},fail: err => {// handle errorconsole.log('fail: ' + err.errMsg)}})}  

通过img_url_ok.length == img_url.length我们确定所有图片已经上传完成并返回了对应的id,然后执行写入数据库的操作:

/*** 执行发布时图片已经上传完成,写入数据库的是图片的fileId*/publish: function(img_url_ok) {wx.cloud.init()wx.cloud.callFunction({name: 'publish_post',data: {openid: app.globalData.openId,// 这个云端其实能直接拿到author_name: app.globalData.userInfo.nickName,content: this.data.content,image_url: img_url_ok,publish_time: "",update_time: ""//目前让服务器自己生成这两个时间},success: function (res) {// 强制刷新,这个传参很粗暴var pages = getCurrentPages();             //  获取页面栈var prevPage = pages[pages.length - 2];    // 上一个页面prevPage.setData({update: true})wx.hideLoading()wx.navigateBack({delta: 1})},fail: console.error})},

通过wx.cloud.callFunction我们调用了一个云函数(通过name指定函数名),并将帖子内容content和图片image_url以及其他信息(发布者昵称、id等)一并传到云端。然后再看看这个云函数:

exports.main = async (event, context) => {try {return await db.collection('post_collection').add({// data 字段表示需新增的 JSON 数据data: {// 发布时小程序传入//author_id: event.openid,不要自己传,用sdk自带的author_id: event.userInfo.openId,author_name: event.author_name,content: event.content,image_url: event.image_url,// 服务器时间和本地时间会造成什么影响,需要评估publish_time: new Date(),// update_time: event.update_time,// 最近一次更新时间,发布或者评论触发更新,目前用服务器端时间update_time: new Date(),// 默认值,一些目前还没开发,所以没设置// comment_count: 0,//评论数,直接读数据库,避免两个数据表示同一含义watch_count: 3,//浏览数// star_count: 0,//TODO:收藏人数}})} catch (e) {console.error(e)}
}

可以看到,云函数写入了一条数据库记录,我们的参数通过event这个变量带了进来。

获取帖子列表

所谓获取帖子列表其实就是读上一节写入的数据库,但是我们并不需要全部信息(例如图片url),并且要求按照时间排序,如果熟悉数据库的话,会发现这又是一条查询语句罢了:

exports.main = async (event, context) => {return {postlist: await db.collection('post_collection').field({// 指定需要返回的字段_id: true,author_name: true,content: true,title: true,watch_count: true}).orderBy('update_time', 'desc').get(),//指定排序依据}
}

浏览帖子内容

浏览帖子内容及给定一个帖子的id,由帖子列表点击时带入:

  onItemClick: function (e) {console.log(e.currentTarget.dataset.postid)wx.navigateTo({url: '../postdetail/postdetail?postid=' + e.currentTarget.dataset.postid,})},

然后在云函数中根据这个id拿到全部数据:

exports.main = async (event, context) => {return {postdetail: await db.collection('post_collection').where({_id: event.postid}).get(),}
}

拿到全部数据后,再根据图片id去加载贴子的图片:

    // 获取内容wx.cloud.callFunction({// 云函数名称 name: 'get_post_detail',data: {postid: options.postid},success: function (res) {var postdetail = res.result.postdetail.data[0];that.setData({detail: postdetail,contentLoaded: true})that.downloadImages(postdetail.image_url)},fail: console.error})

这里that.downloadImages(postdetail.image_url)即加载图片:

  /*** 从数据库获取图片的fileId,然后去云存储下载,最后加载出来*/downloadImages: function(image_urls){var that = thisif(image_urls.length == 0){return} else {var urls = []for(let i = 0; i < image_urls.length; i++) {wx.cloud.downloadFile({fileID: image_urls[i],success: res => {// get temp file pathconsole.log(res.tempFilePath)urls.push(res.tempFilePath)if (urls.length == image_urls.length) {console.log(urls)that.setData({imageUrls: urls,imagesLoaded: true})}},fail: err => {// handle error}})}}},

发表评论

发表评论和发布帖子逻辑类似,只是写入的数据不同,不做赘述。

总结

前面说过,云开发弱化了后端(简化鉴权本质也是弱化后端),这样带来的好处就是提高了开发效率,因为前后端联调向来都是一件耗时间的事情,而且小程序本身主打的就
是小型应用,实在没有必要引入过多的开发人员。但云开发也不是万能的,例如我一开始想做RSS阅读器,那么后端就需要聚合信息,目前云开发还做不了。

个人感觉只要是信息类的小程序,如新闻类、视频类,云开发目前都很乏力,因为数据库的支持还过于简陋(也可能是我太菜,没发现很好的解决办法,欢迎拍砖)。但如果是本文提及的这种用户自己也会产生信息的小程序,那么云开发则会有开发效率上的优势。

最后就是云开发目前提供的2G数据库和5G存储,对于一些用户量较多的小程序是否足够也是个问题,目前也没见有付费版。

总的类说,初次接触小程序开发,还是发现有不少值得借鉴学习之处。

源码链接

https://github.com/TencentCloudBase/Good-practice-tutorial-recommended

如果你有关于使用云开发CloudBase相关的技术故事/技术实战经验想要跟大家分享,欢迎留言联系我们哦~比心!

转载于:https://www.cnblogs.com/CloudBase/p/11399923.html

用小程序·云开发两天搭建mini论坛丨实战相关推荐

  1. 微信小程序云开发 · 从0搭建商业级校园跑腿平台(已开源)

    微信小程序云开发  ·  从零搭建商业级校园跑腿平台 小秃僧 新生代农民工,一枚准毕业的大四学生,热爱前端开发,做个有态度.有思想.有价值的公众号. 好久不更新了,再更新已是打工人! 我将分享用云开发 ...

  2. 微信小程序云开发-两种云端数据获取方法

    下面价绍两种云端数据获取方法,都不需要写云函数,都用来前端完成,首先在数据库里准备好数据,然后开始操作,下面代码我用来获取轮播图的. 首先在App.js里初始化我们的小程序,env里面写自己的环境ID ...

  3. 微信小程序云开发配置环境

    配置云开发 1.在Project.config.json 中配置云环境文件夹名称,cloud,所有云环境内容都在cloud文件中. 2.新建一个文件夹,和步骤一名字一样为cloud.编译后会出现云服务 ...

  4. 【小程序云开发】30分钟搭建个人相册小程序

    文章目录 前言 最终效果 准备工作 小程序架构 创建小程序云开发环境 创建数据库 搭建个人相册 写在最后 前言 图片存储,是所有应用开发里最常见的场景之一. 本文将通过实战"个人相册小程序& ...

  5. 【系】微信小程序云开发实战坚果商城-商城项目搭建

    第 2-1 课:商城项目搭建 目录 开篇 [系]微信小程序云开发实战坚果商城-开篇 基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 [系]微 ...

  6. 小程序云开发实现微信支付,不需要搭建服务器

    一.开发微信支付功能一定要架设服务器吗? 2019年的最后一天,舍得叔叔沉浸在探索的兴奋中,验证了微信小程序云开发也能优雅实现微信支付!小程序的目标是建立一个"serverless" ...

  7. 安卓开发 登录用户信息缓存_小程序云开发之用户注册登录

    小程序 · 云开发已经上线到现在也已经快有两年了,期间自己也基于云开发发布了几个小程序,总得来说,对于前端开发者来说,确实方便了很多.不用买服务器.域名,不需要搭建数据库.静态存储应用.通过平台提供的 ...

  8. 解密小程序云开发数据库

    作者:phoenixxliu,腾讯 TEG 后台开发工程师 目录: 导语 一.背景 二.竞品分析 三.需求和挑战 四.架构和方案 五.总结和展望 导语 小程序云开发(Tencent CloudBase ...

  9. 第六十二期:腾讯云发布“小程序·云开发十大优秀实践”:猫眼、唯品会等入选

    作者:周小白 [TechWeb]10 月 19 日消息,今日,腾讯云首次对外公布了"小程序·云开发十大优秀实践",包括白鹭引擎.千墨科技.腾讯新闻.即速应用.微盟.唯品会.猫眼.香 ...

最新文章

  1. Eclipse创建struts.xml
  2. 【Linux使用技巧】linux 死机了怎么办
  3. 备战618,京东如何保障系统稳定性?
  4. 同级选择器_基础选择器
  5. c语言求乘法,急!!!!c语言:求n次多项式的加法和乘法
  6. 多媒体计算机辅助教学与课件制作,清华大学出版社-图书详情-《计算机辅助教学多媒体课件设计制作与应用》...
  7. 惊呆了!不改一行 Java 代码竟然就能轻松解决敏感信息加解密
  8. clobzh字符串缓冲区太小的解决方法_用4K屏玩LOL英雄联盟游戏指针太小解决方法已找到...
  9. 大数据技术有什么优势
  10. a4b5笔记本大小对比_【玩码】全新升级MX350独显 小米笔记本Pro 15 2020款为创造力而生...
  11. EXCEL工作表保护密码忘记,撤销保护攻略
  12. Json数据转化为DataTable的两种方法(vb.net)
  13. 无忧微店自动发货软件
  14. 计算机主机的cpu,台式机cpu能换吗?台式电脑换cpu的详细步骤
  15. baomidou 动态数据源
  16. 牛牛的旅游纪念品(背包DP)
  17. Mac下Tesseract-OCR文字识别新手使用入门
  18. php 爬取股票数据库,【实例】--股票数据定向爬取
  19. 关于Spark Steaming中的Processing Time/Total Delay/Processing Delay
  20. nginx小知识 :通过nginx代理转发接口地址

热门文章

  1. html:(31):层叠和重要性
  2. 解决html2canvas截取页面部分div黑屏问题
  3. Vue之Vue.set动态新增对象属性
  4. ps -ef |grep -v 在shell sh 脚本中貌似无效?
  5. 【编程题目】给你 10 分钟时间,根据上排给出十个数,在其下排填出对应的十个数...
  6. Override and Overload (重写和重载)
  7. php梯度区间计算,快速计算梯度的魔法--反向传播算法
  8. java 实现 常见排序算法(四)基数排序
  9. highcharts默认选中最后一个点数据
  10. 小程序 mpvue input 文本控制