Vue與原生APP的相互交互

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

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

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

1、原生APP與Vue交互

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

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

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

2、Vue與原生APP交互

場景：H5頁面中涉及分享功能（用H5來做分享坑太多），H5實現(xiàn)具體分享的內(nèi)容，原生只負責分享操作。

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

GPU云服務器云服務器 vue里寫原生js php與前端的交互的相互監(jiān)視原生App

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/103618.html

理解vue中的組件（二）

摘要：往往定義組件的構造器后，不需要手動的進行初始化，而是在其他組件的模板中當成標簽來使用，這時候需要調(diào)用注冊成組件。這樣設計的目的是防止從子組件意外改變父級組件的狀態(tài)，從而導致應用的數(shù)據(jù)流向難以理解。上節(jié)說到組件https://segmentfault.com/a/1190000009236700，這一節(jié)繼續(xù)來學習組件：原文博客地址，歡迎學習交流:點擊預覽從github上獲取本文代碼：...

Nino 2019-08-23 12:11 評論0 收藏0
XCel 項目總結 - Electron 與 Vue 的性能優(yōu)化

摘要：而這里的單元格信息是唯一的，所以直接通過為一個空對象賦值即可。和相關的知識和技巧高亮的列單元格采用展示。在中，被選中的單元格會高亮相應的行和列，以提醒用戶。 showImg(https://segmentfault.com/img/bVGkdk?w=900&h=500); XCEL 是一個 Excel 數(shù)據(jù)清洗工具，其通過可視化的方式讓用戶輕松地對 Excel 數(shù)據(jù)進行篩選。 XCEL...

XUI 2019-08-22 10:45 評論0 收藏0
微信小程序mpvue框架總結

摘要：原理架構作為與之間相互通信的橋梁部分在環(huán)境中注入的實現(xiàn)代碼，包含了協(xié)議的拼裝發(fā)送參數(shù)池回調(diào)池等一些基礎功能。部分在客戶端中的功能映射代碼，實現(xiàn)了攔截與解析環(huán)境信息的注入通用功能映射等功能。原理架構 JSBridge 作為native 與 JS 之間相互通信的橋梁JS部分(bridge): 在JS環(huán)境中注入 bridge 的實現(xiàn)代碼，包含了協(xié)議的拼裝/發(fā)送/參數(shù)池/回調(diào)池等一些基礎功能...

microelec 2019-08-23 18:32 評論0 收藏0
指尖前端重構（React）技術調(diào)研分析

摘要：一為什么選擇是當前前端應用最廣泛的框架。目前來看的生態(tài)系統(tǒng)要比大的多，在等最大的技術社區(qū)搜索兩者，的搜索結果是的十倍左右，另外據(jù)近期統(tǒng)計使用的站點是的幾百倍以上。其中是基于技術，依然是瀏覽器應用。一、為什么選擇React React是當前前端應用最廣泛的框架。三大SPA框架 Angular、React、Vue比較。 Angular出現(xiàn)最早，但其在原理上并沒有React創(chuàng)新的性能優(yōu)化...

AlphaWallet 2019-08-23 18:18 評論0 收藏0
vue源碼閱讀之數(shù)據(jù)渲染過程

摘要：圖在中應用三數(shù)據(jù)渲染過程數(shù)據(jù)綁定實現(xiàn)邏輯本節(jié)正式分析從到數(shù)據(jù)渲染到頁面的過程，在中定義了一個的構造函數(shù)。一、概述 vue已是目前國內(nèi)前端web端三分天下之一，也是工作中主要技術棧之一。在日常使用中知其然也好奇著所以然，因此嘗試閱讀vue源碼并進行總結。本文旨在梳理初始化頁面時data中的數(shù)據(jù)是如何渲染到頁面上的。本文將帶著這個疑問一點點追究vue的思路。總體來說vue模版渲染大致流程如圖1所...

AlphaGooo 2019-05-22 16:53 評論0 收藏0