android开发小项目实例_吃瓜推荐小程序云开发从实例了解云开发

非常­­­­­­­感谢大家能够抽出一点时间观看本文章,在这篇文章将向大家讲述云开发的相关内容以及通过一个案例来了解云开发。

以下为视频版及文字版内容,观看本期完整版视频请点击文章末尾的“

在此之前,感谢此公众号的主人(@小羊肖恩)

本篇文章共2888字,预计阅读时间7分钟。

(以下为视频版)

本期视频已经同步到:哔哩哔哩、新浪微博、腾讯视频、抖音、快手(片段)。大家也可以到相应的平台搜索内容进行回看哦~(新浪微博名:抬克测评)

(以下为图文版)

欢迎大家观看本篇文章。在本期文章中,将会从三个方面来介绍云开发,分别是:什么是云开发、云开发的优势以及通过校中行项目来了解云开发。

657874590d147e9fa2a849dec3b59b23.png

Part 1:理论部分

第一部分 云开发简介

ab7213837afb27e894926ecaaf95ec8a.gif

云开发是由腾讯云联合微信团队为开发者提供的包含云函数、云数据库和云文件存储能力的后端云服务。这样,我们就知道我们的云开发提供以下三种能力:

9e637e471365f1cc82516238631a0696.png

代码执行能力——云函数

云函数为用户提供了在云端运行一段代码的能力,开发者无需管理服务器,就可以执行相应的业务逻辑。并且云函数还封装了专门用于云函数内获取的上下文,这样可以更加方便的获取用户登录态。但是,云函数目前仅支持Node.js环境。我们在使用时,我们可以看到,这个函数的默认运行环境为Nodejs8.9,运行的内存为256M,超时的时间为3s。

c529826bcf90c46cf8d285dbcfa1d204.png

数据存储能力——云数据库

云开发所提供的数据库是具备了完整的增删改查能力的JSON数据库,并且提供了2GB的免费存储空间。在传统的关系数据库中的数据库的名字和云开发数据库的名字一致,均为database,但是到更细致的时候就会有所不同,具体可以见下方的表格。

f156940cf488dd94acaefa982543241c.png

文件存储能力——文件存储

最后文件存储能力则是为用户提供了一个免费的5GB的存储空间,并提供了上传和下载的能力,我们可以通过云开发控制台来进行管理。

6966ec165939e4ea4450a1707e14834b.png

第二部分 云开发的优势

ab7213837afb27e894926ecaaf95ec8a.gif

在上一节我们介绍了云开发,在这一节中我们将介绍云开发的优势。首先我们先来看一下云开发与传统开发模式的对比。

No.1:云开发模式与传统开发模式的对比

从下图中我们可以看出,云开发模式从流程上会少两个环节,相应的开发时间也会缩短。而且在传统模式下,最少需要两个人开发,还会存在对接上的问题,而云开发模式则不会发生。

be965ae7e28f23d773f56aa8a3fe7f29.png

在这个表格中,则列举的是典型的云开发与传统开发模式的对比。总结来说则是效率更高,成本更低,无需维护,生态稳定,上线更快。

5c72f36c01807e72227d109cdd0ab64f.png

No.2:传统登录与云开发登录流程的对比

下面列举的则是在传统微信登录与云开发情况下微信登录流程的对比。首先是传统的微信登录流程。

84bb8e8e483cfa72e8cc11c270f9352f.png

在传统模式下,我们需要获取code,通过wx.request将code传递到后端,由后端换取openID和Session_key,之后再发送给小程序进行本地存储。

bcaa0eaf6238218029f2073bc3ac00be.png

而在云开发环境下,会自动记录用户的openID和用户信息,请求时则会自动带入openID,无需再次鉴权,会方便很多。

Part 2:实战部分

接下来,我们将通过一个实例来了解云开发,在本期文章中我们将通过校中行这个项目来了解我们的云开发。

校中行产品简析

No.1:产品定位

校中行这款产品的定位是一款基于小程序实现的校园伴侣寻找工具,能够帮助校园内学生寻找志同道合的伙伴。

在这个产品中,我们需要解决的问题主要有两个:1.帮助同学们找找到志同道合的伙伴;2.加强同学之间的相互交流。

85700e8ea352513d6064c36937462705.png

No.2:功能模块

在校中行这个产品中,现有微信登录、历史上的今天以及发布预约三个板块。微信登录会获取用户的登录信息。历史上的今天模块会获取在某天中历史上发生的事情最后的发布及预约模块则实现的是发布、查看、预约学习、娱乐等信息。

Ps:历史上的今天模块在后期会变成聊天模块。

f7d55047abfc304eedc396f19b392031.png

No.3:产品原型

在产品原型中,首先是个人信息页面,在个人信息页面中会显示当前登录人的头像、姓名、学号等信息,并且也可以提交用户反馈。在历史上的今天模块则显示的是将某天在历史上发生的事情展示出来。在首页我们可以点击相对应的类别,进入之后会展示当前的预约信息,点击之后可以查看预约详情,并且可以进行预约。

5b0c9e99a1b406bf5036a9a5a183dfd9.png

校中行项目部署

整个项目已经放在了Gitee开源平台中,可以在查看视频的下方链接对本项目进行下载。在部署过程中需要有Node.js环境。具体的步骤可以见项目中的Deployment.md文件。里面有非常详细的说明,因此在这篇文章中,我就不做过多的介绍了。

e46c81787bb06923d761717b77a341ab.png

关键代码解析

一、微信登录实现

(一)项目初始化

在云开发环境中,首先需要在app.js中修改成自己的环境ID,将traceUser改成true。个人的环境ID可以在云开发控制台-设置中找到。在微信开发文档中,大家也能看到具体的步骤。

4592bc007b23f026f2adce77c6495326.png

(二)登录相关逻辑

No.1:进入pages/my/my页面,点击“微信一键登录”就会调用getUserInfo方法

class=  <van-button type="info" size="normal" round open-type="getUserInfo" bindgetuserinfo="getUserInfo">微信一键登录van-button>view>

No.2:在my.js中找到getUserInfo方法,首先通过wx.cloud.callFunction方法调用getOpenId拿到用户的OpenID。在getOpenId云函数的index.js中获取小程序用户信息

exports.main = async (event, context) => {  return event.userInfo}

No.3:再次回到my.js中,在获取成功之后,使用userInfo.where获取用户的OpenID

complete:res=>{        var countNum= userInfo.where({          _openid:res.result.openId        }).count().then(res=>{

No.4:获取成功之后,进入判断,如果当前没有任何用户信息,则将个人信息添加,之后跳转到pages/info/info下面,如果存在个人信息,则跳转到pages/my/my下面

if(res.total ==0){            userInfo.add({              data:result.detail.userInfo,            }).then(res=>{              wx.navigateTo({                url: '../info/info',              })            }).catch(err=>{              console.error(err)            })}else{   wx.navigateTo({     url: '../my/my',   })}

(三)总结

通过云函数获取用户数据,仅需要在云函数入口函数中返回event.userInfo即可,大大方便了代码的编写

二、添加及查看预约信息

(一)相关业务逻辑

No.1:找到addBasketBall.wxml页面,这个页面通过form表单收集用户信息,之后调用submitform方法。在addBasketBall.js中找到对应的代码,首先会调用云数据库,之后将form表单中的数据添加到basketball集合中。

const db=wx.cloud.database()db.collection('basketball').add({...})

No.2:添加成功之后返回到basketball.wxml页面,在这个页面会首先加载basketball集合,之后将数据显示到页面中。

onLoad: function (options) {    basketballCollection.get().then(res=>{      this.setData({        basketball:res.data      })    })  },

No.3:点击相应的预约信息后,会进入预约详情页面,这个页面会加载云数据库中的basketball、userInfo和user集合,并将数据显示到页面中。

onLoad: function (options) {    basketballCollection.doc(options._id).get({      success:res=>{        this.setData({          basketball:res.data        })      }    })    userInfo.get().then(res=>{      console.log(res.data)      this.setData({        userList:res.data      })    })    userCollection.get().then(res=>{      console.log(res.data)      this.setData({        user:res.data      })    })},

(二)总结

在这部分内容中,主要向大家介绍了云数据库的基本使用和调用方法。在云数据库中,小程序可以在前端直接调用云函数中的集合,十分的方便。

Part 3:文章总结

在本篇文章中,主要向大家介绍了云开发的一些知识。通过云开发,开发者可以更加方便的编写代码。并且也通过一个小案例来深入的了解了云开发。希望大家在观看完这篇文章之后,能对今后的开发有所启发。也欢迎大家发表个人的意见哦~小编在看到之后也会第一时间回复大家的!谢谢~

喜欢的朋友们点个“在看”呗!嘿嘿1109034a3a8549b3f640303165c9ad23.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值