更新记录
1.0.1(2023-11-15)
- 支持主副屏双向通信
- 支持腾讯X5内核浏览器
- 支持本地Html显示
- 支持远程Url显示
平台兼容性
Android | Android CPU类型 | iOS |
---|---|---|
适用版本区间:5.0 - 12.0 | armeabi-v7a:支持,arm64-v8a:支持,x86:支持 | × |
原生插件通用使用流程:
- 购买插件,选择该插件绑定的项目。
- 在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原生插件配置”->”云端插件“列表中删除该插件重新选择
插件功能说明
- 支持主副屏双向通信
- 支持腾讯X5内核浏览器
- 支持本地Html显示
- 支持远程Url显示
插件使用说明:
- 引入方式
const presentation = uni.requireNativePlugin('shimiso-presentation');
- 打开manifest.json文件,找到App模块配置,勾选上Android X5 Webview(腾讯TBS)即可
- 调用show方法打开副屏
presentation.show('http://www.163.com');
- 调用loadUrl方法加载网络地址
presentation.loadUrl('http://www.163.com')//加载网络地址
- 调用loadUrl方法加载本地地址
//格式:file:///android_asset/apps/__UNI__D1A49E0/www/static/test.html presentation.loadUrl('file:///android_asset/apps/__UNI__D1A49E0/www/static/test.html')//加载本地地址
示例代码(主屏)
<template>
<view style="display: flex;margin:10px;flex-direction: column;">
<view style="margin-top: 10px;">
<button @click="showSubScreen()">显示副屏</button>
</view>
<view style="margin-top: 10px;">
<button @click="sendDataToSubScreen()">向副屏发送消息</button>
</view>
<view style="margin-top: 10px;">
<button @click="loadSubScreenUrl()">设置副屏URL</button>
</view>
<view style="margin-top: 10px;">
<button @click="closeSubScreen()">关闭副屏</button>
</view>
<view style="margin-top: 10px;">副屏发来的消息:</view>
<view>{{msg}}</view>
</view>
</template>
<script>
//引入方式
const presentation = uni.requireNativePlugin('shimiso-presentation');
export default {
data() {
return {
msg:''
}
},
created() {
//功能1:接受副屏幕发来的消息
plus.globalEvent.addEventListener('SubScreenEvent', function(e){
modal.toast({
message: "副屏发来的信息:" + JSON.stringify(e),
duration: 1.5
});
});
},
methods: {
//功能2:打开分屏页面
showSubScreen(){
presentation.show('http://www.163.com');
},
//功能3:加载地址
loadSubScreenUrl(){
presentation.loadUrl('http://www.163.com')//加载网络地址
presentation.loadUrl('file:///android_asset/apps/__UNI__D1A49E0/www/static/test.html')//加载本地地址
}
//功能4:关闭分屏页面
closeSubScreen(){
presentation.close();
},
//功能5:向副屏发送消息
sendDataToSubScreen(){
let json={state:"主屏消息",data:'你好!'}
presentation.sendDataToSubScreen(json);
}
}
</script>
示例代码(副屏)
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, user-scale=1">
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<title>副屏示例</title>
</head>
<body>
<video style="width:50%; height: 300px;" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" />
</video>
</br>
<button onclick="sendMsg()">向主屏发送数据</button> <p/>
<div id="content"></div>
</body>
<script type="text/javascript">
// VConsole 默认会挂载到 `window.VConsole` 上
var vConsole = new window.VConsole();
//功能6:向主屏发送消息
function sendMsg(){
Android.sendDataToMainScreen("{'msg':'我来自副屏,哈哈!!'}")
}
//功能7:接受主屏发来的消息
function mainScreenCallBack(data) {
document.getElementById('content') = '这是主屏发送过来消息:' + JSON.stringify(data)
console.log('mainScreenCallBack-->' + JSON.stringify(data));
}
</script>
</html>