网站首页 > 教程文章 正文
移动端登录功能抽象为通用组件,满足:
- 不同移动端应用中一键登录功能复用
- 支持多种登录:微信登录、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)
}
微信小程序登录
小程序登录代码逻辑共两步:
- 调用 wx.login() 获取 临时登录凭证code ,并回传到开发者服务器。
- 调用 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
猜你喜欢
- 2025-05-26 源码分享:在pdf上加盖电子签章
- 2025-05-26 ssl 加密证书
- 2025-05-26 Headscale渐入佳境补充篇-自定义中转derper的证书问题
- 2025-05-26 公钥基础设施你了解多少?
- 2025-05-26 k8s 遇到的证书问题
- 2025-05-26 TLS详解
- 2025-05-26 序列化漏洞影响半数以上Android手机
- 2025-05-26 IBM发现Android特权提升漏洞 影响55%设备
- 2025-05-26 记:Nginx 如何配置SSL证书
- 2025-05-26 手把手教学|Nginx 如何配置 HTTPS 服务器
- 最近发表
-
- 一课译词:一刀两断(一刀两断成语解释)
- 核心短语break up用法解析(breakd短语)
- HTML+CSS 实现商品图片列表放大视觉效果 复制完整代码即可马上调用
- 前端实现右键自定义菜单(前端实现右键自定义菜单怎么设置)
- Python中docx与docxcompose批量合并多个Word文档并添加分页符
- Java 将Excel转为XML(java将xls转换成xlsx)
- jq+ajax+bootstrap改了一个动态分页的表格
- css兼容性问题及一些常见问题汇总大全,赶快收藏!
- Java 的业务逻辑验证框架 之-fluent-validator
- 小程序cover-view踩坑系列2(微信小程序overflow)
- 标签列表
-
- location.href (44)
- document.ready (36)
- git checkout -b (34)
- 跃点数 (35)
- 阿里云镜像地址 (33)
- qt qmessagebox (36)
- mybatis plus page (35)
- vue @scroll (38)
- 堆栈区别 (33)
- 什么是容器 (33)
- sha1 md5 (33)
- navicat导出数据 (34)
- 阿里云acp考试 (33)
- 阿里云 nacos (34)
- redhat官网下载镜像 (36)
- srs服务器 (33)
- pico开发者 (33)
- https的端口号 (34)
- vscode更改主题 (35)
- 阿里云资源池 (34)
- os.path.join (33)
- redis aof rdb 区别 (33)
- 302跳转 (33)
- http method (35)
- js array splice (33)