Vue与原生APP的互相交互

2019年9月1日 238次阅读 来源: darkerXi

如今很多APP都采纳了Hybrid的开辟形式，这类形式迥殊合适那些内容更改更新较大的APP，从而使得开辟和一样平常保护历程变得集中式、更简短、更经济高效，不需要纯原生频仍宣布。但有益一定有弊咯，机能方面能轻微差一点，另有就是两者之间的交互题目。美团、爱奇艺、微信等着名挪动运用，都是采纳Hybrid App开辟形式。Hybrid开辟已成为将来的一种发展趋势。

1、原生APP与Vue交互

场景：原生的头部标题栏，内容为H5页面。如今需要在原生头部增添一个时候帅选功用，原生挑选好时候后挪用H5的查询要领。

mounted () {
  /* 将nativeCallToSearch要领绑定到window下面，提供给外部挪用 */
  window.nativeCallToSearch = (res) => {
    this.nativeCallToSearch(res)
  }
}
methods () {
  /**
   * 原生时候挑选
   * @param {string} searchDate 查询的时候
   */
  nativeCallToSearch (searchDate) {
    // do something...
  }
}

2、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()
    }
  }
}
    原文作者：darkerXi
    原文地址: https://segmentfault.com/a/1190000018901219
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞