[移动开发]记录工作中h5与原生App通讯的方式

在使用vue开发的h5网页嵌套app中，与原生app要怎么进行通讯呢？本文记录一下开发中的小技巧。

/**

?*?H5与原生通信（不需要引入第三方库）

?*?@param?fnName?方法名称（原生与H5中需要一致）?getParameters?|?logOut

?*?@param?callback?获取的数据回调

?*/

export?const?sendNativeMessage?=?(fnName,?callback)?=>?{

? //?获取系统信息，ios还是安卓

??const?u?=?navigator.userAgent;

??const?isIos?=?!!u.match(/\(i[^;]+;(?U;)??CPU.+Mac?OS?X/);?//ios终端

??const?isAndroid?=?u.indexOf('Android')?>?-1?||?u.indexOf('Linux')?>?-1;

??if?(isIos)?{

????const?iOSCallback?=?`iOSCallback${new?Date().valueOf()}`;

????if?(fnName?===?'getParameters')?{

????????window[iOSCallback]?=?(resString?=?'')?=>?{

????????????callback?&&?callback(JSON.parse(decodeURIComponent(resString)));

????????????delete?window.iOSCallback;

????????};

????}

????const?data?=?{

??????callback:?iOSCallback

????};

????//?IOS环境使用方法

????window.webkit?&&

????????window.webkit.messageHandlers?&&

????????window.webkit.messageHandlers[fnName]?&&

????????window.webkit.messageHandlers[fnName].postMessage(encodeURIComponent(JSON.stringify(data)));

??}

??if?(isAndroid)?{

????//?安卓使用方法

????let?resString?=?window.bigMemberApp?&&?window.bigMemberApp[fnName]?&&?window.bigMemberApp[fnName]();

????callback?&&?callback(JSON.parse(resString));

??}

};

调用方式

?sendNativeMessage('getParameters',?res?=>?{

// 需要获取的字段名称

const?params?=

?["authorization",?"propertyProjectId",?"propertyProjectName",?"account",?"accountID"]?;

??????params.forEach(item?=>?{

????????setStorerage(item?,?res[item])

??????})

????});

小伙伴们如果有更好的方式欢迎留言互相交流！！！！