详解使用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 相关文章推荐
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
JavaScript实用技巧(一)
Aug 16 Javascript
js函数排序的实例代码
Jul 01 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
Vue表单实例代码
Sep 05 Javascript
angular.js实现购物车功能
Oct 23 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
详解JWT token心得与使用实例
Aug 02 Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 Javascript
vue模块移动组件的实现示例
May 20 Javascript
在JavaScript中如何使用宏详解
May 06 Javascript
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
西德产收音机
2021/03/01 无线电
使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
Laravel框架控制器的middleware中间件用法分析
2019/09/30 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
精通Javascript系列之数值计算
2011/06/07 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
JS方法调用括号的问题探讨
2014/01/24 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
2017/10/19 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
layui--select使用以及下拉框实现键盘选择的例子
2019/09/24 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
opencv实现图像几何变换
2021/03/24 Python
小学国庆节活动方案
2014/02/11 职场文书
研修第一天随笔感言
2014/02/15 职场文书
办公室员工岗位工作职责
2014/03/10 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
初任公务员培训心得体会
2016/01/08 职场文书
python 判断文件或文件夹是否存在
2022/03/18 Python