详解使用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 相关文章推荐
Android中的jQuery:AQuery简介
May 06 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 Javascript
jquery实现最简单的滑动菜单效果代码
Sep 12 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 Javascript
vue如何引入sass全局变量
Jun 28 Javascript
pageGroup.js实现分页功能
Jul 27 Javascript
JS实现动态无缝轮播
Jan 11 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
php下用GD生成生成缩略图的两个选择和区别
2007/04/17 PHP
PHP 5.3新增魔术方法__invoke概述
2014/07/23 PHP
php操作redis缓存方法分享
2015/06/03 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
PHP实现函数内修改外部变量值的方法示例
2018/12/28 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
JavaScript无阻塞加载和defer、async详解
2017/02/26 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
2017/10/31 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
Python探索之pLSA实现代码
2017/10/25 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
python 内置模块详解
2019/01/01 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
Python银行系统实战源码
2019/10/25 Python
Python函数参数分类原理详解
2020/05/28 Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
2020/12/01 Python
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
篮球社团活动总结
2014/06/27 职场文书
2015年电工工作总结
2015/04/10 职场文书
音乐课外活动总结
2015/05/09 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
分享几个实用的CSS代码块
2022/06/10 HTML / CSS