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()
    }
  }
}