web前端实现与原生开发对接（ios android）

清疚 2022-09-09 09:55 161阅读 0赞

最近的项目需要与原生配合开发，今天整理出来  
这里使用了一个封装的方法，简单好用

> 1、将封装好的方法在页面上引用

import bridge from "../../common/unfile.js";

> 2、continueLive 指的是传给原生开发人员的方法名称，id代表需要传的参数joinLiveCallback 原生开发返回来的回调

//continueLive 指的是传给原生开发人员的方法名称，id代表需要传的参数
    //joinLiveCallback 原生开发返回来的回调
    bridge.call('continueLive',id),
    bridge.register('joinLiveCallback', (res)=> { 
    	console.log(res)
    })

> 3、封装好的代码如下 unfile.js

var bridge = { 
    	default: this,
    	call: function(b, a, c) { 
    		var e = "";
    		"function" == typeof a && (c = a, a = { });
    		a = { 
    			data: void 0 === a ? null : a
    		};
    		if ("function" == typeof c) { 
    			var g = "dscb" + window.dscb++;
    			window[g] = c;
    			a._dscbstub = g
    		}
    		a = JSON.stringify(a);
    		if (window._dsbridge) e = _dsbridge.call(b, a);
    		else if (window._dswk || -1 != navigator.userAgent.indexOf("_dsbridge")) e = prompt("_dsbridge=" + b, a);
    		return JSON.parse(e || "{}").data
    	},
    	register: function(b, a, c) { 
    		c = c ? window._dsaf : window._dsf;
    		window._dsInit || (window._dsInit = !0, setTimeout(function() { 
    				bridge.call("_dsb.dsinit")
    			},
    			0));
    		"object" == typeof a ? c._obs[b] = a : c[b] = a
    	},
    	registerAsyn: function(b, a) { 
    		this.register(b, a, !0)
    	},
    	hasNativeMethod: function(b, a) { 
    		return this.call("_dsb.hasNativeMethod", { 
    			name: b,
    			type: a || "all"
    		})
    	},
    	disableJavascriptDialogBlock: function(b) { 
    		this.call("_dsb.disableJavascriptDialogBlock", { 
    			disable: !1 !== b
    		})
    	}
    };
    ! function() { 
    	if (!window._dsf) { 
    		var b = { 
    				_dsf: { 
    					_obs: { }
    				},
    				_dsaf: { 
    					_obs: { }
    				},
    				dscb: 0,
    				dsBridge: bridge,
    				close: function() { 
    					bridge.call("_dsb.closePage")
    				},
    				_handleMessageFromNative: function(a) { 
    					var e = JSON.parse(a.data),
    						b = { 
    							id: a.callbackId,
    							complete: !0
    						},
    						c = this._dsf[a.method],
    						d = this._dsaf[a.method],
    						h = function(a, c) { 
    							b.data = a.apply(c, e);
    							bridge.call("_dsb.returnValue", b)
    						},
    						k = function(a, c) { 
    							e.push(function(a, c) { 
    								b.data = a;
    								b.complete = !1 !== c;
    								bridge.call("_dsb.returnValue", b)
    							});
    							a.apply(c, e)
    						};
    					if (c) h(c, this._dsf);
    					else if (d) k(d, this._dsaf);
    					else if (c = a.method.split("."), !(2 > c.length)) { 
    						a = c.pop();
    						var c = c.join("."),
    							d = this._dsf._obs,
    							d = d[c] || { },
    							f = d[a];
    						f && "function" == typeof f ? h(f, d) : (d = this._dsaf._obs, d = d[c] || { }, (f = d[a]) && "function" == typeof f &&
    							k(f, d))
    					}
    				}
    			},
    			a;
    		for (a in b) window[a] = b[a];
    		bridge.register("_hasJavascriptMethod", function(a, b) { 
    			b = a.split(".");
    			if (2 > b.length) return !(!_dsf[b] && !_dsaf[b]);
    			a = b.pop();
    			b = b.join(".");
    			return (b = _dsf._obs[b] || _dsaf._obs[b]) && !!b[a]
    		})
    	}
    }();
    module.exports = bridge;

发表评论取消回复

表情：

评论列表（有 0 条评论，161人围观）

还没有评论，来说两句吧...

相关阅读

相关 Mybatis对接开发Web应用-----Mybatis框架

> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20

小咪咪/ 2024年03月08日 08:29/ 0 赞/ 105 阅读

相关 web前端开发与iOS终端开发的异同

毕业之前一直在做前端开发，毕业后就转成做iOS开发，这两者有很多挺有意思的对比，尝试写下我能想到的它们的一些相同点和不同点。语言前端和终端作为面向用户端的程序，有个

缺乏、安全感/ 2023年10月17日 08:24/ 0 赞/ 61 阅读

相关 Web前端开发:React.js与web前端是什么关系？

React已迅速成为制作前端应用程序最流行的方式之一，它彻底改变了web应用程序的开发方式。React不是一个MVC框架；而是一个“只查看”的库。React中的前端开发围绕着R

太过爱你忘了你带给我的痛/ 2023年10月01日 16:52/ 0 赞/ 17 阅读

相关 H5与Android和ios原生交互

判断是Android还是ios isIos() { // 判断是否是Ios return /(iPhone|iPad|iPod|iOS|

红太狼/ 2022年12月04日 09:16/ 0 赞/ 266 阅读

相关 ios开发与android开发,iOS与Android开发——我们该如何选择？

【51CTO.com快译】相信很多朋友都有志于进军移动应用开发领域，但却又难以选择合适的切入点。在这方面，大家面临的首要难题自然是具体移动平台的选择。虽然目前的形势非常明确，i

た入场券/ 2022年10月18日 04:57/ 0 赞/ 188 阅读

相关 ios与android指纹识别,iOS开发实现TouchID指纹解锁

一直想实现一下指纹解锁，苦于一直没时间，最近终于闲了下来所以翻了翻文档看了看demo，完成了这篇教程。本功能实现起来是很简单的，因为苹果都已经帮我们封装好了，只需要实现几个方法

淩亂°似流年/ 2022年10月05日 00:45/ 0 赞/ 281 阅读

相关 iOS与Android开发之比较

本文来源于我在InfoQ中文站翻译的文章，原文地址是：[http://www.infoq.com/cn/news/2013/11/ios-vs-android-developm

我就是我/ 2022年09月18日 01:58/ 0 赞/ 247 阅读

相关 Web前端学习之Web设计与Web开发

Web设计和Web开发虽然经常互换使用，但描述了网站创建过程中两个不同但互补的组成部分。了解网页设计和网页开发之间的区别是很有必要的，尤其是如果你打算创建自己的网站。什么是

系统管理员/ 2022年09月17日 05:24/ 0 赞/ 250 阅读

相关 web前端实现与原生开发对接（ios android）

最近的项目需要与原生配合开发，今天整理出来这里使用了一个封装的方法，简单好用 > 1、将封装好的方法在页面上引用 import bridge from "..

清疚/ 2022年09月09日 09:55/ 0 赞/ 162 阅读

相关 Web前端开发与设计

[学习 React.js 比你想象的要简单][React.js] 原文地址：Learning React.js is easier than you think 原文作者

超、凢脫俗/ 2021年09月18日 15:58/ 0 赞/ 525 阅读