H5與App的通信方式

做者：JowayYoung
倉庫：Github、CodePen
博客：官網、掘金、思否、知乎
公衆號：IQ前端
特別聲明：原創不易，未經受權不得轉載或抄襲，如需轉載可聯繫筆者受權前端

前言

如今不論是桌面客戶端仍是移動客戶端，都會夾雜着一部分H5頁面，這種混合式的應用也是咱們常說的Hybrid App。爲何會出現Hybrid App呢，早期是由於開發一個Android或iOS的客戶端，須要的人力成本比較大，開發週期比較長，後來有些團隊就經過將部分頁面拆分出來，由前端來完成，再經過在客戶端裏的Webview來展現。react

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

優缺點

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

優勢編程

H5頁面交由前端進行開發，頁面模塊之間分開開發和維護，有效減小App的開發週期
H5頁面不受限於應用商店繁瑣的審覈流程和冗長的等待時間，新增頁面和功能、修復缺陷均可隨時部署到線上
H5頁面在有須要時才加載，減少App打包後的大小，縮短App在應用商店下載的時間和減小本地佔用手機的空間
H5頁面接入App Webview中，再也不受限於瀏覽器，可經過與App交互調用設備更多底層的API來完善更多本來瀏覽器沒法完成的操做

缺點segmentfault

協定好H5和App之間的通信協議，定義好全局屬性和全局方法在二者之間如何調用
H5頁面接入App Webview中，可能會出現不少兼容問題，須要前端和客戶端多加註意
開發前需按照需求和交互進行頁面劃分，哪些頁面歸前端開發，哪些頁面歸客戶端開發
頁面出現Bug有時候很難發現是在哪一個環節出錯，須要前端和客戶端共同調試找出問題所在(可能各抒己見，打架都有份)

通信方式

如下代碼所有基於前端(React)進行演示，客戶端如何實現JS交互我就很少說了，能夠找客戶端開發的同窗瞭解下。通信方式有以下兩種，都是使用JS代碼來完成，兼容性仍是挺不錯的。瀏覽器

前端通知客戶端：攔截
客戶端通知前端：注入

前端通知客戶端markdown

在H5頁面裏觸發連接跳轉，App Webview檢測到連接跳轉再進行攔截，所以能夠經過URL上攜帶參數來告知App下一步應該作些什麼。app

import React, { Component } from "react";

export default class App extends Component {
    componentDidMount() {
        location.href = "lsbox://toast?msg=頁面加載完畢"; // 通知App
    }
    render() {
        return (
            <div className="app"> <button type="button" onClick={this.openMask.bind(this)}>點它</button> </app>
        );
    }
    openMask() {
        location.href = "lsbox://mask?toggle=1"; // 通知App
    }
}
複製代碼

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

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 (
            <div className="app"> <ul>{this.state.list.map(v => <li key={v}>{v}</li>)}</ul> </div>;
        );
    }
    addNum(num) {
        this.setState(prevState => ({
            list: prevState.list.concat(num);
        }));
    }
}
複製代碼

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

結語

❤️關注+點贊+收藏+評論+轉發❤️，原創不易，鼓勵筆者創做更多高質量文章

關注公衆號IQ前端，一個專一於CSS/JS開發技巧的前端公衆號，更多前端小乾貨等着你喔

關注後回覆資料免費領取學習資料
關注後回覆進羣拉你進技術交流羣
歡迎關注IQ前端，更多CSS/JS開發技巧只在公衆號推送