微信小程序云开发用户身份登录_微信小程序+云开发实现欢迎登录注册
前段时间和同学一起做了一个小程序，用来参加学校的比赛，完成后把项目内容分割一下，贴到博客上面，算是学习记录和总结吧。
因为是学生党，而且并没有很大的需要，所以选择了微信小程序为开发者提供的“云开发”选项。
开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力。
按照微信的说法：
云开发为开发者提供完整的云端支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。
目前提供三大基础能力支持：
云函数：在云端运行的代码，微信私有协议天然鉴权，开发者只需编写自身业务逻辑代码
数据库：一个既可在小程序前端操作，也能在云函数中读写的 JSON 数据库
存储：在小程序前端直接上传/下载云端文件，在云开发控制台可视化管理
首先，开通云开发功能是第一步(默认你已经注册好了微信小程序账号而且申请好了一个AppId),经测试，云开发并不能使用测试号，只能使用真实的AppId。
注：AppID 首次开通云环境后，需等待大约 10 分钟方可正常使用云 API，在此期间官方后台服务正在做准备服务，如尝试在小程序中调用云 API 则会报 cloud init error：{ errMsg: “invalid scope” } 的错误
之后新建就行了。
新建的项目已经包含了一个快速开发的Demo,而且含有云函数示例，初始化函数等等，最好可以先看看，熟悉一下。
首先看一下app.js这个文件：
//app.js
App({
onLaunch: function () {
if (!wx.cloud) {
console.error('请使用 2.2.3 或以上的基础库以使用云能力')
} else {
wx.cloud.init({
traceUser: true,
})
}
})
wx.cloud.init()为云端环境初始化函数,如果有多个云开发环境则需要指定env参数，如下:
wx.cloud.init({
env: 'test-x1dzi'
})
具体可以查看官方文档：
接下来声明一些全局数据
//全局数据
globalData: {
//用户ID
userId: '',
//用户信息
userInfo: null,
//授权状态
auth: {
'scope.userInfo': false
},
//登录状态
logged: false
}
最后的样子是这样：
//app.js
App({
//全局数据
globalData: {
//用户ID
userId: '',
//用户信息
userInfo: null,
//授权状态
auth: {
'scope.userInfo': false
},
//登录状态
logged: false
},
onLaunch: function() {
if (!wx.cloud) {
console.error('请使用 2.2.3 或以上的基础库以使用云能力')
} else {
wx.cloud.init({
traceUser: true,
env: 'winbin-2hand'
})
}
}
})
注意将env参数换成你自己的云开发环境。
把Pages目录下的除index外的文件夹删除。
并且在app.json中的Pages字段中下仅保留index项:
app.json
{
"pages": [
"pages/index/index"
],
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "云开发 QuickStart",
"navigationBarTextStyle": "black"，
"navigationStyle": "custom"
},
"sitemapLocation": "sitemap.json"
}
页面文件内容如下：
index.wxml
Hello
开启小程序之旅
因为微信小程序声称wx.getUserInfo(Object object)在以后将不再支持，这里使用另一种方式来显示用户的信息。
标签可以用来显示用户的一些信息
显示用户的头像
显示用户的昵称
详情可以查看：wx.getUserInfo中的示例代码部分
页面样式如下：
index.wxss
page {
width: 100%;
height: 100%;
}
.container {
background: url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-758991.png');
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脚本#
首先说一下思路
流程图如下
接下来是index.js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
hiddenButton: true
},
/**
*从云端获取资料
*如果没有获取到则尝试新建用户资料
*/
onGotUserInfo: function(e) {
var _this = this
//需要用户同意授权获取自身相关信息
if (e.detail.errMsg == "getUserInfo:ok") {
//将授权结果写入app.js全局变量
app.globalData.auth['scope.userInfo'] = true
//尝试获取云端用户信息
wx.cloud.callFunction({
name: 'get_setUserInfo',
data: {
getSelf: true
},
success: res => {
if (res.errMsg == "cloud.callFunction:ok")
if (res.result) {
//如果成功获取到
//将获取到的用户资料写入app.js全局变量
console.log(res)
app.globalData.userInfo = res.result.data.userData
app.globalData.userId = res.result.data._id
wx.switchTab({
url: '/pages/home/home'
})
} else {
//未成功获取到用户信息
//调用注册方法
console.log("未注册")
_this.register({
nickName: e.detail.userInfo.nickName,
gender: e.detail.userInfo.gender,
avatarUrl: e.detail.userInfo.avatarUrl,
region: ['none', 'none', 'none'],
campus: "none",
studentNumber: "none",
})
}
},
fail: err => {
wx.showToast({
title: '请检查网络您的状态',
duration: 800,
icon: 'none'
})
console.error("get_setUserInfo调用失败", err.errMsg)
}
})
} else
console.log("未授权")
},
/**
* 注册用户信息
*/
register: function(e) {
let _this = this
wx.cloud.callFunction({
name: 'get_setUserInfo',
data: {
setSelf: false,
userData: e
},
success: res => {
if (res.errMsg == "cloud.callFunction:ok" && res.result) {
_this.setData({
hiddenButton: true
})
app.globalData.userInfo = e
app.globalData.userId = res.result._id
_this.data.registered = true
app.getLoginState()
console.log(res)
wx.navigateTo({
url: '/pages/mine/info/info'
})
} else {
console.log("注册失败", res)
wx.showToast({
title: '请检查网络您的状态',
duration: 800,
icon: 'none'
})
}
},
fail: err => {
wx.showToast({
title: '请检查网络您的状态',
duration: 800,
icon: 'none'
})
console.error("get_setUserInfo调用失败", err.errMsg)
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function() {
let _this = this
//需要用户同意授权获取自身相关信息
wx.getSetting({
success: function(res) {
if (res.authSetting['scope.userInfo']) {
//将授权结果写入app.js全局变量
app.globalData.auth['scope.userInfo'] = true
//从云端获取用户资料
wx.cloud.callFunction({
name: 'get_setUserInfo',
data: {
getSelf: true
},
success: res => {
if (res.errMsg == "cloud.callFunction:ok" && res.result) {
//如果成功获取到
//将获取到的用户资料写入app.js全局变量
console.log(res)
app.globalData.userInfo = res.result.data.userData
app.globalData.userId = res.result.data._id
wx.switchTab({
url: '/pages/home/home'
})
} else {
_this.setData({
hiddenButton: false
})
console.log("未注册")
}
},
fail: err => {
_this.setData({
hiddenButton: false
})
wx.showToast({
title: '请检查网络您的状态',
duration: 800,
icon: 'none'
})
console.error("get_setUserInfo调用失败", err.errMsg)
}
})
} else {
_this.setData({
hiddenButton: false
})
console.log("未授权")
}
},
fail(err) {
_this.setData({
hiddenButton: false
})
wx.showToast({
title: '请检查网络您的状态',
duration: 800,
icon: 'none'
})
console.error("wx.getSetting调用失败", err.errMsg)
}
})
}
})
下面是云函数配置
根据传入的参数：update ,getSelf ,setSelf ,getOthers
分别执行：更新用户信息，获取自身信息，设置自身信息，获取其他用户信息 四种操作。
此函数需要使用npm添加md5模块，用来加密用户openid并将其存放在数据库中
// clouldfunctions/get_setUserInfo/package.json
{
"name": "get_setUserInfo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"wx-server-sdk": "latest",
"md5-node": "latest"
}
}
// clouldfunctions/get_setUserInfo/index.js
const cloud = require('wx-server-sdk')
const md5 = require('md5-node')
//cloud.init()
cloud.init({
traceUser: true,
env: 'winbin-2hand'
})
const db = cloud.database()
const usersTable = db.collection("users")
const _ = db.command
// 云函数入口函数
exports.main = async(event, context) => {
console.log(event)
const wxContext = cloud.getWXContext()
//更新当前信息
if (event.update == true) {
try {
return await usersTable.doc(md5(wxContext.OPENID)).update({
data: {
userData: _.set(event.userData)
},
})
} catch (e) {
console.error(e)
}
} else if (event.getSelf == true) {
//获取当前用户信息
try {
return await usersTable.doc(md5(wxContext.OPENID)).field({
openid: false
}).get()
} catch (e) {
console.error(e)
}
} else if (event.setSelf == true) {
//添加当前用户信息
try {
return await usersTable.add({
data: {
_id: md5(wxContext.OPENID),
openid: wxContext.OPENID,
userData: event.userData,
boughtList: [],
messageList: [],
ontransList: []
}
})
} catch (e) {
console.error(e)
}
} else if (event.getOthers == true) {
//获取指定用户信息
try {
return await usersTable.doc(event.userId).field({
userData: true
}).get()
} catch (e) {
console.error(e)
}
}
}
数据库数据形式:
至此就全部完成了。有需要的可以到github上查看：github:john-tito
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
微信小程序云开发用户身份登录_微信小程序+云开发实现欢迎登录注册相关推荐
- 微信小程序云开发用户身份登录_你必须要掌握的微信小程序云开发
微信小程序开发已经成为目前最火爆的技能之一,无论是在求职.毕设.兴趣培养等方面都已经成为一项必备技能,而小程序云开发技术的出现更是点燃了整个小程序生态圈. 在2019微信公开课PRO小程序分论坛上,腾 ...
- 微信小程序云开发用户身份登录_个人如何使用微信小程序云开发功能
微信推出了一个小程序云开发工具,开发人员可用云开发和开发微信小程序和小游戏,而且无需设置服务器,云开发为开发人员提供了完整的云支持,削弱了后端和操作维护概念,不需要设置服务器,使用平台提供的API进行 ...
- 微信小程序云开发用户身份登录_微信小程序开发用户授权登录(下)
如果开发者拥有多个移动应用.网站应用.和公众帐号(包括小程序),可通过 UnionID 来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用.网站应用和公众帐号(包括小程序),用户的 Un ...
- 小程序开发用什么编程语言_微信小程序开发教程是什么？费用多少？
微信小程序如今已经非常常见,渗透到了我们日常生活的方方面面,包括生活服务.出行.点餐.电商购物.企业展示--商家可以开发适合自己行业的小程序,以吸引线上用户,同时提高自身服务运营效率.不过这些不同种类 ...
- 微信小程序开发分销制度济南_微信小程序分销规则你清楚吗?
大家在刚开始接触小程序的时候,好多人都被其中的分销功和简洁应用的模式所带来的红利所吸引,但到如今,使用小程序的用户是多了起来,但真正把小程序运营好的商家却很少.这是为什么呢,原因就在于,商家还不会利用 ...
- 微信小程序- css相比,wxss区别？小程序关联微信公众号如何确定用户的唯一性？微信小程序中的用户ID(openid和unionid)
1 与css相比, wxss区别? 1) 响应式长度 rpx 2) 样式导入 3) 小程序不支持通配符* *{ width:100rpx; height:100rpx; } 2 小程序关联微信公众号如 ...
- 小程序内嵌h5页面分享_微信小程序webview内页面分享
因为项目原因,之前在微信小程序内部使用 webview 嵌套了 h5 页面,现在要添加一个新的功能,用户在哪个页面进行了分享,被分享的用户从链接进来就跳转到哪个分享页面. 先了解一下 web-view ...
- 使用React，Spring Boot和用户身份验证构建CRUD应用程序
建筑物身份管理,包括身份验证和授权? 尝试Stormpath! 我们的REST API和强大的Java SDK支持可以消除您的安全风险,并且可以在几分钟内实现. 注册 ,再也不会建立auth了! Re ...
- Windows程序以特定用户身份运行
如果一个程序需要访问文件服务器的共享目录,却不能让执行这个程序的用户访问这个共享目录,怎么办? 解决方法:使用runas命令. 具体做法是,在本地先创建一个文件服务器授权了的用户abc,然后在控制台执 ...
最新文章
- 【论文浅析】Semi-supervised sequence tagging with bidirectional lm
- C++面向对象模型初探
- Linux基础练习题(二)
- pcb设计等长线误差_17种元器件PCB封装图鉴，美翻了（附PCB元件库）
- 使用jquery版本的viewer.js图片更新的问题
- 上班划水神器：一个可以在控制台玩斗地主的项目！
- php读取文件部分内容,PHP 提高篇
- Server Develop （四） select实现非阻塞sever
- Linux查看服务器自动关机,Linux系统自动关机的命令详解
- 华为手机所有图标变黑_华为手机突然图标变黑
- js基础--操作css内联样式及获取css样式
- 2022-2027年中国新能源汽车功率电子行业市场全景评估及发展战略规划报告
- labview自动保存报表_Labview如何快速保存数据到Excel
- 5分钟学会Python爬虫神器autoscraper——自动化爬虫必备
- 2020厦门大学计算机系学硕,2020考研厦门大学推荐：热门专业及学科设置
- 【月刊】在四月奔跑起来，即使道路泥泞，也会收获遍野的烂漫
- 如何将WORD中的公式转为图片
- Webpack打包css文件-css-loader+style-loader
- IntelliJ IDEA 2018.2.2 x64安装破解教程
- 如何将最大化互信息引入到无监督域适应（UDA）任务？