微信小程序选项卡功能开发步骤与方法全解析
428
2023-11-07
微信小程序+云开发实现欢迎登录注册
前段时间和同学一起做了一个小程序，用来参加学校的比赛，完成后把项目内容分割一下，贴到博客上面，算是学习记录和总结吧。
因为是学生党，而且并没有很大的需要，所以选择了微信小程序为开发者提供的“云开发”选项。
开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力。
按照微信的说法：云开发为开发者提供完整的云端支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。
目前提供三大基础能力支持：云函数：在云端运行的代码，微信私有协议天然鉴权，开发者只需编写自身业务逻辑代码 数据库：一个既可在小程序前端操作，也能在云函数中读写的 JSON 数据库 存储：在小程序前端直接上传/-云端文件，在云开发控制台可视化管理首先，开通云开发功能是第一步（默认你已经注册好了微信小程序账号而且申请好了一个AppId）,经测试，云开发并不能使用测试号，只能使用真实的AppId。
注：AppID 首次开通云环境后，需等待大约 10 分钟方可正常使用云 API，在此期间官方后台服务正在做准备服务，如尝试在小程序中调用云 API 则会报 cloud init error：{ errMsg: “invalid scope” } 的错误
之后新建就行了。
新建的项目已经包含了一个快速开发的Demo,而且含有云函数示例，初始化函数等等，最好可以先看看，熟悉一下。
首先看一下app.js这个文件：
?
1
2
3
4
5
6
7
8
9
10
11
//app.js
App({
onLaunch: function () {
if (!wx.cloud) {
console.error(请使用 2.2.3 或以上的基础库以使用云能力)
} else {
wx.cloud.init({
traceUser: true,
})
}
})
wx.cloud.init()为云端环境初始化函数,如果有多个云开发环境则需要指定env参数，如下:
?
1
2
3
wx.cloud.init({
env: test-x1dzi
})
具体可以查看官方文档：
developers.weixin.qq.com
接下来声明一些全局数据
最后的样子是这样：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
"pages": [
"pages/index/index"
],
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "云开发 QuickStart",
"navigationBarTextStyle": "black"，
"navigationStyle": "custom"
},
"sitemapLocation": "sitemap.json"
}
页面文件内容如下：
index.wxml
?
1
2
3
4
5
6
7
8
9
10
<view class=container>
<open-data class="avs" type="userAvatarUrl"></open-data>
<view class=username>
<text>Hello </text>
<open-data type="userNickName"></open-data>
</view>
<button hidden={{hiddenButton}} class=moto-container open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">
<text class=moto> 开启小程序之旅</text>
</button>
</view>
因为微信小程序声称wx.getUserInfo(Object object)在以后将不再支持，这里使用另一种方式来显示用户的信息。
标签<open-data type=""></open-data>可以用来显示用户的一些信息
<open-data type="userAvatarUrl"></open-data>显示用户的头像
显示用户的昵称
详情可以查看：wx.getUserInfo中的示例代码部分
页面样式如下：
index.wxss
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
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并将其存放在数据库中
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 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"
}
}
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
// 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
您可能感兴趣的文章:微信小程序登录与注册功能的实现详解微信小程序实现登录注册功能详解微信小程序入门从这里出发（登录注册、开发工具、文件及结构介绍）微信小程序实现注册登录功能(表单校验、错误提示)微信小程序登录态和检验注册过没的app.js写法微信小程序实现登录注册tab切换效果微信小程序实现登录界面示例微信小程序实现登录界面微信小程序实现登录注册界面
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~