更新记录
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 |
原生插件通用使用流程:
- 购买插件,选择该插件绑定的项目。
- 在HBuilderX里找到项目,在manifest的app原生插件配置中勾选模块,如需要填写参数则参考插件作者的文档添加。
- 根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。
- 打包自定义基座,选择插件,得到自定义基座,然后运行时选择自定义基座,进行log输出测试。
- 开发完毕后正式云打包
付费原生插件目前不支持离线打包。
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);