当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 详解使用uni-app开发微信小程序之登录模块

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

2019年07月22日  | 移动技术网IT编程  | 我要评论

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

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

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

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

1.页面结构

<template>
  <view>
    <!-- #ifdef mp-weixin -->
    <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>
    <!-- #endif -->
  </view>
</template>

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

2.样式

<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>

3.脚本部分

<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>

4.最终效果如下：

 

wx_login.png图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网