【云+社区年度征文】基于云开发完成小程序用户注册登录

简介: 【云+社区年度征文】基于云开发完成小程序用户注册登录

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

之前,如果我们想要开发一个小程序,运维人员需要考虑买什么样的服务器,匹配哪些资源,比如存储应用数据库等,后端开发人员需要编写服务接口,前端人员需要编写页面,对接后端提供的接口,这个工作流程下来,需要至少一个月的时间。有了“小程序 · 云开发”以后,开发者不用考虑后端复杂的技术操作,一个前端开发者就可以轻松的完成从无到有、从开发到发布的过程。

1 小程序注册

如果之前注册了小程序或者有小程序APPID的用户可以直接忽略这步。

首先要去注册个小程序,如果开发者工具选择测试号,是不能体验云开发的。小程序注册地址如下:

https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN&token=

选择小程序

image.png

填写注册信息,激活邮箱,基本算是已经注册完成。

这里需要说明下,一个企业最多可以注册50个微信小程序;个体工商户最多可以注册5个小程序;

image.png

注册完成后,扫码登录,在把基本信息设置下,就可以在设置里可以看到APPID。

image.png

2 搭建基础环境

上面我们已经有了小程序,接下来就是创建小程序基础环境,下载微信开发者工具:

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

首次登录或者长时间未使用,需要微信扫一扫登录,这样才能拿到你的微信号是否有权限开发小程序。

新建小程序项目,选择后端服务 -“小程序 · 云开发

image.png

等待项目初始化完成,目录结构如下

├── /cloudfunctions/         # 云函数
├── /miniprogram/            # 前端代码
│ ├── /images/               # 图片等资源
│ ├── /pages/                # 页面目录
│ ├── /app.js                # 全局配置
│ ├── /app.json              # 全局配置
│ ├── /app.wxss              # 全局样式文件
├── /project.config.json     # 项目配置文件

复制

image.png

默认新建项目是没有云环境的,需要我们自己初始化,并创建环境名称。

image.png

项目里使用创建的环境,在app.js文件配置

onLaunch: function () {
  if (!wx.cloud) {
    console.error('请使用 2.2.3 或以上的基础库以使用云能力')
  } else {
    wx.cloud.init({
      env: 'prd-yymsa'
      // env: 'dev-zvjun'
    })
  }
},

复制

我创建了两个。一个是开发环境,一个是生产环境,并且一个小程序也只能创建两个,在之前,环境只能创建,不能删除,现在也已经支持删除。

到这里,我们基础环境已经搭建完成,接下来就是如何编写代码了。

3 编写逻辑代码

首先需要简单了解下云开发概念及提供哪些能力,云开发弱化后端和运维概念,就是我们不需要管理服务器,只需注重我们的业务流程。云开发提供云函数数据库、存储和云调用这几个能力。

image.png

详细就不在这里讲了,官方文档已经很详细了,需要详细了解的请移步云开发教程地址:

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html

1.获取用户

cloudfunctions目录新建Node.js云函数,名字getUser,内容如下

1 const cloud = require('wx-server-sdk')
 2 cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV })
 3 const db = cloud.database()
 4 exports.main = async (event, context) => {
 5   const wxContext = cloud.getWXContext()
 6   return await db.collection('user').where({
 7     openid: wxContext.OPENID
 8   }).get().then(res => {
 9     return res
10   })
11 }

复制

第一行,引入sdk

第二行,使用设置的云函数环境

第三行,初始化db

第四行到最后,这里面就是我们要写的逻辑,这里是返回user表的指定openid的值

一个简单的查询用户接口就完成了。

2 新增用户

cloudfunctions目录新建Node.js云函数,名字addUser,内容如下

1 const cloud = require('wx-server-sdk')
 2 cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV })
 3 const db = cloud.database()
 4 exports.main = async (event, context) => {
 5   const wxContext = cloud.getWXContext()
 6   return await db.collection('user').add({
 7     data: {
 8       openid: wxContext.OPENID,
 9       nickName: event.nickName,
10       gender: event.gender,
11       language: event.language,
12       city: event.city,
13       province: event.province,
14       country: event.country,
15       avatarUrl: event.avatarUrl,
16       role: "user"
17     },
18   })
19 }

复制

这里也不用过多解释,第一、二、三行,都一样、四行到最后是向user表插入数据。

3 更新用户

cloudfunctions目录新建Node.js云函数,名字updateUser,内容如下

1 const cloud = require('wx-server-sdk')
 2 cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV })
 3 const db = cloud.database()
 4 exports.main = async (event, context) => {
 5   const wxContext = cloud.getWXContext()
 6   return await db.collection('user').where({
 7     openid: wxContext.OPENID
 8   })
 9     .update({
10       data: {
11         nickName: event.nickName,
12         gender: event.gender,
13         language: event.language,
14         city: event.city,
15         province: event.province,
16         country: event.country,
17         avatarUrl: event.avatarUrl
18       },
19     })
20 }

复制

代码基本和新增用户一样,只不过是我们这次要在插入的是指定openid的值。

到这里,新增、修改、查询接口已经完成了、接口写完,我们还需要同步云函数到指定环境,接下来就是我们写前端调用了。

4 编写调用代码

下面这个页面是我小程序的个人中心页面,头像这块的逻辑是用户如果首次使用小程序,则需要登录,如果不是,之后就不在需要点击登录,直接获取用户信息,毕竟云开发是可以直接获取用户openid,

逻辑理通就开始写我们的调用代码

gologin(e) {
  let that = this
  wx.cloud.callFunction({
    name: 'getUser',
  }).then(res => {
    if (res.result.data == '') {
      wx.cloud.callFunction({
        name: 'addUser',
        data: {
          nickName: e.detail.userInfo.nickName,
          gender: e.detail.userInfo.gender,
          language: e.detail.userInfo.language,
          city: e.detail.userInfo.city,
          province: e.detail.userInfo.province,
          country: e.detail.userInfo.country,
          avatarUrl: e.detail.userInfo.avatarUrl
        }
      }).then(addres => {
        that.setData({
          userInfo: e.detail.userInfo
        })
        wx.setStorageSync('userInfo', JSON.stringify(e.detail.userInfo))
      })
    } else {
      that.setData({
        userInfo: res.result.data[0]
      })
      wx.setStorageSync('userInfo', JSON.stringify(res.result.data[0]))
    }
  })
},

复制

这个方法也比较简单,先去查询用户,如果没有,我就新增,如果有,就缓存本地。更新的方法就不展示了,用法基本一样。最终效果可以参考小程序【口袋工具箱】

5 总结

简单理解,就是腾讯云把小程序开发的服务端已经搭好,开发者看不到、也不需要看到后台架构如何搭建,更不用操心后台的稳定性和安全性问题,直接调用接口,写小程序端代码就可以了。小程序 · 云开发 真正的解放了开发者,开发效率大大提升,交付流程更加便捷,所有的云资源都集成在微信开发者工具中,直接开发->测试->预览->上线,以至于我一个前端都可以轻松完成整个项目。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

相关文章
|
11天前
|
存储 小程序 前端开发
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
115 12
|
2月前
|
人工智能 小程序
【一步步开发AI运动小程序】十五、AI运动识别中,如何判断人体站位的远近?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,无需后台支持,具有快速、体验好、易集成等特点。本文介绍如何利用插件判断人体与摄像头的远近,确保人体图像在帧内的比例适中,以优化识别效果。通过`whole`检测规则,分别实现人体过近和过远的判断,并给出相应示例代码。
|
24天前
|
小程序 前端开发 关系型数据库
uniapp跨平台框架,陪玩系统并发性能测试,小程序源码搭建开发解析
多功能一体游戏陪练、语音陪玩系统的开发涉及前期准备、技术选型、系统设计与开发及测试优化。首先,通过目标用户分析和竞品分析明确功能需求,如注册登录、预约匹配、实时语音等。技术选型上,前端采用Uni-app支持多端开发,后端选用PHP框架确保稳定性能,数据库使用MySQL保证数据一致性。系统设计阶段注重UI/UX设计和前后端开发,集成WebSocket实现语音聊天。最后,通过功能、性能和用户体验测试,确保系统的稳定性和用户满意度。
|
30天前
|
小程序 IDE PHP
圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里?
将PHP源码打包成App的过程涉及多个步骤和技术选择。以圈子源码为例,首先明确需求,确定App功能和目标用户群体,并根据需求开发小程序页面,如用户注册、圈子列表等。源码准备阶段确保源码适用于小程序开发,环境配置需安装IDE(如微信开发者工具)及依赖库。最后在IDE中打包小程序并上传至管理平台,通过审核后发布。费用方面,模板开发成本较低,定制开发则更高,具体取决于需求复杂度和第三方服务费用。
73 0
|
2月前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
|
28天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
26 0
|
2月前
|
人工智能 小程序 UED
【一步步开发AI运动小程序】十六、AI运动识别中,如何判断人体站位?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,本地引擎无需后台支持,具备快速、体验好、易集成等优势。本文介绍如何利用插件的`camera-view`功能,通过检测人体站位视角(前、后、左、右),确保运动时的最佳识别率和用户体验。代码示例展示了如何实现视角检查,确保用户正或背对摄像头,为后续运动检测打下基础。
|
2月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态?
【云智AI运动识别小程序插件】提供人体、运动、姿态检测的AI能力,支持本地原生识别,无需后台服务,具有速度快、体验好、易集成等优点。本文介绍如何使用该插件实现用户上传视频的运动识别,包括视频解码抽帧和人体识别的实现方法。
|
2月前
|
人工智能 小程序 数据处理
uni-app开发AI康复锻炼小程序,帮助肢体受伤患者康复!
近期,多家康复机构咨询AI运动识别插件是否适用于肢力运动受限患者的康复锻炼。本文介绍该插件在康复锻炼中的应用场景,包括康复运动指导、运动记录、恢复程度记录及过程监测。插件集成了人体检测、姿态识别等功能,支持微信小程序平台,使用便捷,安全可靠,帮助康复治疗更加高效精准。
|
2月前
|
人工智能 小程序 JavaScript
【一步步开发AI运动小程序】十四、主包超出2M大小限制,如何将插件分包发布?
本文介绍了如何从零开始开发一个AI运动小程序,重点讲解了通过分包技术解决程序包超过2M限制的问题。详细步骤包括在uni-app中创建分包、配置`manifest.json`和`pages.json`文件,并提供了分包前后代码大小对比,帮助开发者高效实现AI运动功能。

热门文章

最新文章