uniapp app端跳转第三方授权,外部html与app进行通信

原创

已于 2022-02-25 16:05:13 修改 · 4.6k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #uni-app #html

于 2022-02-25 16:04:29 首次发布

本文详细阐述了在使用UniApp开发过程中，如何通过webview处理淘宝登录授权及人脸识别等场景，包括URL编码、webview页面的监听与消息传递，并探讨了`@message`与`@onPostMessage`的区别。

使用uniapp 开发app时,可能会遇见需要获取第三方授权,使用第三方数据的情况,比如获取淘宝登录授权,人脸识别认证等,就需要通过webview跳转第三方页面,完成操作后又需要返回我们的程序内;对于前端来说,怎么监听用户是否操作完成是个问题;

//首先我们会通过接口来获取到后端返回的跳转第三方的数据链接,这里假设链接叫:data.url
//页面跳转url太长,跳转url获取不完整怎么办?
let url = encodeURIComponent(JSON.stringify(data.url))  //将文本字符串编码为一个有效的统一资源标识符
        uni.navigateTo({
   
   
			url: `/pages/home/tbAuthorization/tbAuthorization?url=${
     
     url}` //这里跳转的页面是放webview的页面
			})

//tbAuthorization webview页面
<template>
	<view>
		<web-view :src="url" @message="message"></web-view>
	</view>
</template>
<script>
	export default {
   
   
		data() {
   
   
			return {
   
   
				url: '',
			}
		},
		onLoad(opt) {
   
   
			this