UNIAPP微信小程序登录开发踩的几个坑(uniapp 微信小程序登录)

1、设置一个按钮:

<view class="footer" style="color: #Df924D;" @click="login_wx">

<image style="width:60rpx;height:60rpx;" src="../../static/wx.png" mode="widthFix"></image>

<text style="font-size:40rpx;font-weight:800;">微信登录</text>

</view>

2、建一个单独页面:

<template>

<view>

<!– #ifdef MP-WEIXIN –>

<view v-if="isCanUse">

<view>

<view class='header'>

<image src='../../static/splogo.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>

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

console.log("code=",code)

if (!_this.isCanUse) {

//非第一次授权获取用户信息

uni.getUserInfo({

provider: 'weixin',

success: function(infoRes) {

console.log("infoRes=",infoRes)

                      //获取用户信息后向调用信息更新方法

let nickName = infoRes.userInfo.nickName; //昵称

let avatarUrl = infoRes.userInfo.avatarUrl; //头像

_this.updateUserInfo();//调用更新信息方法

}

});

}

2.将用户登录code传递到后台置换用户SessionKey、OpenId等信息

uni.request({

url:'https://www.wm888.top/htdocs/api/login/zb_getwx.php',

data: {

code:code,

},

method: 'get',

header: {

'content-type': 'application/json'

},

success: (res) => {

console.log("返回的结果=>",res)

//openId、或SessionKdy存储//隐藏loading

uni.hideLoading();

},

fail: (res) => {

console.log(res.data)

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

<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、将小程序绑定到微信开发平台,否则没有UNIONID,在调用时也查不到的

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2023年4月3日 上午10:35
下一篇 2023年4月3日 上午10:45

相关推荐

  • 血液内科科研项目书

    血液内科科研项目书 摘要:本科研项目旨在研究利用基因编辑技术治疗急性髓系白血病(AML)。该项目由我们团队负责设计和实施。我们的研究将涉及AML细胞系中基因编辑技术的使用,以及其与…

    科研百科 2025年3月9日
    2
  • 科研专项经费管理办法规定(科研专项经费管理办法)

    科研专项经费管理办法科研专项经费管理办法(深圳、浙江、成都)“60岁以上都可以申请申请高级工作,应届研究生就有可能申请硕士。”近日,由报教育部办公厅网络等部门印发《综合2020年高…

    科研百科 2024年9月28日
    29
  • 神舟18号科研项目

    神舟18号科研项目 近年来,中国太空探索事业蓬勃发展,神舟系列飞船已经成为中国太空探索的主要工具之一。而最近,神舟18号飞船更是成功完成了一次历史性的太空飞行任务,为中国太空探索事…

    科研百科 2025年3月24日
    0
  • 农科院服务全局性科研项目农科院服务全局性科研项目

    农科院服务全局性科研项目 近年来,中国农业科学院一直在致力于服务全局性科研项目。这些项目旨在促进中国农业现代化,提高农民收入,改善农村生态环境。 中国农业科学院的全局性科研项目涉及…

    科研百科 2024年9月13日
    37
  • 什么是i国家级重大科研项目什么是i国家级重大科研项目

    什么是i国家级重大科研项目? 国家级重大科研项目是指由国家级政府机构投资或资助,旨在推动国家科技创新和发展的大规模、高质量的科研项目。这些项目通常涉及多个学科领域,包括计算机科学、…

    科研百科 2024年6月13日
    145
  • 退休党支部 存在问题

    退休党支部存在问题 尊敬的各位领导,各位同事: 大家好!我是退休党支部的书记,今天向大家汇报我们退休党支部存在的一些问题,希望能够得到大家的支持和帮助,使我们的退休党支部能够更好地…

    科研百科 2024年10月26日
    1
  • 端到端的采购流程管理,集团SRM项目业务蓝图设计方案(精华版!

    在当今竞争激烈的商业世界中,优秀的职场精英们都在不断寻求提升自己的能力,以期在职场中脱颖而出。而其中一个关键的方面就是端到端的采购流程管理。这不仅仅是一种管理方式,更是一种战略性的…

    科研百科 2024年4月25日
    156
  • 科研项目研发报告书

    科研项目研发报告书 摘要 本报告旨在介绍我们团队研发完成的科研项目“智能客服系统”,该系统采用了先进的人工智能技术,能够为用户提供快速、准确、高效的服务。本报告还对该系统的工作原理…

    科研百科 2025年5月22日
    1
  • 项目动态管理系统有哪些

    项目动态管理系统是一种能够对项目进行实时监控、跟踪和管理的软件系统。在现代项目管理中,项目动态管理系统已经成为了必不可少的工具之一。本文将介绍一些常见的项目动态管理系统,包括: 1…

    科研百科 2025年1月1日
    0
  • 梅斯医学查科研项目

    梅斯医学查科研项目 梅斯医学查科研项目是一种用于诊断和评估疾病的新科技。它使用先进的计算机技术和人工智能技术,对患者的症状和医疗历史进行综合分析,从而快速准确地诊断疾病。该项目旨在…

    科研百科 2025年3月23日
    1