Vue與原生APP的相互交互

wudengzan 發(fā)布于2019-08-23 16:59 / 910人閱讀

摘要：美團(tuán)愛(ài)奇藝微信等知名移動(dòng)應(yīng)用，都是采用開(kāi)發(fā)模式。開(kāi)發(fā)已成為未來(lái)的一種發(fā)展趨勢(shì)。原生與交互場(chǎng)景原生的頭部標(biāo)題欄，內(nèi)容為頁(yè)面。分享微信好友安卓識(shí)別不了對(duì)象將對(duì)象轉(zhuǎn)為字符串

現(xiàn)在好多APP都采用了Hybrid的開(kāi)發(fā)模式，這種模式特別適合那些內(nèi)容變動(dòng)更新較大的APP，從而使得開(kāi)發(fā)和日常維護(hù)過(guò)程變得集中式、更簡(jiǎn)短、更經(jīng)濟(jì)高效，不需要純?cè)l繁發(fā)布。但有利肯定有弊咯，性能方面能稍微差一點(diǎn)，還有就是兩者之間的交互問(wèn)題。美團(tuán)、愛(ài)奇藝、微信等知名移動(dòng)應(yīng)用，都是采用Hybrid App開(kāi)發(fā)模式。Hybrid開(kāi)發(fā)已成為未來(lái)的一種發(fā)展趨勢(shì)。

1、原生APP與Vue交互

場(chǎng)景：原生的頭部標(biāo)題欄，內(nèi)容為H5頁(yè)面。現(xiàn)在需要在原生頭部增加一個(gè)時(shí)間帥選功能，原生篩選好時(shí)間后調(diào)用H5的查詢方法。

mounted () {
  /* 將nativeCallToSearch方法綁定到window下面，提供給外部調(diào)用 */
  window.nativeCallToSearch = (res) => {
    this.nativeCallToSearch(res)
  }
}

methods () {
  /**
   * 原生時(shí)間篩選
   * @param {string} searchDate 查詢的時(shí)間
   */
  nativeCallToSearch (searchDate) {
    // do something...
  }
}

2、Vue與原生APP交互

場(chǎng)景：H5頁(yè)面中涉及分享功能（用H5來(lái)做分享坑太多），H5實(shí)現(xiàn)具體分享的內(nèi)容，原生只負(fù)責(zé)分享操作。

methods () {
  /**
   * 分享微信好友
   */
  goWXFriend () {
    this.$loading.show()
    if (this.androidOrIos === "android") {
      /* eslint-disable */
      /* 安卓識(shí)別不了js對(duì)象 */
      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") {
      /* 將對(duì)象轉(zhuǎn)為字符串 */
      window.webkit.messageHandlers.shareWX.postMessage(JSON.stringify(this.shareObj))
      this.$loading.hide()
    }
  }
}