记autojs中webview的使用[B君笔记][博客]

noscript{position: fixed}记autojs中webview的使用autojswebviewjsbridge创建时间：2021-07-30 15:18:30

场景

点击webview中按钮启动脚本

webview 调用主程序运行脚本方法

脚本异常退出更新界面信息

主程序中调用webview内更新界面信息方法

交互原理

使用WebViewClient接口，注入js和拦截页面跳转实现交互

webview 调用主程序内部方法

通过onPageFinished方法，在页面加载完成后，通过evaluateJavascript向其注入js
通过shouldOverrideUrlLoading方法拦截链接，解析jsbridge，把命令映射到bridgeHandler中做处理
页面中调用jsbridge.invoke 触发 bridgeHandler内方法完成调用

主程序中调用webview内方法

页面中声明全局函数
主程序通过evaluateJavascript或loadUrl调用javascript:页面方法

源码解读

webview中调用主程序内部接口

注入jsbridge代码
将jsbridge.ts代码注入页面。
暴漏接口window.Android.invoke和window.Android.callback
1. window.Android.invoke
  webview 中请求调用安卓端接口
2. window.Android.callback
  安卓端在webview中的回调

//精简代码示例
window.Android = {
  let callback_t 
  return {
	invoke: function(cmd, params, callback){
		//声明回调返回 用于处理返回数据
		callback_t = callback
		// 拼接jsbridge，并通过url跳转触发
		jsBridgeFrame.src = `jsbridge://${cmd}/${callId}/${encodeURI(paramsStr)}`;
	},
	callback: function(data){
		//处理回调数据
		callback_t(data)
	}
};
}

建立bridgeHandler方法映射

module.exports = {
    handle: handle,
    // 注册被调用方法，名称命名： cmd
    toast: function(params){
	toast(params.msg);
    	return {msg: 'toast提示成功'};
    }
}

/**
 * 命令调度入口
 * @param {命令} cmd
 * @param {参数} params
 */
function handle(cmd, params) {
    // console.log('bridgeHandler处理 cmd=%s, params=%s', cmd, JSON.stringify(params));
    // 调度方法命名
    let fun = this[cmd];
    if (!fun) {
        throw new Error("cmd= " + cmd + " 没有定义实现");
    }
    return fun(params);
}

调用接口和运行流程

页面内调用

 window.Android.invoke('toast',{msg:'call by webview js '},()=>{})

jsbrige 拼接

jsbridge://toast/1/encodeURI(JSON.stringify("{msg:'call by webview js '}"))

shouldOverrideUrlLoading 内解析后调用

bridgeHandler.handle('toast',{msg:'call by webview js '})

bridgeHandler内触发

toast('call by webview js ');

主程序调用webview中js

1、暴漏接口

页面内

	//vue 挂载完成时把内部方法暴漏出来
 	mounted(){
        	window.Android_call_webview_js = this.Android_call_webview_js
	}

2、主程序调用

//无回调
webView.evaluateJavascript("javascript:Android_call_webview_js('hi')" ,null)
//有回调
webView.evaluateJavascript("javascript:Android_call_webview_js('hi')" ,new 		
	JavaAdapter(android.webkit.ValueCallback, {
            onReceiveValue: (val) => {
               //处理回调
            }
        }))

项目参考

本文源码

github:Xxx-Bin/autojs-webview-demo

脚本注入和jsbridge

github:710850609/autojs-webView