⼩程序+云开发实现欢迎登录注册
前段时间和同学⼀起做了⼀个⼩程序，⽤来参加学校的⽐赛，完成后把项⽬内容分割⼀下，贴到博客上⾯，算是学习记录和总结吧。
因为是学⽣党，⽽且并没有很⼤的需要，所以选择了⼩程序为开发者提供的“云开发”选项。
开发者可以使⽤云开发开发⼩程序、⼩游戏，⽆需搭建服务器，即可使⽤云端能⼒。
按照的说法：
云开发为开发者提供完整的云端⽀持，弱化后端和运维概念，⽆需搭建服务器，使⽤平台提供的 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) {
<('请使⽤ 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) {
<('请使⽤ 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
<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>显⽰⽤户的头像
<open-data type="userNickName"></open-data>显⽰⽤户的昵称
详情可以查看：中的⽰例代码部分
页⾯样式如下：
index.wxss
page {
width: 100%;
height: 100%;
}
.container {
background: url('/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 (Msg == "getUserInfo:ok") {
//将授权结果写⼊app.js全局变量
app.globalData.auth['scope.userInfo'] = true
/
/尝试获取云端⽤户信息
wx.cloud.callFunction({
name: 'get_setUserInfo',
data: {
getSelf: true
},
success: res => {
if (Msg == "cloud.callFunction:ok")
if (sult) {
//如果成功获取到
//将获取到的⽤户资料写⼊app.js全局变量
console.log(res)
app.globalData.userInfo = sult.data.userData        app.globalData.userId = sult.data._id
wx.switchTab({
url: '/pages/home/home'
})
} else {
//未成功获取到⽤户信息
//调⽤注册⽅法
console.log("未注册")
_ister({
nickName: e.detail.userInfo.nickName,
gender: e.der,
avatarUrl: e.detail.userInfo.avatarUrl,
region: ['none', 'none', 'none'],
campus: "none",
studentNumber: "none",
})
}
},
fail: err => {
wx.showToast({
title: '请检查⽹络您的状态',
duration: 800,
icon: 'none'
})
<("get_setUserInfo调⽤失败", Msg)    }
})
} else

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。