Hybrid APP混合开发(H5)

创建一个getRequest.js文件方便多次使用

/***截取code*/
export const  GetRequest = (data) => {var url = data // 获取url中"?"符后的字符串var theRequest = {}if (url.indexOf('?') !== -1) {var str = url.substr(1)var strs = str.split('&')for (var i = 0; i < strs.length; i++) {theRequest[strs[i].split('=')[0]] = (strs[i].split('=')[1])}}return theRequest.code
}
/***判断ios还是安卓*/
export const  browser = () => {var u = navigator.userAgent, app = navigator.appVersion;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //gvar isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端if (isAndroid) {//这个是安卓操作系统return true}if (isIOS) {//这个是ios操作系统return false}
}
/***判断微信浏览器还是外部浏览器*/
export const  isWeiXin = () => {var ua = window.navigator.userAgent.toLowerCase();if(ua.match(/MicroMessenger/i) == 'micromessenger'){return true;}else{return false;}
}/***安卓通信*/// 安卓export const  connectWebViewJavascriptBridge = (callback) => {//web调提供方法给app调用if (window.WebViewJavascriptBridge) {callback(WebViewJavascriptBridge)} else {document.addEventListener('WebViewJavascriptBridgeReady', function() {callback(WebViewJavascriptBridge)},false);}}// ios通信export const  setupWebViewJavascriptBridge = (callback) => {// ios处理if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }window.WVJBCallbacks = [callback];var WVJBIframe = document.createElement('iframe');WVJBIframe.style.display = 'none';WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';document.documentElement.appendChild(WVJBIframe);setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)}

当H5主动和app交互时

//先导入方法
import {connectWebViewJavascriptBridge,setupWebViewJavascriptBridge,browser,isWeiXin,GetRequest
} from '../../commons/getRequest';
//交互,需要用的时候触发方法
//使用回调bridge的callHandler方法
//params为传递过去的数据，IfShare为和app约好的交互key名
share () {let params = {type: 'activity_info_customization'}if (browser()) {connectWebViewJavascriptBridge(bridge => {bridge.callHandler('IfShare', params, data => {})})} else {setupWebViewJavascriptBridge(bridge => {bridge.callHandler('IfShare', params, data => {})})}}

当app主动和H5交互时

//先导入方法
import {connectWebViewJavascriptBridge,setupWebViewJavascriptBridge,browser,isWeiXin,GetRequest
} from '../../commons/getRequest';
//直接执行
//使用回调bridge的registerHandler方法if(browser()){connectWebViewJavascriptBridge(bridge => {// 初始化bridge.init((message, responseCallback) => {var data = {'Javascript Responds': 'Wee!'}responseCallback(data)})bridge.registerHandler("shareMajorSuitTop", data => {this.shareshow2 = !this.shareshow2});})}else{setupWebViewJavascriptBridge(bridge => {bridge.registerHandler('shareMajorSuitTop', data => {this.shareshow2 = !this.shareshow2})})}

app和H5交互如果需要获取回调需init

connectWebViewJavascriptBridge(bridge => {
//需要bridge.initbridge.init((message, responseCallback) => {var data = {'Javascript Responds': 'Wee!'}responseCallback(data)})bridge.callHandler('IfShare', {}, data => {//data就是回调})
})

Hybrid APP混合开发(H5)相关推荐

Hybrid APP 混合开发模式的选择之路（三）
原文出处:http://www.cnblogs.com/dailc/p/5930231.html 现在概念上的APP诞生是在Google推出Android,Apple推出iOS后,从这时候开始,就有了 ...
Hybrid APP混合开发的了解和其他两类app的对比
以前我都是用java做网站的,最近公司需要开发一个app,但是公司又没有Android工程师,所以这个任务就被我们伟大的技术总监分配给我做了,下面我就来解释下目前的app市场行情,由于我们的app只是 ...
Hybrid APP混合开发的一些经验和总结
写在前面: 转载自 --->博客园 KINGPLUS 1.混合开发概述 Hybrid App主要以JS+Native两者相互调用为主,从开发层面实现"一次开发,多处运行"的 ...
Hybrid APP 混合开发模式简介
原文出处:http://www.cnblogs.com/yeahui/p/5026587.html 1.1. APP三种开发模式智能手机之普及不用多说,手机APP渗投到各个行业:电商(淘宝. ...
Hybrid APP 混合开发模式的选择之路（六：JSBridge---Native代码与JS代码的通信桥梁）
原文出处:http://www.cnblogs.com/dailc/p/5931324.html JSBridge是Native代码与JS代码的通信桥梁.目前的一种统一方案是:H5触发url sche ...
Hybrid APP 混合开发经验总结《三》
Hybrid App技术批量制作APP应用与跨平台解决方案隐藏导航章节导航 1. 前言 2. 定位 3. web App优势 4. 无编程开发 5. 我们可以看看设计者的一个编辑界面,基本offic ...
App混合开发-前端小白理解
什么是混合app 混合开发的App(Hybrid App)就是嵌一个轻量级的浏览器,一部分原生的功能改为Html5来开发,这部分功能不仅能够在不容升级的情况下动态更新,而且可以在Android或iOS ...
搭建vue3+cordove的APP混合开发流程
前言目前来说主流的App开发方式有三种:Native App(原生APP开发模式).Hybrid App(混合模式移动应用).Web App(嵌入HTML5移动应用).如果项目针对性能以及计算没有特 ...
谈谈Android App混合开发
推酷文章站点主题公开课活动客户端荐周刊登录谈谈Android App混合开发时间 2015-08-25 20:13:43bxbxbai 原文 http://bxbxbai.gi ...

Hybrid APP混合开发(H5)

Hybrid APP混合开发(H5)相关推荐

最新文章

热门文章