更多优质内容
请关注公众号

微信小程序入门(四) 用户信息授权-张柏沛IT博客

正文内容

微信小程序入门(四) 用户信息授权

栏目:Web前端 系列:微信小程序入门系列 发布时间:2020-01-03 20:51 浏览量:2136

当你的小程序想获取用户的信息时,你要先得到用户授权

a 用户基本信息获取
给出用户弹框,用户点击确定即可获取。这类信息像昵称和头像

b.其他信息授权
例如用户的位置之类的信息
获取这类信息得先调用相应的API才能获取。而调用这些API的前提是要先获取用户基本信息。

========================
获取用户基本信息有两种方式:

获取用户基本信息方式1:使用小程序中给的用户授权按钮

index.wxml

<button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">获取用户信息</button>

open-type="getUserInfo"是指定这个按钮为获取用户信息的按钮
当用户点击这个按钮的时候,微信小程序会弹出一个弹框(确认或拒绝),但用户点击确认或拒绝之后
小程序就会调用我们定义的onGetUserInfo回调函数,并传入一些信息;在这个回调函数中对这些信息进行处理
======
index.js
onGetUserInfo(event){
    console.log(event)
}

event是如下信息:
{type: "getuserinfo", timeStamp: 1711, target: {…}, currentTarget: {…}, detail: {…}}

我们主要关注detail属性中的内容:

如果拒绝则event事件对象中会有event.detail.errMsg属性告知你授权失败。

如果是接受则detail中的信息:
detail:{
    errMsg: "getUserInfo:ok"
    rawData: "{"nickName":"张柏沛","avatarUrl":"http://wx.qlogo.cn/mmopen/vi_32/h3ZhBLsj7k5v1Qdv5UGANZP4R67H6V4xKoobiad0whQDaosSJZ1JhlIhbJPtJwGDhcUax1OQbzEHBV08wicCLtbicg/135","gender":1,"province":"Hunan","city":"Changsha"}"
    userInfo:
    avatarUrl: "http://wx.qlogo.cn/mmopen/vi_32/h3ZhBLsj7k5v1Qdv5UGANZP4R67H6V4xKoobiad0whQDaosSJZ1JhlIhbJPtJwGDhcUax1OQbzEHBV08wicCLtbicg/135"
    city: "Changsha"
    gender: 1
    nickName: "张柏沛"
    province: "Hunan"
}

我们就处理event.detail.userInfo中的信息即可
其中avatarUrl是用户头像的路径

第二次用户再点击该按钮的时候就不会提示弹框,不会直接获取信息。

获取用户基本信息方式2:直接调用Api

index.wxml
<button bind:tap="onTry">获取用户信息</button>

index.js 

onTry(){
    //调用用户信息授权的API
    wx.getUserInfo({
        //ES6的写法
        success:msg=>{
            console.log(msg);
        },
        fail:e=>{
            console.log(e);
        }
    });
}

调用接口的时候,获取的信息msg内容如下:
{
    errMsg: "getUserInfo:ok"
    rawData: "{"nickName":"张柏沛","avatarUrl":"http://wx.qlogo.cn/mmopen/vi_32/h3ZhBLsj7k5v1Qdv5UGANZP4R67H6V4xKoobiad0whQDaosSJZ1JhlIhbJPtJwGDhcUax1OQbzEHBV08wicCLibicg/132","gender":1,"province":"Hunan","city":"Changsha"}"
    signature: undefined
    userInfo:
    avatarUrl: "http://wx.qlogo.cn/mmopen/vi_32/h3ZhBLsj7k5v1Qdv5UGANZP4R67H6V4xKoobiad0whQDaosSJZ1JhlIhbJPtJwGDhcUax1OQbzEHBV08wicCLibicg/132"
    city: "Changsha"
    gender: 1
    nickName: "张柏沛"
    province: "Hunan"
}

调用信息时,直接msg.userInfo即可

PS:按照老师的说法,如果之前用户没有授权过,那么直接使用API好像无法弹出弹框,此时授权会直接失败。所以API授权只适用于之前已授权过的再次授权。


============================
获取用户的其他授权信息:


获取用户的其他授权信息只有一种方式,就是使用微信小程序接口获取
用户的其他授权信息有很多种,但是统一用
wx.authorize({
    "scope":"xxx"
});
这个方法调用

获取什么信息取决于scope参数。

scope列表如下:
scope    对应接口    描述
scope.userInfo    wx.getUserInfo    用户信息
scope.userLocation    wx.getLocation, wx.chooseLocation    地理位置
scope.userLocationBackground    wx.userLocationBackground    后台定位
scope.address    wx.chooseAddress    通讯地址
scope.invoiceTitle    wx.chooseInvoiceTitle    发票抬头
scope.invoice    wx.chooseInvoice    获取发票
scope.werun    wx.getWeRunData    微信运动步数
scope.record    wx.startRecord    录音功能
scope.writePhotosAlbum    wx.saveImageToPhotosAlbum, wx.saveVideoToPhotosAlbum    保存到相册
scope.camera    camera 组件    摄像头

PS:上面的这些接口第一次调用的时候都会弹出弹框除了scope.userInfo,真的想有弹框必须用<button open-type="getUserInfo"></button>
仅举一个例子,获取用户地理位置:

<button bind:tap="onAuthLoaction">获取用户地理位置</button>

onAuthLoaction(){
    wx.authorize({
        scope:'scope.userLocation',
        success:msg=>{
            console.log(msg);
        },
        fail:e=>console.log(e)
    });
}

第一次调用的时候会有弹框,用户同意才会获取到信息。

或者你可以使用wx.getLocation直接获取用户地理位置:
wx.getLocation({
    success:msg=>{
            console.log(msg);
        },
        fail:e=>console.log(e)
});

PS:一旦用户拒绝了弹框,下一次调用这些授权方法会直接失败,短时间内不会再出现弹框
=======================
小程序还提供了一个接口,这个接口会告诉你,用户对你授权了哪些信息,没有授权哪些信息

<button bind:tap="getAuthSetting">获取授权信息</button>

getAuthSetting(){
    wx.getSetting({
        success:msg=>console.log(msg)
    });
}

msg.authSetting如果为空对象,则说明用户什么信息都没授权
msg.authSetting为{"scope.userInfo":true,"scope.userLocation":true},说明用户基本信息和地理位置信息已授权。

==================================
万一用户不小心在弹框拒绝了你的授权请求,如何在出现这个弹框去向用户请求呢?

wx.openSetting({
    success:msg=>console.log(msg)
});

调用这个接口,小程序会先跳转到一个设置面板页面让用户去设置权限,用户在这个页面可以开启权限给我们授权。之后会调用success回调函数,返回的msg的内容和wx.getSetting中的msg一样。




更多内容请关注微信公众号
zbpblog微信公众号

如果您需要转载,可以点击下方按钮可以进行复制粘贴;本站博客文章为原创,请转载时注明以下信息

张柏沛IT技术博客 > 微信小程序入门(四) 用户信息授权

热门推荐
推荐新闻