自学小程序之路(六)，怎样和微信本身打交道，登录，授权等

获取微信用户资料

通过微信特有组件open-data直接展示用户信息

如果你登录了小程序开发者工具，创建一个新的小程序后，界面上会默认显示微信名称和昵称。

那么问题来了，头像和昵称又是从哪里获取到的呢？

显示头像和昵称的代码部分

    <block wx:if="{{canIUseOpenData}}">
      <view class="userinfo-avatar" bindtap="bindViewTap">
        <open-data type="userAvatarUrl"></open-data>
      </view>
      <open-data type="userNickName"></open-data>
    </block>

其中显示头像的部分用了open-data这个组件。再去组件文档中查下这个组件的意思 

https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html

 组件主要用于展示微信的开放数据，而具体展示什么，还需要看type的设置  

 

 那么是不是设置了这个open-data就可以获取到用户的头像呢，有些太简单了吧，接着往下看

在上面的代码中，第一行就是一个判断条件

<block wx:if="{{canIUseOpenData}}">

不懂<block>和wx:if的可以点击下面这个官方链接查看。

https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000ee2c29d4f805b0086a37a254c0a

就是说只有if后面的条件成立时，这个<block>组件里面的内容才会显示。

那么这个canIUseOpenData在js文件中是怎么定义的呢？

我滴天，这么长一串，突然感觉自己是不是踩了什么坑，硬着头皮看下去吧。

 wx.canIUse()是个啥？看到wx开头的，第一反应就是微信的api,去api文档里查查，就是下面这个

https://developers.weixin.qq.com/miniprogram/dev/api/base/wx.canIUse.html

 很明显我们就是采取了第二种参数方式来调用的这个CanIUse方法，问题是，它怎么就返回true了呢？

如果是仅仅因为基础库问题，那返回true我是能理解的。但是就没有其他限制条件了吗？

于是我修改了一下app.js

让程序启动后，什么都不操作，直接获取这个canIUse接口返回的值

 然后在控制台，居然就真的是true。

emmm.......这么简单直白的拿用户数据的吗？

各种扒翻，终于找到了最新的一条官方说明。 

 https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801?highLine=%25E7%2599%25BB%25E5%25BD%2595%2520open-data

额，既然官方都这样说了。那就好吧。对我们开发人员是省事了不少呀。

当然，可能除了在页面上展示用户的信息外，有的情景需要向后台传输用户信息，这就需要我们拿到具体的值，而不仅仅是展现，这时候就需要用到了微信的另一个接口。wx.getUserProfile

用微信的API ----getUserProfile--获取用户资料

两点信息:

1. 必须是点击事件里调用。也就是用户主动去获取。
2. 每次获取都会有弹窗，最好保存在本地 

还是新建的项目例子,修改下

js文件

wxml文件

 修改两处，对应的思路为

1.把用open-data显示头像昵称的路堵死，所以在js文件中将canIUseOpenData设置为false

2.布局文件代码中有两个【获取头像昵称】的button，到时候页面上显示的是哪一个不知道。给其中一个做上红色背景加以区别。

看效果

 如此可知显示了第一个button，也就意味着canIUseGetUserProfile这个数据为true。那么这个数据在js文件中那里做出了修改呢？

 可以看到在第二条红线处onload方法中把canIUseGetUserProfile设置为了true.

前提条件是这句

if (wx.getUserProfile) 

 从Java过来的人表示又懵了，这是个啥判断条件？打印了一下，发现非true非false,打印了一个方法体，咋地，一个方法体就表示通过？

不得已，又去网上查了js的if语法。结论如下

在javascript中，可以能作为if的条件的

1、布尔变量true/false
2、数字非0,非NaN/ （0 或NaN)

3、对象非null/（null或undefined)
4、字符串非空串（“”）/空串("")

 很明显，让我迷惑的这个if语句属于第三条，这个wx.getUserProfile对象不是null，不信可以console.log一下。

这灵活的js,可以用Java中的if(wx.getUserProfile!=null)这么来串一下就明白了。

回归onload方法，也就是说因为基础库支持这个方法，所以就把canIUseGetUserProfile设置为了true,也就显示出了那个红色按钮。

红色按钮有个点击事件bindtap="getUserProfile" ，到js里面会一会这个方法

getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },

调用了小程序的API,wx.getUserProfile这个方法。这个方法的参数的成功返回值中带有了userInfo属性，接合wxml文件，可以发现成功后应该显示下面这段代码

也就是显示用户名和昵称，只不过这个用户名和昵称都是从userinfo这个属性拿的。

运行效果

 （为了这个Gif真是操碎了心❤）

这样就拿到了我们的头像和昵称了。

微信的用户数据的逻辑：

在微信界面展示用户的信息可以用open-data组件，但是无法对其进行取值，只能展示。

如果想利用微信用户的信息进行存储或者传递到其他的平台，则需要用户授权。

微信登录

https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000cc48f96c5989b0086ddc7e56c0a

 思路

1.没获取到sessionid之前，到微信服务器获取code,然后带着code和账密去自家服务器。自家服务器会返回一个sessionid.

2.获取到sessionID之后，存在本地，未过期之前直接用sessionID来和后台沟通即可。

过期之后，重复步骤1获取新的sessionID.

依然新建的项目为例，在app.js中，会看到这样一段代码

App({
  onLaunch() {
   // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        console.log(res)
      }
    })
  },

也就是在启动APP的时候就进行了登录。

将返回的res打印看看

 是这样的结构，我们需要的就是这个code---临时身份证，5分钟有效期，所以每次用的时候要从微信服务器重新wx.login才可以。

授权

弹框提示用户

从上面的微信资料获取和微信登录可以看出，微信提供的API有一部分需要弹框提醒用户的。这个弹框提醒用户的过程就是授权。

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html

类似于Android 上的通讯录，地址，相册等权限需要通知到用户。

小程序上需要授权的API

需要用到上图蓝色字体API的思路逻辑

1. 判断对应的scope是否被授权
2. 没有授权的话弹框询问是否开通授权
3. 授权了的话进行要执行的操作。

步骤1 对应的API  ---- wx.getSetting()

wx.getSetting({
  success (res) {
    console.log(res.authSetting)
    // res.authSetting = {
    //   "scope.userInfo": true,
    //   "scope.userLocation": true
    //    为true的scope表示已经进行过授权
    // }
  }
})

步骤2对应的API ----wx.authorize( )

wx.authorize({
            scope: 'scope.werun',//获取微信运动的权限
            success: function(result){
              console.log("点击了同意"+result)
              getRunData();//进行授权后要执行的操作
            }
          })

步骤3对应的api,就是贴图中的蓝色api

举例，我们要获取用户的运动数据，而这个数据是需要授权的。

//index.js
onLoad() {
var _this = this;//很重要，不然无法调用😢
    wx.getSetting({
      withSubscriptions: true,
      success:function(res){
        console.log(res);
        if(!res.authSetting['scope.werun']){
          wx.authorize({
            scope: 'scope.werun',
            success: function(result){
              console.log("点击了同意"+result)
              _this.getRunData();
            }
          })
        }
          else{
            _this.getRunData();
          }
      }
    })
},
getRunData(){
    wx.getWeRunData({
      success: (result) => {
        console.log(result)
      },
    })
  }

执行效果

 

打印的log 

 运动时敏感数据，所以微信加密后返回来了。参考

https://developers.weixin.qq.com/miniprogram/dev/api/open-api/werun/wx.getWeRunData.html

引导用户去设置页自己打开

用户可以在小程序设置界面（「右上角」 - 「关于」 - 「右上角」 - 「设置」）中控制对该小程序的授权状态。

可以调用 wx.openSetting 打开设置界面，引导用户开启授权。

类似Android平台上引导用户打开设置页设置APP的权限。

<!--index.wxml-->
<block wx:elif="{{!hasUserInfo}}">
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile" style="background-color:red"> 获取头像昵称 </button>
      <!-- <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button> -->
      <button bindtap="opensetting" style="background-color:lightgreen;margin-top:30rpx"> 打开设置页面 </button>
      <!-- <view wx:else> 请使用1.4.4及以上版本基础库 </view> -->
    </block>

//index.js
  opensetting(e){
      wx.openSetting({
        success:function (params) {
          console.log("成功打开")
        }
      })
  },

 效果，只会展示程序中请求过得权限

 微信的API用到的时候就去看，文档很全。下一篇写写网络请求。慢慢学呗。