vue 之 h5操作原生app 实现导航栏的隐藏返回原生app

最新推荐文章于 2024-11-07 15:08:31 发布

小小liang

最新推荐文章于 2024-11-07 15:08:31 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/weixin_47409897/article/details/110391388

版权

本文介绍了如何通过JavaScript在H5中实现与原生App的交互，包括在index.html中引入特定的.js文件来隐藏导航栏，以及监听事件在用户点击时返回原生App的操作。通过kkk对象调用原生接口，实现了页面的动态控制与通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载于：链接: link.

h5操作原生app 实现导航栏的隐藏

方式2：直接在 public 中的 index.html文件之中引入ios 安卓的.js 然后这边添加事件
kkk_android.js kkk_ios.js
注意点：需要在body前面加载，

<script src="./js/kkk_android.js"></script>
<script src="./js/kkk_ios.js"></script>
<script type="text/javascript">
	document.addEventListener("XXX", () => { // XXX 是原生app内部定义的 一般来说 是设备准备就绪的时候调用
		kkk.exec( // kkk 为 android ios 这两个操作原生的引入对象 
			(res) => {
				console.log(res);
			},
			(err) => {
				console.log(err);
			},
			"MideaCommon",
			"hideNav",//调用 隐藏的导航栏的接口
			[0]
		);
	})
</script>

h5返回原生app

点击销毁当前轻应用，返回原生app

	<div class="logo" ref="backT"></div>
	
    this.$refs.backT.addEventListener("click", () => {
      kkk.exec(
        function (success) {
          console.log(success);
        },
        function (error) {
          console.log(error);
        },
        "MideaCommon",
        "exit",
        []
      );
    });