使用uni-app开发微信小程序之登录模块

ゝ一纸荒年。 2022-02-09 08:41 151阅读 0赞

从微信小程序官方发布的公告中我们可获知：小程序体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败，需使用 <button open-type="getUserInfo"></button> 引导用户主动进行授权操作：

1.当用户未授权过，调用该接口将直接报错

2.当用户授权过，可以使用该接口获取用户信息

但在实际开发中我们可能需要弹出授权询问框，因此需要我们自己来写模拟授权弹框（主要是对 <button open-type="getUserInfo"></button>的包裹+用户是否是第一次授权判断来显示该页面），代码如下：

1.页面结构

![复制代码][copycode.gif]

<template>
        <view>
            
            <view v-if="isCanUse">
                <view>
                    <view class='header'>
                        <image src='../../static/img/wx_login.png'></image>
                    </view>
                    <view class='content'>
                        <view>申请获取以下权限</view>
                        <text>获得你的公开信息(昵称，头像、地区等)</text>
                    </view>
    
                    <button class='bottom' type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">
                        授权登录
                    </button>
                </view>
            </view>
            
        </view>
    </template>

![复制代码][copycode.gif]

这里的isCanUse是用来记录当前用户是否是第一次授权使用的，wx\_login.png图在底部下载获取即可。

2.样式

![复制代码][copycode.gif]

<style>
        .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;
        }
    </style>

![复制代码][copycode.gif]

3.脚本部分

![复制代码][copycode.gif]

<script>
        export default {
            data() {
                return {
                    SessionKey: '',
                    OpenId: '',
                    nickName: null,
                    avatarUrl: null,
                    isCanUse: uni.getStorageSync('isCanUse')||true//默认为true
                };
            },
            methods: {
                //第一授权获取用户信息===》按钮触发
                wxGetUserInfo() {
                    let _this = this;
                    uni.getUserInfo({
                        provider: 'weixin',
                        success: function(infoRes) {
                            let nickName = infoRes.userInfo.nickName; //昵称
                            let avatarUrl = infoRes.userInfo.avatarUrl; //头像
                            try {
                                uni.setStorageSync('isCanUse', false);//记录是否第一次授权  false:表示不是第一次授权
                                _this.updateUserInfo();
                            } catch (e) {}
                        },
                        fail(res) {}
                    });
                },
    
    　　　　　　//登录
                    login() {
                    let _this = this;
                    uni.showLoading({
                        title: '登录中...'
                    });
                 
                   // 1.wx获取登录用户code
                    uni.login({
                        provider: 'weixin',
                        success: function(loginRes) {
                            let code = loginRes.code;
                            if (!_this.isCanUse) {
                                //非第一次授权获取用户信息
                                uni.getUserInfo({
                                    provider: 'weixin',
                                    success: function(infoRes) {
     　　　　　　　　　　　　　　　　　　　　　　//获取用户信息后向调用信息更新方法
                                        let nickName = infoRes.userInfo.nickName; //昵称
                                        let avatarUrl = infoRes.userInfo.avatarUrl; //头像
                                            _this.updateUserInfo();//调用更新信息方法
                                    }
                                });
                            }
                
                            //2.将用户登录code传递到后台置换用户SessionKey、OpenId等信息
                            uni.request({
                                url: '服务器地址',
                                data: {
                                    code: code,
                                },
                                method: 'GET',
                                header: {
                                    'content-type': 'application/json'
                                },
                                success: (res) => {
                                    //openId、或SessionKdy存储//隐藏loading
                                    uni.hideLoading();
                                }
                            });
                        },
                    });
                },
             //向后台更新信息
                updateUserInfo() {
                    let _this = this;
                    uni.request({
                        url:'url' ,//服务器端地址
                        data: {
                            appKey: this.$store.state.appKey,
                            customerId: _this.customerId,
                            nickName: _this.nickName,
                            headUrl: _this.avatarUrl
                        },
                        method: 'POST',
                        header: {
                            'content-type': 'application/json'
                        },
                        success: (res) => {
                            if (res.data.state == "success") {
                                uni.reLaunch({//信息更新成功后跳转到小程序首页
                                    url: '/pages/index/index'
                                });
                            }
                        }
                       
                    });
                }
            },
            onLoad() {//默认加载
                this.login();
            }
        }
    </script>

![复制代码][copycode.gif]

4.最终效果如下：

![860581-20190304183419970-1602831648.png][] ![860581-20190304183558867-1690809141.png][]

wx\_login.png图：

![860581-20190304184944616-1174460791.png][]

[copycode.gif]: /images/20220209/dccf9e9dc89c4118ba484a2206220eb3.png
[860581-20190304183419970-1602831648.png]: https://img2018.cnblogs.com/blog/860581/201903/860581-20190304183419970-1602831648.png
[860581-20190304183558867-1690809141.png]: /images/20220209/64ef3f4f105242a6a313118d52912b6b.png
[860581-20190304184944616-1174460791.png]: /images/20220209/29e6f4ecb8fc40b8b7cce41d0d099b62.png

发表评论取消回复

表情：

评论列表（有 0 条评论，151人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序之微信登录（详解）

1 微信登录流程微信登录：[小程序登录 | 微信开放文档][Link 1] ![3a7ba317d734404aae174ff5f85e5e11.jpeg][] 步

短命女/ 2023年10月13日 23:58/ 0 赞/ 105 阅读

相关基于Uniapp+SpringBoot实现微信小程序授权登录

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5a2Z5LiN5Z2aM

Love The Way You Lie/ 2023年10月02日 04:02/ 0 赞/ 513 阅读

相关 Uni-App之微信小程序实际开发之登录

小程序的登录有好几种方式吧，我目前接触过的就只有微信授权登录和账号密码登录，那现在这个项目讲的就是账号密码登录实现效果：输入账号密码进行登录，登录判断成功跳转到首页

左手的ㄟ右手/ 2023年07月19日 08:12/ 0 赞/ 22 阅读

相关微信小程序登录与企业微信小程序登录

在微信（或企业微信）中登录小程序，可以分为两种：第一种是使用微信授权登录，第二种使用账号密码登录（如某些非开放的系统）；一、使用微信登录小程序微信中调用w

心已赠人/ 2023年06月13日 11:17/ 0 赞/ 87 阅读

相关 uniapp实现微信小程序登录功能

第一步我们先把页面画出来 <template>  <view v-if="isCan

系统管理员/ 2022年12月29日 14:25/ 0 赞/ 292 阅读

相关微信小程序登录

微信各接口定义（残缺版）： package com.cong.security.core.properties; public class WXCo

你的名字/ 2022年11月26日 07:00/ 0 赞/ 306 阅读

相关 Uniapp实现微信小程序云开发

开通云开发 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

向右看齐/ 2022年05月01日 12:58/ 0 赞/ 815 阅读

相关使用uni-app开发微信小程序之登录模块

从微信小程序官方发布的公告中我们可获知：小程序体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败，需使用 <button open-ty

ゝ一纸荒年。/ 2022年02月09日 08:41/ 0 赞/ 152 阅读

相关微信小程序微信登录

![image.png][] 开发接口登录 wx.login wx.checkSession 签名加密小程序登录小程序可以通过微信官方提供的登录能

Dear 丶/ 2021年09月29日 13:12/ 0 赞/ 741 阅读

相关 uniapp微信小程序授权登录

<template> <view> <LotusLoading :lotusLoadingData="lotusLoadingData" styl

本是古典何须时尚/ 2021年07月24日 23:16/ 0 赞/ 1061 阅读