現在的位置: 首頁 > 移動開發 > 正文

H5與App是如何通訊的

2020年01月14日 移動開發 ⁄ 共 2386字 ⁄ 字號 評論關閉

  現在不管是桌面客戶端還是移動客戶端,都會夾雜著一部分H5頁面,這種混合式的應用也是我們常說的Hybrid App。為什么會出現Hybrid App呢,早期是因為開發一個Android或iOS的客戶端,需要的人力成本比較大,開發周期比較長,后來有些團隊就通過將部分頁面拆分出來,由前端來完成,再通過在客戶端里的Webview來展示。

  由于小編我半路轉行當程序猿,只對前端領域有所了解,對其他編程領域接觸較少,故不探討Webview的實現原理和與H5頁面交互的原理。有興趣的小伙伴自行百度搜索JSBridge的相關知識,或請教下客戶端(Windows、MacOS、Android、iOS)開發的同學,看看如何橋接JS與其他編程語言之間的聯系。

  H5與App優缺點

  凡事都是有好有壞,沒有絕對的解決方案。下面我總結下Hybrid App在開發過程中存在的優缺點,各位同學可自行判斷Hybrid App的好壞。

  優點

  H5頁面交由前端進行開發,頁面模塊之間分開開發和維護,有效減少App的開發周期

  H5頁面不受限于應用商店繁瑣的審核流程和冗長的等待時間,新增頁面和功能、修復缺陷都可隨時部署到線上

  H5頁面在有需要時才加載,減小App打包后的大小,縮短App在應用商店下載的時間和減少本地占用手機的空間

  H5頁面接入App Webview中,不再受限于瀏覽器,可通過與App交互調用設備更多底層的API來完善更多原本瀏覽器無法完成的操作

  缺點

  協定好H5和App之間的通訊協議,定義好全局屬性和全局方法在兩者之間如何調用

  H5頁面接入App Webview中,可能會出現很多兼容問題,需要前端和客戶端多加注意

  開發前需按照需求和交互進行頁面劃分,哪些頁面歸前端開發,哪些頁面歸客戶端開發

  頁面出現Bug有時候很難發現是在哪個環節出錯,需要前端和客戶端共同調試找出問題所在(可能各抒己見,打架都有份)

  通訊方式

  以下代碼全部基于前端(React)進行演示,客戶端如何實現JS交互我就不多說了,可以找客戶端開發的同學了解下。通訊方式有如下兩種,都是使用JS代碼來完成,兼容性還是挺不錯的。

  前端通知客戶端:攔截

  客戶端通知前端:注入

  前端通知客戶端

  在H5頁面里觸發鏈接跳轉,App Webview檢測到鏈接跳轉再進行攔截,因此可以通過URL上攜帶參數來告知App下一步應該做些什么。

  import React, { Component } from "react";

  export default class App extends Component {

  componentDidMount() {

  location.href = "lsbox://toast?msg=頁面加載完畢"; // 通知App

  }

  render() {

  return (

  );

  }

  openMask() {

  location.href = "lsbox://mask?toggle=1"; // 通知App

  }

  }

  以上執行了location.href = "lsbox://mask?toggle=1"來通知App打開遮罩層

  lsbox:前端和客戶端統一定義鏈接跳轉的協議(喜歡怎樣定義協議都行)

  mask:App需要執行的動作(喜歡怎樣定義動作都行)

  toggle=1:動作執行參數(自定義參數,用于告知App怎樣做)

  如果同步觸發兩個或以上的location.href(下一個location.href接著上一個location.href),App可能只會接收到一個location.href發出的通知,所以需要對下一個location.href使用setTimeout設置通知時間間隔(可使用Async/Await封裝優化)

  location.href = "lsbox://toast?msg=one";

  setTimeout(() => {

  location.href = "lsbox://toast?msg=two";

  setTimeout(() => {

  location.href = "lsbox://toast?msg=three";

  }, 100);

  }, 100);

  客戶端通知前端

  注入一些全局方法,App Webview直接操作全局方法來控制H5頁面,使用window.handleFunc = function() {}這樣的形式來定義注入的方法。

  import React, { Component } from "react";

  export default class App extends Component {

  constructor(props) {

  super(props);

  this.state = {

  list: [0, 1, 2, 3, 4]

  };

  }

  componentDidMount() {

  window.addNum = this.addNum.bind(this); // 暴露方法給App

  }

  render() {

  return (

  {this.state.list.map(v =>

  {v}

  )}

  ;

  );

  }

  addNum(num) {

  this.setState(prevState => ({

  list: prevState.list.concat(num);

  }));

  }

  }

  以上在組件加載完成后通過window.addNum = this.addNum.bind(this)將指定方法全局暴露到window上,App Webview可直接操作這些方法來控制H5頁面。

  結語

  寫到最后總結得差不多了,后續如果我想起還有哪些H5與App的通訊方式遺漏的,會繼續在這篇文章上補全,同時也希望各位朋友對文章里的要點進行補充或者提出自己的見解。

抱歉!評論已關閉.

奔驰宝马破解版下载 上证指数股票行情 四人麻将游戏单机版下载 网上棋牌可以玩吗 开奖特马料四不像 上证000001指 棋牌游戏送金? 23选5开奖结果最新查询 股票涨停的规定 澳洲幸运8走势图 最最最简单的捕鸟方法 天才麻将少女真人版在线 规律网 平码 独平一码 微乐麻将吉林长春麻将 网络兼职赚钱平台 怎样看股票的k线图 四川金7乐开奖号结果