h5与原生实现分享功能

写一个安卓和ios端与H5的分享交互的功能

ios端给出的效果图

首先在utils文件中建了一个 bridge.js 文件 ，并写入如下代码

function setupWebViewJavascriptBridge (callback) {
    if (window.WebViewJavascriptBridge) {
      return callback(window.WebViewJavascriptBridge)
    }
    if (window.WVJBCallbacks) {
      return window.WVJBCallbacks.push(callback)
    }
    window.WVJBCallbacks = [callback]
    var WVJBIframe = document.createElement('iframe')
    WVJBIframe.style.display = 'none'
    WVJBIframe.src = 'https://__bridge_loaded__'
    document.documentElement.appendChild(WVJBIframe)
    setTimeout(function () {
      document.documentElement.removeChild(WVJBIframe)
    }, 0)
  }
  
  export default {
    callhandler (name, data, callback) {
      setupWebViewJavascriptBridge(function (bridge) {
        bridge.callHandler(name, data, callback)
      })
    },
    registerhandler (name, callback) {
      setupWebViewJavascriptBridge(function (bridge) {
        bridge.registerHandler(name, function (data, responseCallback) {
          callback(data, responseCallback)
        })
      })
    }
  }

其后在main.js中引入全局

// vue与ios通信
import Bridge from './util/bridge.js';
Vue.prototype.$bridge = Bridge

最后在我需要分享的页面
1.先要判断是安卓还是ios

 var u = navigator.userAgent
 var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 // android终端
 var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端

2.完整的分享 已进入页面就使用
注意:在浏览器上的话会报messageHandlers的错误，但是手机上应该不会的

 mounted() {
    var that = this;
    setTimeout(() => {
      var u = navigator.userAgent
      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 // android终端
      var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
      if (isAndroid) { // 调用安卓方法
        that.$bridge.callhandler(
        'shareContent',{
          iconUrl:that.courseCoverImg,    // 分享图
          title:that.courseName,   // 分享的标题
          content:that.courseBrief,   // 分享的内容
          shareLink: window.location.href,    // 分享的地址  效果图给的地址不全，后改为现在的window.location.href
          isNeedShare:true // 判断是否显示
          }
      )
      }
      if (isIOS) { // 调用iOS方法
        window.webkit.messageHandlers.shareContent.postMessage({
           iconUrl:that.courseCoverImg,
          title:that.courseName,
          content:that.courseBrief,
          shareLink: window.location.href,  // 当前页面的地址
          isNeedShare:true
        })
      }
    }, 500);
  }