程序员求职经验分享与学习资料整理平台

网站首页 > 文章精选 正文

vue开发微信小程序 - 登录组件

balukai 2025-04-27 12:24:37 文章精选 6 ℃

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

  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

最近发表
标签列表