uniapp app 端通过webview引入外部 js ， webview 与 app 通信

背景

用户登录需要接入腾讯的无感验证，在 index.html 文件里引入 js 文件是不生效的。查看官网相关内容，app 引入只支持 webview 的形式，因为他的 js 文件里面会用到浏览器里的变量，因此就算下载到本地引入也无法使用。

当前项目已经使用 uniapp 完成了 h5 的相关内容，包含登录页。所以 app 端只需要用 webview 引入 h5 页面。

如果没有 h5 端，则需要在放在特定目录下进行访问 web-view | uni-app官网 (dcloud.net.cn)

所以最终的方案就是，登录页组件判断当前环境如果是 app 则使用 webview 加载 h5 登录页地址，并且携带参数用于告知是从 app 页跳转过来。

网页可以正常使用引入 js 文件，这里判断没有引入的话创建一个 script 元素进行加载

javascript 复制代码

const script = document.createElement("script")
script.src = xxxxxxxxxx
document.head.appendChild(script)
script.onload = () => {
  xxxxxxxxxxxxx
}

登录成功过后 webview 和 app 通信返回用户信息

主要问题

本地调试

uniapp 修改 h5 代码之后我希望直接把 localhost:8080 的页面放到 webview 的地址里进行调试，但是 app 的页面会报错显示无法访问。

首先怀疑是协议的原因，在打包过后，本地启了nginx 服务，访问 https 仍然有问题。

这个时候怀疑证书，但是上网找了一个 http 的网页，没有安全证书仍然可以访问。

上网搜索发现可以通过ip直接访问，所以怀疑127.0.0.1 这个ip有问题，导致无法访问，修改为本机 ipv4 地址后访问正常了，这个时候可以同时调试了。

vue 复制代码

<!-- #ifdef H5 -->
登录页相关内容
<!-- #endif -->
<!-- #ifdef APP -->
<web-view src="http://ipv4地址:8080/#/login?from=app" @message="handleMessage"></web-view>
<!-- #endif -->

webview 和 app 通信

首先要按照官网写的引入 uni.webview.js 文件来实现通信，这里下载了 1.5.6 的js文件，然后放在本地，在 main.js 文件里进行了导入 https://gitcode.net/dcloud/uni-app/-/raw/dev/dist/uni.webview.1.5.6.js

App 端使用 uni.web-view.js 的最低版为 uni.webview.1.5.4.js

javascript 复制代码

// main.js
// #ifdef H5
import * as uni from './utils/uni.webview.1.5.6'
// #endif

踩坑点：本来引入了 uni.webview.js 文件之后使用 uni.postMessage 方法就可以向 app 传递信息，官网也是这么写的，实际上在 uni.webview.postMessage

登录信息获取之后通过 webview 携带的参数判断是 app 跳转过来的，那么就向 app 发送用户信息。

vue 复制代码

<!-- login.vue -->
// #ifdef H5
  if (this.$route.query?.from === 'app') {
    uni.webView.postMessage({
      data: res.data
    })
    return;
  }
  // h5 正常处理逻辑
  this.callBack(res.data)
  // #endif

app 端接收信息这里 handleMessage 写接收后的逻辑

vue 复制代码

<!-- login.vue-->
<web-view src="http://ipv4地址:8080/#/login?from=app" @message="handleMessage"></web-view>
	methods: {
    handleMessage(info) {
				this.callBack(info.detail.data[0])
		}
  }

这里要注意的是传递的时候的数据是以数组形式接收的。