uni-app微信小程序登录授权

凤凰囹 發表於 2020-4-8 17:04:00

微信小程序授权是非常简单和常用的功能，但为了方便，还是在此记录一下要点：
<img src="https://img2020.cnblogs.com/blog/1157406/202004/1157406-20200408165741463-1083574942.png">
 
 
首先是需要用到一个授权按钮来触发获取用户信息授权：关键在于 open-type 为 getUserInfo , 然后有个@getuserinfo的事件，把获取授权接口写到该事件里面去
<div class="cnblogs_code">
<pre><button class="sys_btn" open-type="getUserInfo" lang="zh_CN" @getuserinfo="appLoginWx">小程序登录授权</button></pre>
</div>
方法如下：
<div class="cnblogs_code">
<pre> appLoginWx(){
 // #ifdef MP-WEIXIN
 uni.getProvider({
 service: 'oauth',
 success: function (res) {
 if (~res.provider.indexOf('weixin')) {
 uni.login({
 provider: 'weixin',
 success: (res2) => {
 
 uni.getUserInfo({
 provider: 'weixin',
 success: (info) => {//这里请求接口
 console.log(res2);
 console.log(info);

 },
 fail: () => {
 uni.showToast({title:"微信登录授权失败",icon:"none"});
 }
 })

 },
 fail: () => {
 uni.showToast({title:"微信登录授权失败",icon:"none"});
 }
 })

 }else{
 uni.showToast({
 title: '请先安装微信或升级版本',
 icon:"none"
 });
 }
 }
 });
 //#endif
 }</pre>
</div>
 
在 uni.login 和 uni.getUserInfo 被调用后，你可以获取到以下值用于继续请求后端给你的接口：
常用的值大概有：code 、iv 、encryptedData 和个人基本信息，这些可以传给后端交换得到openid。
 
<img src="https://img2020.cnblogs.com/blog/1157406/202004/1157406-20200408165531645-747004200.png">
 
如果需要知道用户当前是否已经授权，则可以使用如下代码：
uniapp的授权文档，可以判断不同的授权类型：https://uniapp.dcloud.io/api/other/authorize?id=authorize
<div class="cnblogs_code">
<pre> // #ifdef MP-WEIXIN
 uni.getSetting({
 success(res) {
 console.log("授权：",res);
 if (!res.authSetting['scope.userInfo']) {
 //这里调用授权
 console.log("当前未授权");
 } else {
 //用户已经授权过了
 console.log("当前已授权");
 }
 }
 })
 //#endif</pre>
</div>
 
 
 

</div>
<div id="MySignature" role="contentinfo">
有人住高楼，有人处深沟。
有人光万丈，有人一生绣。
时光是匆匆，回首无旧梦。
人生若几何，凡尘事非多。
深情总遗却，妄自也洒脱。 
来源：https://www.cnblogs.com/nanyang520/p/12661104.html

頁: [1]

琼殿技术论坛's Archiver

uni-app微信小程序登录授权