微信小程序学习之授权登录
- 创建云开发小程序
微信开发者工具》项目》新建项目》小程序》云开发》创建
2.创建好后的云开发项目会自带几个测试demo,当然，还不能使用，接下来开通云环境。在开发者工具工具栏左侧，点击 “云开发” 按钮即可打开云控制台、根据提示开通云开发、创建云环境。开通好后就能在云开发控制台进行数据操作啦。
3.小程序绑定服务控制台环境，（默认为第一个环境）相当于绑定服务器。
云开发控制台》设置》环境设置》复制环境ID》返回开发者工具》在资源管理器打开app.js》修改env的值为刚才复制的环境ID》保存
4.测试环境是否绑定成功。利用上传图片demo上传图片，查看图片是否已储存在绑定的环境中。
5.上传云函数
5.1.在项目的project.config.json文件中，将"cloudfunctionRoot": 字段的值设置为你的云函数根目录，如"cloudfunctionRoot": "云函数根目录"样式，完成该步骤后，上边新建的那个云函数根目录会变成一个有云朵符号的文件夹。（默认为cloudfunctions/）
5.2.右击云函数文件夹，选择关联环境
6.本地运行云函数配置
6.1 在云函数根目录右键点击新建node.js云函数，新建完云函数后，会有一个自动上传的过程，等上传完成后，会在右上角进行提示，而云函数在本地测试失败，所以需要配置本地运行环境。
6.2 在新建的云函数处右键在终端打开，然后输入npm install node-xlsx该命令为使用node.js的npm管理工具安装依赖模块，安装完成之后会在新建的云函数目录下生成一个node_modules和package-lock.json的文件，至此云函数依赖安装完成。
6.3 开启本地调试后任然报错，是因为没有找到相关的sdk文件，所以在终端输入 npm install 解决。
6.4 再次开启本地调试，并将请求方式改为手动触发，点击调用就能成功在本地运行。
7.改写创建的云函数，实现获取使用本小程序的登录信息
8.授权登录相关函数解析
wx.getSetting(Object object)
https://developers.weixin.qq.com/miniprogram/dev/api/open-api/setting/wx.getSetting.html
获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。
测试代码：
onLoad: function (options) {
wx.getSetting({
success: function (res) {
console.log(res)
}
})
},
返回结果：
authSetting: {scope.userInfo: false} errMsg: “getSetting:ok”
proto: Object
wx.canIUse(string schema)
https://developers.weixin.qq.com/miniprogram/dev/api/base/wx.canIUse.html
判断小程序的API，回调，参数，组件等是否在当前版本可用。
示例代码：
onLoad: function (options) {
console.log( wx.canIUse('button.open-type.getUserInfo') );
},
返回结果：true
wx.getUserInfo(Object object)
https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserInfo.html
获取用户信息。调用前需要 用户授权
bindgetuserinfo参数
https://developers.weixin.qq.com/miniprogram/dev/component/button.html
Open-type用来打开授权弹窗，拒绝授权返回undifine, 允许则返回用户信息，返回结果可用bindgetuserinfo绑定的函数查看。经测试，小程序授权如果选择允许则授权弹窗将不会再弹出，所用绑定open-type="getUserInfo"的授权按钮默点击时认获取用户信息。
例如:
bindGetUserInfo: function (e) {
console.log(e.detail.userInfo);
},
9.授权页的页面展示实现
<view wx:if="{
{canIUse}}">
<view class='header'>
<image src='/images/webico.gif'></image>
</view>
<view class='content'>
<view>申请获取以下权限</view>
<text>获得你的公开信息(昵称，头像等)</text>
</view>
<button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
授权登录
</button>
</view>
<view wx:else>请升级微信版本</view>
10.授权页样式控制
/* miniprogram/pages/login/login.wxss */
.header {
margin: 90rpx 0 90rpx 50rpx;
border-bottom: 1px solid #ccc;
text-align: center;
width: 650rpx;
height: 300rpx;
line-height: 450rpx;
}
.header image {
width: 200rpx;
height: 200rpx;
}
.content {
margin-left: 50rpx;
margin-bottom: 90rpx;
}
.content text {
display: block;
color: #9d9d9d;
margin-top: 40rpx;
}
.bottom {
border-radius: 80rpx;
margin: 70rpx 50rpx;
font-size: 35rpx;
}
11.授权页逻辑实现
// miniprogram/pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
//判断小程序的API，回调，参数，组件等是否在当前版本可用。
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
// 查看是否授权
wx.getSetting({
success: function (res) {
//如果已经授权，跳转到主页
if(res.authSetting['scope.userInfo']){
//因为直接跳转回有空白，体验不好，以弹窗的方式解决
wx.showModal({
title:'提示',
content:'检测到您已经授权过了，不需要重复授权，请问要直接前往主页吗？',
showCancel:false,
confirmText:'确定',
success:function(res){
if (res.confirm) {
wx.redirectTo({
url: '../main/main'
})
}
}
})
}
}
})
},
bindGetUserInfo: function (e) {
//如果点击授权按钮将用户信息上传至后台
if (e.detail.userInfo) {
//数据连接初始化
const db = wx.cloud.database();
// console.log(e.detail.userInfo)
//将数据插入云环境
db.collection('user').add({
// data 字段表示需新增的 JSON 数据
data: e.detail.userInfo,
success: function(res) {
// res 是一个对象，其中有 _id 字段标记刚创建的记录的 id
wx.redirectTo({
url: '../main/main'
})
}
})
}
},
})