长沙微信开发教程：详解使用长沙开发微信小程序之登录模块开发
时间:2021-06-02 10:58
浏览次数：
【摘要】主要介绍了长沙微信开发微信小程序登录授权的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习
使用长沙微信开发开发微信小程序之登录模块
从微信小程序官方发布的公告中我们可获知：小程序体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败，需使用 <button open-type="getUserInfo"></button> 引导用户主动进行授权操作：
1.当用户未授权过，调用该接口将直接报错
2.当用户授权过，可以使用该接口获取用户信息
但在实际开发中我们可能需要弹出授权询问框，因此需要我们自己来写模拟授权弹框（主要是对 <button open-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.最终效果如下：
wx_login.png图：
posted on 2019-03-04 18:51 WFaceBoss 阅读( ...) 评论( ...) 编辑 收藏
转载于:https://www.cnblogs.com/wfaceboss/p/10472413.html
相关资源：详解使用长沙微信开发开发微信小程序之登录模块
工程师小C的小店我也想开通小店
缓存中间件Redis技术入门与应用场景实战（SpringBoot2.x + 抢红包系统设计与实战）
讲师：修罗debug
好评：100.0%
销售量：2
￥99
更多
点赞
评论
分享
收藏
5
举报
关注
一键三连
长沙微信开发微信小程序登录授权的实现
10-15
主要介绍了长沙微信开发微信小程序登录授权的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
使用长沙微信开发开发微信小程序的实现
10-15
主要介绍了使用长沙微信开发开发微信小程序的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
优质评论可以帮助作者获得更高权重
表情包
weixin_34159110
weixin_34159110:这篇文章对你有帮助吗？作为一名程序工程师，在评论区留下你的困惑或你的见解，大家一起来交流吧！
相关推荐
长沙微信开发之微信小程序实际开发之登录_Jocelyn_书
5-4
长沙微信开发之微信小程序实际开发之登录 小程序的登录有好几种方式吧,我目前接触过的就只有微信授权登录和账号密码登录,那现在这个项目讲的就是账号密码登录 实现效果:输入账号密码进行登录,登录判断成功跳转到首页...
长沙微信开发实现微信小程序登录功能_小马总的博客
5-16
长沙微信开发实现微信小程序登录功能 第一步 我们先把页面画出来 <template> <!-- #ifdef MP-WEIXIN --> <viewv-if="isCanUse"> <view> <viewclass='headers'> <imagesrc='../../static/img/logo.png'></image>...
详解使用长沙微信开发开发微信小程序之登录模块
10-17
主要介绍了详解使用长沙微信开发开发微信小程序之登录模块，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用 长沙微信开发 实现小程序的微信登录功能
11-20
1.微信登录思路： 在main.js 中封装公共函数，用于判断用户是否登录 在main.js 中分定义全局变量，用于存储接口地址 如果没有登录、则跳转至登录页面 进入登录页面 通过 wx.login 获取用户的 code 通过 code 获取用户的 SessionKey、OpenId 等信息【本应后台接口、但是此处使用js发送请求】 通过 openId 调用后台 Api 获取用户的信息 获取成功，则说明已经授权过了,直接登录成功 获取失败，则说明没有授权过，需要授权之后才能进行登录 用户点击页面微信登录按钮【 <button open-type=”get
长沙微信开发 开发【微信小程序简陋登录模块】_chongjiu3883...
5-15
长沙微信开发 开发【微信小程序简陋登录模块】 export default { data() { components: { } return { SessionKey: '', code:'', isCanUse: uni.getStorageSync('isCanUse')||true,//默认为true show:true...
长沙微信开发开发微信小程序登陆注册_qie1138159096的博客
5-7
长沙微信开发开发微信小程序登陆注册 微信一键登录<viewclass="login-hint"v-show="btnShow1">请完成微信授权后继续使用</view>授权微信信息 //获取手机号getPhoneNumber(e)
使用长沙微信开发开发微信小程序之登录模块
wwf1225的博客
7201
从微信小程序官方发布的公告中我们可获知：小程序体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败，需使用 <buttonopen-type="getUserInfo"></button> 引导用户主动进行授权操作： 1.当用户未授权过，调用该接口将直接报错 2.当用户授权过，可以使用该接口获取用户信息 但在实际开发中我们可...
长沙微信开发实战商城类app和小程序
03-07
课程概述 本季度为长沙微信开发实战项目第2季度，将实战商城类app和小程序，其中会包括发布到安卓端app，iOS端app、微信小程序，另外还会涉及Weex（nvue），Vuex模块化管理，商城支付模块等。 课程大纲见以下图！
长沙微信开发 阿里云开发微信小程序一键登录_菜鸟驿站2020的博客
4-29
成功拿到登录信息 云数据库自动生成数据表 uni-id-users 以下是用长沙微信开发与阿里云开发的相册小程序,主要功能是手机壁纸的上传分享。
长沙微信开发微信小程序授权登录详解(带注释)_q457201373的博客
5-18
长沙微信开发微信小程序授权登录详解(带注释) 整体概括:引导用户点击授权获取用户信息.、微信一些规则请前往微信中查看,不做过多说明. 授权目的:1获取用户信息,2部分接口需要用户同意授权才可以调用。
长沙微信开发 开发微信，支付小程序
技术分享
414
长沙微信开发，开发过程中，对微信小程序兼容性较好， 支付宝： 获取经纬度问题： api：uni.getLocation，需要设置如下，不然获取不到定位走false uni.getLocation({ // type: 'gcj02', //返回可以用于uni.openLocation的经纬度 success: (res) => { const { latitude, longitude } = res; }, fail: (res) => {
课件：springboot + 长沙微信开发 + vue-cli写一个可以卖课件，并且在线预览课件的小程序。微信支付-源码
03-04
接收了微信支付，小程序登录。代码量少，涉及的内容较多，适合新手学习。 涉及技术 初步： springboot ， mybatis-plus ， shiro+JWT ， mapstruct ，阿里云OSS ， docker ， redis ，微信支付 小程序： 长沙微信开发 ...
长沙微信开发跨平台应用-微信小程序授权登录详解_似码非码的...
5-20
前面已经讲过长沙微信开发的app登录了,现在讲一下微信小程序的授权登录方法。 直接上代码: uni.login({provider:'weixin',success:function(loginRes){letjs_code=loginRes.code;//js_code可以给后台获取unionID或openID作为用户标识// 获...
长沙微信开发 引入微信小程序直播功能
Kamikorosu的博客
427
长沙微信开发 编译APP跳转微信小程序及返回APP 配置 要想从对应的APP跳转小程序首先要在微信开放平台的设置里面的关联小程序模块中配置开启APP跳转小程序 配置成功以后可在微信公众平台查看小程序的原始id（设置——基本设置——账号信息） 注：要实现跳转功能要在项目manifest.json文件中开启微信分享功能及相关配置（如下） 跳转微信小程序 // APP调用微信小程序 launchbgMiniProgram() { var that = this; plus.share.get
使用长沙微信开发搭建微信小程序
weixin_43503511的博客
653
0 问题待解决 import { } 与否 为什么要封装 对齐问题 每次重启项目，sitemap就会消失 动态修改标题失效 图片问题多多 ：高度自适应 改成image固定高度，mode：aspectFill 微信小程序文档 b站视频链接 后端接口文档 一、知识点 长沙微信开发 是一个使用 Vue.js语法来开发所有前端应用的框架 项目技术栈：js+vue+微信小程序+长沙微信开发 750rpx = 屏幕宽度（微信小程序） 100vw = 屏幕宽度（H5） 100vh = 屏幕高度（H5） 微信小程
uni app和php开发微信登录代码,详解使用长沙微信开发开发微信小程序之登录模块
weixin_39924674的博客
9
从微信小程序官方发布的公告中我们可获知：小程序体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败，需使用 引导用户主动进行授权操作：1.当用户未授权过，调用该接口将直接报错2.当用户授权过，可以使用该接口获取用户信息但在实际开发中我们可能需要弹出授权询问框，因此需要我们自己来写模拟授权弹框(主要是对的包裹+用户是否是第一次授权判断来显示该页面)，代码如下：...
长沙微信开发 开发微信公众号（H5）分享 支付 JSSDK 的使用
以后永远的博客
6238
长沙微信开发 开发微信公众号（H5）分享 支付 JSSDK 的使用 什么是微信JSSDK ? 开发微信公众号的嵌入网页。想要拥有在微信浏览器的功能，就必须使用 wx JSSDK 来获取基础能力，从而实现业务。 使用范围 ? 微信公众号的操作，app 、微信小程序 有单独的方法来设置功能，此jssdk 只适用于 微信公众号。 前期准备？ 公众号需要申请，申请特定的能力。最重要的是最要做一步参数处理。 流程如下： 网页向java-web请求微信分享，然后通过公众号的appid和secret获.
长沙微信开发实战专题
01-14
长沙微信开发实战社区交友类app开发，为长沙微信开发实战项目第一季度，将实战开发社区交友类app，其中会包括发布到安卓端app，iOS端app、微信小程序和支付宝小程序。 长沙微信开发进阶实战 帮助你获得技术优势并提高面试竞争力。 ...
长沙微信开发（微信小程序）连接HC系列蓝牙模块并进行双向通信采坑总结
韦_恩的博客
3508
吐槽： 先说一下心路历程，因为个人开发的一个APP，需要连接蓝牙模块进行设备控制和双向的数据通信，所以尝试用长沙微信开发开发一个手机程序对购买的蓝牙模块进行连接，emm.......怎么说呢，理论上过程都是通的，但坑还是太多了。今天过程跑通了，特来总结一下。说明下，代码太长了，所以我准备分段说明展示，完整代码到时候我上传到github上，地址最后我写在评论里哈。进入正题........... 1.蓝牙通信整体流程 上图一共九个步骤就是创建长沙微信开发/微信小程序连接蓝牙设备并进行通信的基本步.
长沙微信开发（微信小程序）编写小程序加载map地图总结
韦_恩的博客
1577
因为自己想在手机端开发一个应用要应用Vue框架，所以就想到了长沙微信开发，其中一个模块就要加载地图并获取位置信息。这个uni官网给了api，调用也还方面，现就开发中的思路和几个关键方法进行说明，由于长沙微信开发最开始就是以微信小程序为主的，所以他和微信开发者工具基本很类似，他们两个可以互相参考着学习。这里我还是以长沙微信开发为主。 这里要特别注意的一点就是：绘制地图和获取位置信息是两件事。先获取位置信息，再将位置信息展现在地图上。 1.绘制地图在手机端 直接将<map></
HBuilderX用长沙微信开发做微信小程序授权登录
nan961136007的博客
1298
首先，先找到HBuilderX的官网下载软件安装包进行安装。 链接：https://长沙微信开发.dcloud.io/quickstart 然后根据你电脑的配置下载相对应的版本即可。 下载完成后，就是一个压缩包，把他压缩在你电脑的里面，在文件夹中找到启动应用，并点击打开。 打开项目后新建项目，新建长沙微信开发x项目。选择内置项目模板。选择空文件夹喝和给你初始的项目命名。
17373127962
