uniapp中前端如何和原生混合开发开发app

项目中遇到了一些脸书登录,谷歌地图,推送等。。需要与原生进行混合开发的时候,前端应该怎么做?

1.先引入js unfile.js
下载unifile.js的链接
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;

在这里插入图片描述
2.调用方法,在要使用原生技术的页面进行引入

import bridge from '../../common/unfile.js'

3.就可以使用了

//调用的方法名字和回调的方法名字需要与原生相同
bridge.call('调用的方法名字',"传给原生的参数")

bridge.register('回调的方法名字',function(result) {
//原生给返回的数据
}

注意

1.原来是前端打包为apk或者ipa,现在打包为h5手机版让后端上传服务器给ios或者安卓链接,让安卓和ios进行打包
在这里插入图片描述
2.如果使用原生会有一些很多方法不能使用例如:前端写的微信登录,拉起相机,扫描二维码等都需要原生来做
3.所以说尽量前端能做,不要与原生混合开发

  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值