微信小程序学习之授权登录

1. 创建云开发小程序
   微信开发者工具》项目》新建项目》小程序》云开发》创建
   
   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'
          })
        }
      })
    } 
  },

})