2023年6月28日发(作者：)

微信⼩程序+云开发实现欢迎登录注册前段时间和同学⼀起做了⼀个⼩程序，⽤来参加学校的⽐赛，完成后把项⽬内容分割⼀下，贴到博客上⾯，算是学习记录和总结吧。因为是学⽣党，⽽且并没有很⼤的需要，所以选择了微信⼩程序为开发者提供的“云开发”选项。开发者可以使⽤云开发开发微信⼩程序、⼩游戏，⽆需搭建服务器，即可使⽤云端能⼒。按照微信的说法：云开发为开发者提供完整的云端⽀持，弱化后端和运维概念，⽆需搭建服务器，使⽤平台提供的 API 进⾏核⼼业务开发，即可实现快速上线和迭代，同时这⼀能⼒，同开发者已经使⽤的云服务相互兼容，并不互斥。⽬前提供三⼤基础能⼒⽀持：云函数：在云端运⾏的代码，微信私有协议天然鉴权，开发者只需编写⾃⾝业务逻辑代码数据库：⼀个既可在⼩程序前端操作，也能在云函数中读写的 JSON 数据库存储：在⼩程序前端直接上传/下载云端⽂件，在云开发控制台可视化管理⾸先，开通云开发功能是第⼀步（默认你已经注册好了微信⼩程序账号⽽且申请好了⼀个AppId）,经测试，云开发并不能使⽤测试号，只能使⽤真实的AppId。注：AppID ⾸次开通云环境后，需等待⼤约 10 分钟⽅可正常使⽤云 API，在此期间官⽅后台服务正在做准备服务，如尝试在⼩程序中调⽤云 API 则会报 cloud init error：{ errMsg: “invalid scope” } 的错误之后新建就⾏了。新建的项⽬已经包含了⼀个快速开发的Demo,⽽且含有云函数⽰例，初始化函数等等，最好可以先看看，熟悉⼀下。⾸先看⼀下这个⽂件：//({ onLaunch: function () {if (!) { ('请使⽤ 2.2.3 或以上的基础库以使⽤云能⼒')} else { ({traceUser: true, })}})()为云端环境初始化函数,如果有多个云开发环境则需要指定env参数，如下:({ env: 'test-x1dzi'})具体可以查看官⽅⽂档：接下来声明⼀些全局数据//全局数据globalData: { //⽤户ID userId: '', //⽤户信息 userInfo: null, //授权状态 auth: { 'fo': false }, //登录状态 logged: false}最后的样⼦是这样：//({ //全局数据 globalData: { //⽤户ID userId: '', //⽤户信息 userInfo: null, //授权状态 auth: { 'fo': false }, //登录状态 logged: false }, onLaunch: function() { if (!) { ('请使⽤ 2.2.3 或以上的基础库以使⽤云能⼒') } else { ({ traceUser: true, env: 'winbin-2hand' }) } }})注意将env参数换成你⾃⼰的云开发环境。把Pages⽬录下的除index外的⽂件夹删除。并且在中的Pages字段中下仅保留index项:{ "pages": [ "pages/index/index" ], "window": { "backgroundColor": "#F6F6F6", "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#F6F6F6", "navigationBarTitleText": "云开发 QuickStart", "navigationBarTextStyle": "black"， "navigationStyle": "custom" }, "sitemapLocation": ""}页⾯⽂件内容如下： Hello

因为微信⼩程序声称rInfo(Object object)在以后将不再⽀持，这⾥使⽤另⼀种⽅式来显⽰⽤户的信息。标签可以⽤来显⽰⽤户的⼀些信息显⽰⽤户的头像显⽰⽤户的昵称详情可以查看：中的⽰例代码部分页⾯样式如下：ge { width: 100%; height: 100%;}.container { background: url('/wallpapers/full/'); background-size: 400vw 100vh; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center;}.avs { opacity: 0.9; width: 200rpx; height: 200rpx; margin-top: 160rpx;}.username { font-size: 32rpx; font-weight: bold; margin-top: 200rpx;}.moto-container { line-height: normal; border: 1px solid #450f80; width: 200rpx; height: 80rpx; border-radius: 5px; text-align: center; margin-top: 200rpx; padding: 0px; outline: none;}.moto { font-size: 22rpx; font-weight: bold; line-height: 80rpx; text-align: center; color: #450f80;}这⾥使⽤了全屏背景效果如下：#接下来是js脚本#⾸先说⼀下思路流程图如下接下来是t app = getApp();Page({ /** * 页⾯的初始数据 */ data: { hiddenButton: true }, /** *从云端获取资料 *如果没有获取到则尝试新建⽤户资料 */ onGotUserInfo: function(e) { var _this = this //需要⽤户同意授权获取⾃⾝相关信息 if ( == "getUserInfo:ok") { //将授权结果写⼊全局变量 ['fo'] = true //尝试获取云端⽤户信息 nction({ name: 'get_setUserInfo', data: { getSelf: true }, success: res => { if ( == "nction:ok") if () { //如果成功获取到 //将获取到的⽤户资料写⼊全局变量 (res) fo = ta = ._id Tab({ url: '/pages/home/home' }) } else { //未成功获取到⽤户信息 //调⽤注册⽅法 ("未注册") _er({ nickName: me, gender: , avatarUrl: Url, region: ['none', 'none', 'none'], campus: "none", studentNumber: "none", }) } }, fail: err => { ast({ title: '请检查⽹络您的状态', duration: 800, icon: 'none' }) ("get_setUserInfo调⽤失败", ) } }) } else ("未授权") }, /** * 注册⽤户信息 */ register: function(e) { let _this = this nction({ name: 'get_setUserInfo', data: { setSelf: false, userData: e }, success: res => { if ( == "nction:ok" && ) { _a({ hiddenButton: true }) fo = e = ._id _ered = true inState() (res) teTo({ url: '/pages/mine/info/info' }) } else { ("注册失败", res) ast({ title: '请检查⽹络您的状态', duration: 800, icon: 'none' }) } }, fail: err => { ast({ title: '请检查⽹络您的状态', duration: 800, icon: 'none' }) ("get_setUserInfo调⽤失败", ) } }) }, /** * ⽣命周期函数--监听页⾯加载 */ onLoad: function() { let _this = this //需要⽤户同意授权获取⾃⾝相关信息 ting({ success: function(res) { if (tting['fo']) { //将授权结果写⼊全局变量 ['fo'] = true //从云端获取⽤户资料 nction({ name: 'get_setUserInfo', data: { getSelf: true }, success: res => { if ( == "nction:ok" && ) { //如果成功获取到 //将获取到的⽤户资料写⼊全局变量 (res) fo = ta = ._id Tab({ url: '/pages/home/home' }) } else { _a({ hiddenButton: false }) ("未注册") } }, fail: err => { _a({ hiddenButton: false }) ast({ title: '请检查⽹络您的状态', duration: 800, icon: 'none' }) ("get_setUserInfo调⽤失败", ) } }) } else { _a({ hiddenButton: false }) ("未授权") } }, fail(err) { _a({ hiddenButton: false }) ast({ title: '请检查⽹络您的状态', duration: 800, icon: 'none' }) ("ting调⽤失败", ) } }) }})下⾯是云函数配置根据传⼊的参数：update ,getSelf ,setSelf ,getOthers分别执⾏：更新⽤户信息，获取⾃⾝信息，设置⾃⾝信息，获取其他⽤户信息 四种操作。此函数需要使⽤npm添加md5模块，⽤来加密⽤户openid并将其存放在数据库中// clouldfunctions/get_setUserInfo/{ "name": "get_setUserInfo", "version": "1.0.0", "description": "", "main": "", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "wx-server-sdk": "latest", "md5-node": "latest" }}

// clouldfunctions/get_setUserInfo/t cloud = require('wx-server-sdk')const md5 = require('md5-node')//()({ traceUser: true, env: 'winbin-2hand'})const db = se()const usersTable = tion("users")const _ = d// 云函数⼊⼝函数 = async(event, context) => { (event) const wxContext = ontext() //更新当前信息 if ( == true) { try { return await (md5()).update({ data: { userData: _.set(ta) }, }) } catch (e) { (e) } } else if (f == true) { //获取当前⽤户信息 try { return await (md5()).field({ openid: false }).get() } catch (e) { (e) } } else if (f == true) { //添加当前⽤户信息 try { return await ({ data: { _id: md5(), openid: , userData: ta, boughtList: [], messageList: [], ontransList: [] } }) } catch (e) { (e) } } else if (ers == true) { //获取指定⽤户信息 try { return await ().field({ userData: true }).get() } catch (e) { (e) } }}数据库数据形式:⾄此就全部完成了。有需要的可以到github上查看：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。