当前位置:首页 > 技术文章 > 正文内容

vue开发微信小程序 - 登录组件(vue单页应用微信登录)

移动端登录功能抽象为通用组件,满足:

  1. 不同移动端应用中一键登录功能复用
  2. 支持多种登录:微信登录、H5、QQ登录

登录组件使用

//引用登录组件
import login from "../components/user/login.vue"
export default {
	components: {
		login,
	},
}
//vue页面中使用
<view>
	<login des="登录后拥有自己的标签" @hasLogged="hasLogged" ref="login"></login>
</view>
//登录组件登录成功后调用当前页面hasLogged方法,将后端user数据传到当前页面
hasLogged(user){
	this.user = user
	console.info("----hasLogged---->",this.user)
},  
//调用登录组件的logout方法
logout(){
			this.$refs.login.logout()
			//重新打开
},

跨平台编程

使用uni-app提供的

<!-- #ifdef MP-WEIXIN -->
			<button type="primary" @click="WXlogin">微信一键登录</button>
<!-- #endif -->

<!-- #ifdef H5 -->
<!-- #endif -->

控制台看到console.info中对象字段为空

控制台看到 exp 对象为空,但exp.time 可以正常取值。

data() {
			return {
				exp: { time:"1",des:"2"},
			};
		},
		mounted() {
		},
		methods: {
			addExperience(){
				console.info(this.exp,this.exp.time)
      }  

微信小程序登录

小程序登录代码逻辑共两步:

  1. 调用 wx.login() 获取 临时登录凭证code ,并回传到开发者服务器。
  2. 调用 auth.code2Session 接口,换取 用户唯一标识 OpenID 、 用户在微信开放平台帐号下的唯一标识UnionID(若当前小程序已绑定到微信开放平台帐号) 和 会话密钥 session_key

之后开发者服务器可以根据用户标识来生成自定义登录状态,用于后续业务逻辑中前后端交互时识别用户身份。

参考:
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html

errno: 600002, errMsg: "request:fail url not in domain list"

vue代码直接请求微信api 域名也提示域名未配置,登录小程序后台页面不能配置,则必须在服务端实现

x509 certificate signed by unknown authority

相关文章

2023 年 10 个最佳 Linux 桌面发行版

Linux 操作系统在桌面领域的发展已经不再被忽视,越来越多的用户正在考虑切换到 Linux 上。在 2023 年,我们可以期待更多的 Linux 桌面发行版的推出和发展。这里列举了 10 个最佳的...

Vue3开发极简入门(14):组件间通信之props、ref&amp;defineExpose

组件间的关系可以分为:父子关系。以前文的代码为例,最典型的就是App.vue与Car.vue这种,APP是父,Car是子。祖孙关系。如果Car再引入一个子组件,这个子组件与App就是祖孙关系。其他。比...

Vue3开发极简入门(16):祖孙组件间通信之provide&amp;inject

前文说了Vue的组件间关系,有父子、爷孙、其他关系。例如之前的Father、Son是父子关系,App与Son就是爷孙关系。而props的Son,与emits的Son,就是其他关系。前文的props是父...

面试官:聊聊你知道的Vue与React的区别

最近面到很多大公司的时候,小编都会碰到一个很尴尬的问题,很多大公司的技术栈都是React,但是小编学的是Vue,其实从本质上来说两者都是比较优秀的前端框架,所以有些面试官会问到Vue和React的区别...

10个实例小练习,快速入门熟练 Vue3 核心新特性(一)

作者:xuying 全栈修炼转发链接:https://mp.weixin.qq.com/s/_n2seDbbiO5hXQfuUGbUCQ前言Vue3.0 发 beta 版都有一段时间了,正式版也不远了...

Vue基础(vue基础组件文件名符合规范的是)

Vue 是什么,它的核心特点有哪些?Vue 是一款渐进式 JavaScript 框架,它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助开发者用...