在前端html5中和App的通訊方式情況詳解！

在面對(duì)各種新興技術(shù)的不斷崛起我們對(duì)于之前一些不好的技術(shù)都進(jìn)行了更新和選擇放棄使用，對(duì)于手機(jī)中的各種app更是層出不窮，那么今天我們就來(lái)說(shuō)說(shuō)有關(guān)于“在前端html5中和App的通訊方式情況詳解！”這方面的內(nèi)容分享！

前言

現(xiàn)在不管是桌面客戶端還是移動(dòng)客戶端，都會(huì)夾雜著一部分H5頁(yè)面，這種混合式的應(yīng)用也是我們常說(shuō)的Hybrid App。為什么會(huì)出現(xiàn)Hybrid App呢，早期是因?yàn)殚_(kāi)發(fā)一個(gè)Android或iOS的客戶端，需要的人力成本比較大，開(kāi)發(fā)周期比較長(zhǎng)，后來(lái)有些團(tuán)隊(duì)就通過(guò)將部分頁(yè)面拆分出來(lái)，由前端來(lái)完成，再通過(guò)在客戶端里的Webview來(lái)展示。

由于小編我半路轉(zhuǎn)行當(dāng)程序猿，只對(duì)前端領(lǐng)域有所了解，對(duì)其他編程領(lǐng)域接觸較少，故不探討Webview的實(shí)現(xiàn)原理和與H5頁(yè)面交互的原理。有興趣的小伙伴自行百度搜索JSBridge的相關(guān)知識(shí)，或請(qǐng)教下客戶端(Windows、MacOS、Android、iOS)開(kāi)發(fā)的同學(xué)，看看如何橋接JS與其他編程語(yǔ)言之間的聯(lián)系。

優(yōu)缺點(diǎn)

凡事都是有好有壞，沒(méi)有絕對(duì)的解決方案。下面我總結(jié)下Hybrid App在開(kāi)發(fā)過(guò)程中存在的優(yōu)缺點(diǎn)，各位同學(xué)可自行判斷Hybrid App的好壞。

優(yōu)點(diǎn)

• H5頁(yè)面交由前端進(jìn)行開(kāi)發(fā)，頁(yè)面模塊之間分開(kāi)開(kāi)發(fā)和維護(hù)，有效減少App的開(kāi)發(fā)周期
• H5頁(yè)面不受限于應(yīng)用商店繁瑣的審核流程和冗長(zhǎng)的等待時(shí)間，新增頁(yè)面和功能、修復(fù)缺陷都可隨時(shí)部署到線上
• H5頁(yè)面在有需要時(shí)才加載，減小App打包后的大小，縮短App在應(yīng)用商店下載的時(shí)間和減少本地占用手機(jī)的空間
• H5頁(yè)面接入App Webview中，不再受限于瀏覽器，可通過(guò)與App交互調(diào)用設(shè)備更多底層的API來(lái)完善更多原本瀏覽器無(wú)法完成的操作

缺點(diǎn)

• 協(xié)定好H5和App之間的通訊協(xié)議，定義好全局屬性和全局方法在兩者之間如何調(diào)用
• H5頁(yè)面接入App Webview中，可能會(huì)出現(xiàn)很多兼容問(wèn)題，需要前端和客戶端多加注意
• 開(kāi)發(fā)前需按照需求和交互進(jìn)行頁(yè)面劃分，哪些頁(yè)面歸前端開(kāi)發(fā)，哪些頁(yè)面歸客戶端開(kāi)發(fā)
• 頁(yè)面出現(xiàn)Bug有時(shí)候很難發(fā)現(xiàn)是在哪個(gè)環(huán)節(jié)出錯(cuò)，需要前端和客戶端共同調(diào)試找出問(wèn)題所在(可能各抒己見(jiàn)，打架都有份)

通訊方式

以下代碼全部基于前端(React)進(jìn)行演示，客戶端如何實(shí)現(xiàn)JS交互我就不多說(shuō)了，可以找客戶端開(kāi)發(fā)的同學(xué)了解下。通訊方式有如下兩種，都是使用JS代碼來(lái)完成，兼容性還是挺不錯(cuò)的。

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

前端通知客戶端

在H5頁(yè)面里觸發(fā)鏈接跳轉(zhuǎn)，App Webview檢測(cè)到鏈接跳轉(zhuǎn)再進(jìn)行攔截，因此可以通過(guò)URL上攜帶參數(shù)來(lái)告知App下一步應(yīng)該做些什么。

import React, { Component } from "react";

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

以上執(zhí)行了location.href = "lsbox://mask?toggle=1"來(lái)通知App打開(kāi)遮罩層

• lsbox：前端和客戶端統(tǒng)一定義鏈接跳轉(zhuǎn)的協(xié)議(喜歡怎樣定義協(xié)議都行)
• mask：App需要執(zhí)行的動(dòng)作(喜歡怎樣定義動(dòng)作都行)
• toggle=1：動(dòng)作執(zhí)行參數(shù)(自定義參數(shù)，用于告知App怎樣做)

如果同步觸發(fā)兩個(gè)或以上的location.href(下一個(gè)location.href接著上一個(gè)location.href)，App可能只會(huì)接收到一個(gè)location.href發(fā)出的通知，所以需要對(duì)下一個(gè)location.href使用setTimeout設(shè)置通知時(shí)間間隔(可使用Async/Await封裝優(yōu)化)：

location.href = "lsbox://toast?msg=one";
setTimeout(() => {
    location.href = "lsbox://toast?msg=two";
    setTimeout(() => {
        location.href = "lsbox://toast?msg=three";
    }, 100);
}, 100);

客戶端通知前端

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

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

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

結(jié)語(yǔ)

寫(xiě)到最后總結(jié)得差不多了，后續(xù)如果我想起還有哪些H5與App的通訊方式遺漏的，會(huì)繼續(xù)在這篇文章上補(bǔ)全，同時(shí)也希望各位朋友對(duì)文章里的要點(diǎn)進(jìn)行補(bǔ)充或者提出自己的見(jiàn)解。

那么到這邊我們的“在前端html5中和App的通訊方式情況詳解！”這個(gè)方面相關(guān)內(nèi)容的分享就到這邊了，希望對(duì)大家的學(xué)習(xí)有所幫助，有喜歡的小伙伴也可以在W3Cschool進(jìn)行學(xué)習(xí)和了解相關(guān)知識(shí)。