如何在Html5中與App進行通訊

這期內容當中小編將會給大家帶來有關如何在Html5中與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 (
            <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打開遮罩層

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

上述就是小編為大家分享的如何在Html5中與App進行通訊了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。