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


Posted in Javascript onMay 09, 2019

从微信小程序官方发布的公告中我们可获知:小程序体验版、开发版调用 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.最终效果如下:

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

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

wx_login.png图:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
10个基于浏览器的JavaScript调试工具分享
Feb 07 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
javascript实现字符串反转的方法
Feb 05 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
详解vue2.6插槽更新v-slot用法总结
Mar 09 Javascript
js验证身份证号码记录的方法
Apr 26 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
vue-router为激活的路由设置样式操作
Jul 18 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
May 09 #Javascript
JS原型与继承操作示例
May 09 #Javascript
详解微信小程序回到顶部的两种方式
May 09 #Javascript
jquery登录的异步验证操作示例
May 09 #jQuery
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 #Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
May 09 #Javascript
vue 引用自定义ttf、otf、在线字体的方法
May 09 #Javascript
You might like
Syphon 秘笈
2021/03/03 冲泡冲煮
php使用for语句输出三角形的方法
2015/06/09 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
监控 url fragment变化的js代码
2010/04/19 Javascript
围观tangram js库
2010/12/28 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
2016/10/19 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
js设计模式之单例模式原理与用法详解
2019/08/15 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
Python中asyncore的用法实例
2014/09/29 Python
深入浅出分析Python装饰器用法
2017/07/28 Python
Python 高级专用类方法的实例详解
2017/09/11 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
森林防火工作方案
2014/02/14 职场文书
2014学雷锋活动心得体会
2014/03/10 职场文书
住房抵押登记委托书
2014/09/27 职场文书
2014年租房协议书范本
2014/10/30 职场文书
上课迟到检讨书范文
2015/05/06 职场文书
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL
详解Java实践之抽象工厂模式
2021/06/18 Java/Android
在项目中使用redis做缓存的一些思路
2021/09/14 Redis