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

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

zonemu3个月前 (07-13)技术文章42

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

  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

相关文章

vue 3 学习笔记 (八)——provide 和 inject 用法及原理

在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时,就需要传...

使用GitLab实现CICD(gitlab配置cicd)

GitLab CI/CD 是一个内置在GitLab中的工具,用于通过持续方法进行软件开发:Continuous Integration (CI) 持续集成Continuous Delivery (C...

「云原生」Containerd ctr,crictl 和 nerdctl 命令介绍与实战操作

一、概述作为接替Docker运行时的Containerd在早在Kubernetes1.7时就能直接与Kubelet集成使用,只是大部分时候我们因熟悉Docker,在部署集群时采用了默认的dockers...

HTML5最新版本介绍(“html5”)

HTML5是HTML4.01和XHTML1.0之后超文本标记语言的最新版本,由一群自由思想者设计,最终实现了多媒体支持、交互性、更智能的表单和更好的语义标注。 HTML 5不只是 HTML规范的最新...

html5你能把太阳系动态做出来,但是你能把月亮也做出来吗?

需要源码请评论后加前端学习群470593776课题:HTML5加原生js打造一个炫酷动态的太阳系简介:首先对于太阳系各大星球的运转关系,速度等资料,不然弄出来也是被喷的下场, 还有对于逻辑思维,算法的...

web前端是什么,在哪些地方有应用,html和html5区别都在这里了

web前端是什么,在哪些地方有应用简介web前端开发技术什么是html、html5什么是css、css3什么是js,javascriptweb前端的应用大家好,我是ots_luo,很多小伙伴不知道we...