這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)如何在Html5中與App進(jìn)行通訊，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

站在用戶的角度思考問題，與客戶深入溝通，找到大石橋網(wǎng)站設(shè)計(jì)與大石橋網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名申請、虛擬主機(jī)、企業(yè)郵箱。業(yè)務(wù)覆蓋大石橋地區(qū)。

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

• H5頁面交由前端進(jìn)行開發(fā)，頁面模塊之間分開開發(fā)和維護(hù)，有效減少App的開發(fā)周期

• H5頁面不受限于應(yīng)用商店繁瑣的審核流程和冗長的等待時(shí)間，新增頁面和功能、修復(fù)缺陷都可隨時(shí)部署到線上

• H5頁面在有需要時(shí)才加載，減小App打包后的大小，縮短App在應(yīng)用商店下載的時(shí)間和減少本地占用手機(jī)的空間

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

缺點(diǎn)

• 協(xié)定好H5和App之間的通訊協(xié)議，定義好全局屬性和全局方法在兩者之間如何調(diào)用

• H5頁面接入App Webview中，可能會(huì)出現(xiàn)很多兼容問題，需要前端和客戶端多加注意

• 開發(fā)前需按照需求和交互進(jìn)行頁面劃分，哪些頁面歸前端開發(fā)，哪些頁面歸客戶端開發(fā)

• 頁面出現(xiàn)Bug有時(shí)候很難發(fā)現(xiàn)是在哪個(gè)環(huán)節(jié)出錯(cuò)，需要前端和客戶端共同調(diào)試找出問題所在(可能各抒己見，打架都有份)

通訊方式

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

• 前端通知客戶端：攔截

• 客戶端通知前端：注入

前端通知客戶端

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

import React, { Component } from "react";

export default class App extends Component {
    componentDidMount() {
        location.href = "lsbox://toast?msg=頁面加載完畢"; // 通知App
    }
    render() {
        return (
            
                點(diǎn)它
            
        );
    }
    openMask() {
        location.href = "lsbox://mask?toggle=1"; // 通知App
    }
}

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

• 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ā)出的通知，所以需要對下一個(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直接操作全局方法來控制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})}