详解使用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 相关文章推荐
基于jquery的网页SELECT下拉框美化代码
Oct 28 Javascript
jQuery学习笔记之jQuery选择器的使用
Dec 22 Javascript
JS实现CheckBox复选框全选全不选功能
May 06 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 Javascript
JavaScript对象数组的排序处理方法
Oct 21 Javascript
微信小程序 教程之小程序配置
Oct 17 Javascript
Vue自定义指令详解
Jul 28 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
linux 后台运行node服务指令方法
May 23 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
Apr 10 Javascript
layui use 定义js外部引用函数的方法
Sep 26 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 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获取微信共享收货地址的方法
2017/12/21 PHP
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
2017/08/23 jQuery
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
javascript中闭包closure的深入讲解
2021/03/03 Javascript
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
Python入门篇之面向对象
2014/10/20 Python
python连接数据库的方法
2017/10/19 Python
python如何拆分含有多种分隔符的字符串
2018/03/20 Python
python散点图实例之随机漫步
2018/08/27 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
python 实现性别识别
2020/11/21 Python
时尚圣经:The Fashion Bible
2019/03/03 全球购物
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
中国电子产品批发商/跨境电商/外贸网:Sunsky-online
2020/04/20 全球购物
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
先进德育工作者事迹材料
2014/01/24 职场文书
个人求职信范文分享
2014/01/31 职场文书
解除劳动合同协议书
2014/09/17 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
2015年语言文字工作总结
2015/07/23 职场文书