Vue与原生APP的相互交互

如今好多APP都采用了Hybrid的开发模式，这种模式特别适合那些内容变更更新较大的APP，从而使得开发和平常维护过程变得集中式、更简短、更经济高效，不须要纯原生频繁发布。但有利确定有弊咯，性能方面能稍微差一点，还有就是二者之间的交互问题。美团、爱奇艺、微信等知名移动应用，都是采用Hybrid App开发模式。Hybrid开发已成为将来的一种发展趋势。

一、原生APP与Vue交互

场景：原生的头部标题栏，内容为H5页面。如今须要在原生头部增长一个时间帅选功能，原生筛选好时间后调用H5的查询方法。

mounted () {
  /* 将nativeCallToSearch方法绑定到window下面，提供给外部调用 */
  window.nativeCallToSearch = (res) => {
    this.nativeCallToSearch(res)
  }
}

methods () {
  /**
   * 原生时间筛选
   * @param {string} searchDate 查询的时间
   */
  nativeCallToSearch (searchDate) {
    // do something...
  }
}

二、Vue与原生APP交互

场景：H5页面中涉及分享功能（用H5来作分享坑太多），H5实现具体分享的内容，原生只负责分享操做。

methods () {
  /**
   * 分享微信好友
   */
  goWXFriend () {
    this.$loading.show()
    if (this.androidOrIos === 'android') {
      /* eslint-disable */
      /* 安卓识别不了js对象 */
      javascript: share.shareWX(this.shareObj.link, this.shareObj.linkTitle, this.shareObj.linkContent, this.shareObj.linkImgUrl)
      /* eslint-enable */
      this.$loading.hide()
    } else if (this.androidOrIos === 'ios') {
      /* 将对象转为字符串 */
      window.webkit.messageHandlers.shareWX.postMessage(JSON.stringify(this.shareObj))
      this.$loading.hide()
    }
  }
}