uniapp 内嵌h5登录页面实现登录

需求：内嵌pc端登录页面，实现uniapp登录

前提：pc端登录页面，登录成功之后会自动重定向到指定的pc端页面并加上鉴权成功的code

// 举例
// www.maomin.com/login    PC端登录页面
// www.maomin.com/loginSuccess?code=XXXX   // 登录成功以后自动跳转

思路：
1、在pc端处理，在uniapp成功登录之后跳转到www.maomin.com/loginSuccessApp?code=xxxx,此时pc端代码如下：

document.addEventListener('UniAppJSBridgeReady', function () {let arr = window.location.href.split('?');let loginParams = arr[1].split('=')let code = loginParams[1] || ''// 登录成功获取code并跳转到app页面uni.reLaunch({url: "/pages/loginSuccess?code=" + code    })
})

存在的问题：

1）PC端需要引入uni.web-view.js

<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

2）PC端页面需要特殊处理

3）后台需要根据是pc端还是app端登录重定向到不同的页面

4）不便于调试，pc端代码修改需要重新部署

2、在uniapp中直接处理（APP项目）

具体思路：既然登录成功以后,会重定向到另一个页面，那么web-view的url发生了改变，可不可以通过监听web-view的url变化获取需要的code？

查询文档发现uniapp关于APP端web-view中在url改变时没有特定的钩子函数

web-view文档

但是可以获取到当前web-view的url，那么是不是可以隔一段时间获取一次？

具体代码如下：

// 获取登录页面的方法，不需要管，返回是一个url   <web-view :src="url"></web-view>
this.getLoginWeb();    if(!this.timeOut){//  启动定时器，每隔500ms获取一次this.timeOut = setInterval(()=>{ // 获取当前页面var currentWebview = this.$scope.$getAppWebview(); //  获取当前的web-viewvar wv = currentWebview.children()[0]    //  获取Webview窗口加载HTML页面的地址let url = wv.getURL();   // 这里是封装了一个方法，获取url后面的参数let code = getUrlKey('code',url); //  如果存在code，说明登录成功if(code){         clearInterval(this.timeOut);this.timeOut = null;console.log(code);}},500)
}

第二种方法以上问题均可解决，减少了APP登录与PC端强依赖关系

App端web-view的扩展文档

uniapp 内嵌h5登录页面实现登录相关推荐

App内嵌H5活动页面携带用户token
此文章仅记录自己在app端做的一个活动所遇到的各种问题, 帮助大家避免入坑. 背景:后端使用framemark动态生成html模板.我写好的以ftl为后缀名结尾的framemark文件给后台,后台打成 ...
微信小程序中嵌套html_微信小程序中使用 web-view 内嵌 H5 时，登录问题的处理方法...
在微信小程序的开发中,经常遇到需要使用内嵌 H5 的需求.在这种需求中比较棘手的问题应该就是登录状态的判断了,小程序中的登录状态怎样与H5中的登录状态保持一致? 一般来说,后端开发同事多数会要求我们 ...
小程序嵌套h5页面_快速小程序开发之微信小程序内嵌 H5
简介:微信小程序中可以直接运行 web 页面,这一新组件 web-view 的产生,可能直接导致小程序数量迎来一波高峰.本篇博文将从业务选型,微信小程序后台配置,使用 web-view 完成登录业务以 ...
UNI-APP在自定义组件中内嵌H5/Html网页，可自定义webview大小，加载不闪屏
问题描述: UNI-APP在自定义组件中内嵌H5/Html网页时,通过内置组件 web-view 实现(如下),发现会自动铺满整个页面,不可控制大小(默认充满屏幕不可控制大小) <web-vie ...
app内嵌h5页面在ios手机端滑动卡顿的解决方法
app内嵌h5页面在ios手机端滑动卡顿的解决方法参考文章: (1)app内嵌h5页面在ios手机端滑动卡顿的解决方法 (2)https://www.cnblogs.com/1rookie/p/11 ...
微信小程序与webview H5交互（内嵌H5跳转原生页面）
在开发中,使用web-view组件内嵌H5页面是非常常见的,但很多人不知道webview内嵌H5如何与原生小程序交互.下面介绍下实现微信小程序与webview H5交互的方法. web-view功能 ...
小程序嵌套h5页面_微信小程序内嵌h5页面
概况使用标签能在小程序中打开外部网页,但是要打开的网页的域名必须跟小程序的业务域名(业务域名可以在小程序的后台管理界面添加)一致,否则在真机上是打不开的.如果开发工具上勾选了'不校验域名',在开发 ...
【Appium】测试时遇到手机内嵌H5页面的切换问题
前言:H5页面简单理解就是在手机内嵌套了一些网页格式的信息,可以让手机的应用看起来更丰富一些. 而当手机内嵌H5页面时,常规的app定位方法就没法使用了,我们需要先切换到H5页面才能进行下一步的定位, ...
iOS端内嵌H5页面点击a标签无反应
问题1: iOS端内嵌H5页面,点击a链接无反应解决: 一般这种问题发生在新窗口打开的情况下,也就是说 target 的值为 _blank 时会发生这个问题,改为 _self即可解决问题.或者iOS ...

uniapp 内嵌h5登录页面实现登录

uniapp 内嵌h5登录页面实现登录相关推荐

最新文章

热门文章