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

  1. 创建云开发小程序
    微信开发者工具》项目》新建项目》小程序》云开发》创建
    微信小程序学习之授权登录_第1张图片
    2.创建好后的云开发项目会自带几个测试demo,当然,还不能使用,接下来开通云环境。在开发者工具工具栏左侧,点击 “云开发” 按钮即可打开云控制台、根据提示开通云开发、创建云环境。开通好后就能在云开发控制台进行数据操作啦。

微信小程序学习之授权登录_第2张图片

3.小程序绑定服务控制台环境,(默认为第一个环境)相当于绑定服务器。
云开发控制台》设置》环境设置》复制环境ID》返回开发者工具》在资源管理器打开app.js》修改env的值为刚才复制的环境ID》保存

4.测试环境是否绑定成功。利用上传图片demo上传图片,查看图片是否已储存在绑定的环境中。

5.上传云函数
5.1.在项目的project.config.json文件中,将"cloudfunctionRoot": 字段的值设置为你的云函数根目录,如"cloudfunctionRoot": "云函数根目录"样式,完成该步骤后,上边新建的那个云函数根目录会变成一个有云朵符号的文件夹。(默认为cloudfunctions/)
5.2.右击云函数文件夹,选择关联环境
6.本地运行云函数配置
6.1 在云函数根目录右键点击新建node.js云函数,新建完云函数后,会有一个自动上传的过程,等上传完成后,会在右上角进行提示,而云函数在本地测试失败,所以需要配置本地运行环境。
微信小程序学习之授权登录_第3张图片
6.2 在新建的云函数处右键在终端打开,然后输入npm install node-xlsx该命令为使用node.js的npm管理工具安装依赖模块,安装完成之后会在新建的云函数目录下生成一个node_modules和package-lock.json的文件,至此云函数依赖安装完成。
6.3 开启本地调试后任然报错,是因为没有找到相关的sdk文件,所以在终端输入 npm install 解决。
微信小程序学习之授权登录_第4张图片
6.4 再次开启本地调试,并将请求方式改为手动触发,点击调用就能成功在本地运行。

微信小程序学习之授权登录_第5张图片
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.授权页的页面展示实现
微信小程序学习之授权登录_第6张图片

<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'
          })
        }
      })
    } 
  },

})

你可能感兴趣的:(微信小程序,小程序)