app怎么内嵌h5网页 app与内嵌h5网页(vue)交互传值

最新推荐文章于 2024-08-06 09:51:20 发布

nanaMonsoon

最新推荐文章于 2024-08-06 09:51:20 发布

阅读量1.3w

点赞数 9

文章标签： vue js webview android ios

本文链接：https://blog.csdn.net/weixin_45282357/article/details/109673919

版权

公司项目要app内嵌我们前端的h5网页，故记录一些于此

app怎么内嵌h5网页

一、将前端项目提交部署至公司域名和网址

vue项目则打包后提交部署，可自己部署，也可后端帮忙部署，也可运营部署，看公司权限

二、app链上项目地址链接

app原生开发小伙伴链上你的项目地址链接即可（让他们链去）

三、开发阶段调试可以链上本机电脑的地址

html项目本机电脑地址可以使用http-server

1.安装

npm i -g http-server

2.运行

在要成为服务器的目录下运行如下命令

http-server

若要禁用缓存，请使用如下命令运行

http-server -c-1

运行后在浏览器输入或者http://127.0.0.1:8080就可以打开目录啦

在app中链入本机地址，自己项目配置vconsole移动端调试工具，即可让app小伙伴打包，然后自己调试啦。

此处说一个大bug ---- ios可以显示出视图，但是安卓一片空白。

前端页面布局使用的是position：absolute，所以给最外层容器使用了height:100%。在ios上没有问题，但是安卓看不到画面。

解决方案：

一、可以改变自己的页面布局（工程太大，影响其他布局）

二、猜测是因为app内的webview一开始没有高度，所以父容器撑不开，100%也是没有高度，遂问安卓开发小伙伴，tmd果然，他们webview是有属性设置刚生成的webview的高度的，叫什么match-xxxx？反正就是铺满webview高度的意思。改成这个就好了

app与内嵌h5网页(vue)交互（相互调用js）&&传值

说实话对于小白来说还是有困难的，毕竟网上方法那么多。

如何传值?

例如：内嵌的h5发请求也token参数，怎么拿到token？

方法一：拼接法。最简单的，app链入h5地址时在后面拼接上所需的参数（token)，可行但不够安全。

方法二：暴露法。也比较简单，就是ios开发和安卓开发将所需的值暴露在window，我们直接window.xxx既可以拿到。

安卓开发那边要配置的请小伙伴自己百度一哈

ios配置可以参考https://www.jianshu.com/p/034d94286f51

前端写法

方法三：使用的是WebViewJavascriptBridge，转载参考https://blog.csdn.net/weixin_44696379/article/details/103327042

H5与原生app交互，需要WebViewJavascriptBridge，废话不多直接上代码，下面是项目中的封装bridge.js的全部代码（示例代码为vue）

//iOS 交互声明
function connectWebViewJavascriptBridgeIOS(callback) {
  if (window.WebViewJavascriptBridge) {
    return callback(window.WebViewJavascriptBridge)
  }
  if (window.WVJBCallbacks) {
    return window.WVJBCallbacks.push(callback)
  }
  window.WVJBCallbacks = [callback]
  let WVJBIframe = document.createElement('iframe')
  WVJBIframe.style.display = 'none'
  WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__'
  document.documentElement.appendChild(WVJBIframe)
  setTimeout(() => {
    document.documentElement.removeChild(WVJBIframe)
  }, 0)
}


//Android 交互声明
function connectWebViewJavascriptBridgeANDROID(callback) {
  if (window.WebViewJavascriptBridge) {
    callback(WebViewJavascriptBridge);
  } else {
    document.addEventListener(
      "WebViewJavascriptBridgeReady",
      function () {
        callback(WebViewJavascriptBridge);
      },
      false
    );
  }
}

export default {
  //H5调用Native
  callhandler(name, data, callback) {
    //iOS的方法
    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
      connectWebViewJavascriptBridgeIOS(function (bridge) {
        bridge.callHandler(name, data, callback)
      })
    }
    //Android方法
    if (/(Android)/i.test(navigator.userAgent)) {
      connectWebViewJavascriptBridgeANDROID(function (bridge) {
        bridge.callHandler(name, data, callback)
      })
    }
  },
  //Native调用H5
  registerhandler(name, callback) {
    //iOS的方法
    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
      connectWebViewJavascriptBridgeIOS(function (bridge) {
        bridge.registerHandler(name, function (data, responseCallback) {
          callback(data, responseCallback)
        })
      })
    }
    //Android方法
    if (/(Android)/i.test(navigator.userAgent)) {
      connectWebViewJavascriptBridgeANDROID(function (bridge) {
        bridge.init(function (message, responseCallback) {
          if (responseCallback) {
            // responseCallback(data);
          }
        });
        bridge.registerHandler(name, function (data, responseCallback) {
          callback(data, responseCallback)
        })
      })
    }

  },

}

然后挂载到vue的原型方法上，在main.js中进行如下配置

import Bridge from "@/config/bridge.js" //此路径根据实际bridge.js路径填写
Vue.prototype.$bridge = Bridge

完事儿，下面看一下在实际使用中的用法啊

methods: {
	// h5调用原生方法，testWebViewBridge为原生app定义的方法名。action为h5传递给原生app的参数，可以为多个。data为原生app传递给h5参数
    goNative() {
      const vm = this;
      this.$bridge.callhandler(
        "testWebViewBridge",
        { action: "pick me" },
        data => {
          vm.ddd = data;

          // 处理返回数据
        }
      );
    },
    // h5注册方法，供app调用
    iosToH5(){
	  
	},
  },

  mounted() {
    // 原生app调用h5方法，iosToH5是methods中定义的方法名。
    const vm = this;
    this.$bridge.registerhandler("iosToH5", (data, responseCallback) => {
      // data是原生app传递给h5的参数
      vm.native_data = data;
    });
  }

传参如图