更新记录

0.0.8(2022-10-08)

原生webView,主要用来做URL拦截, 实现app和H5通讯


平台兼容性

Android Android CPU类型 iOS
适用版本区间:5.0 - 12.0 armeabi-v7a:未测试,arm64-v8a:未测试,x86:未测试 适用版本区间:11 - 15

原生插件通用使用流程:

  1. 购买插件,选择该插件绑定的项目。
  2. 在HBuilderX里找到项目,在manifest的app原生插件配置中勾选模块,如需要填写参数则参考插件作者的文档添加。
  3. 根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。
  4. 打包自定义基座,选择插件,得到自定义基座,然后运行时选择自定义基座,进行log输出测试。
  5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项:使用HBuilderX2.7.14以下版本,如果同一插件且同一appid下购买并绑定了多个包名,提交云打包界面提示包名绑定不一致时,需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择


SDWebView

用法

<sd-webview ref="webView" class="web_view" source="{uri: 'http://192.168.50.103:8080/#/loginPhone'}"
            javaScriptEnabled 
            textInteractionEnabled ></sd-webview>

Props

属性名 类型 默认值 说明 差异
source Object
javaScriptEnabled Boolean true 是否开启是否开启
textInteractionEnabled Boolean true 如果为false,则向WebKit表明WKWebView不会与文本互,因此不会显示文本选择循环。仅适用于iOS 14.5或更高版本。 Android不需要
messagingEnabled Boolean false 是否启动交互
@onShouldStartLoadWithRequest EventHandle 允许自定义处理任何web视图请求的函数。从函数中返回true以继续加载请求,返回false以停止加载。在Android上,第一次加载时不会调用。
@onMessage EventHandle 当webview调用window.UniSDWebView.postMessage时调用的函数。设置此属性将把这个全局变量注入到你的webview中。postmessage接受一个参数data,它将在事件对象event. nativeevent .data上可用。Data必须是字符串。

source有效值

说明
uri webView 需要加载的地址

native->H5

H5部分

  • iOS
let dic = {
    type: "put",
};
let dicJson = JSON.stringify(dic);
window.webkit.messageHandlers["UniSDWebView"].postMessagea(dicJson)
  • android
let dic = {
    type: "put",
};
let dicJson = JSON.stringify(dic);
window.UniSDWebView.postMessagea(dicJson)

app 部分

@onMessage="onMessage"

<script>
    methods: {
        onMessage(event) {
            console.log('[onMessage] -----> ', event);
        }
    }
</script>

H5->native

H5

暴露出JS方法

created() {
    window.showToast = (message) => {
      this.showToast(message);
    }
},
methods: {
    showToast(message) {
    Toast.success(message);
    },
}

app

const injectedJS = `
                        this.showToast("这里是测试injectJavaScript");
                      `;
this.$refs.webView.injectJavaScript(injectedJS);

startLoadWithResult

针对onShouldStartLoadWithRequest返回之后进行拦截,在0.25s之内返回 false,可以直接拦截他的请求,超过时间默认通过

this.$refs.webView.startLoadWithResult({
        result: false,
        lockIdentifier: lockIdentifier      /// 从 onShouldStartLoadWithRequest 放回的参数获取
})

injectJavaScript

执行JavaScript字符串。

const injectedJS = `
                          var inputs = document.getElementById('inputPhone');
                          inputs.value = '123123';
                        `;
                      this.$refs.webView.injectJavaScript(injectedJS);

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问