uniapp|uniapp中前端如何和原生混合开发开发app
项目中遇到了一些脸书登录，谷歌地图，推送等。。需要与原生进行混合开发的时候，前端应该怎么做？ 【uniapp|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 = https://www.it610.com/article/a.apply(c, e);
bridge.call("_dsb.returnValue", b)
},
k = function(a, c) {
e.push(function(a, c) {
b.data = https://www.it610.com/article/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.所以说尽量前端能做，不要与原生混合开发
推荐阅读
- 热闹中的孤独
- Shell-Bash变量与运算符
- JS中的各种宽高度定义及其应用
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 深入理解Go之generate
- 异地恋中，逐渐适应一个人到底意味着什么（）
- 我眼中的佛系经纪人
- 《魔法科高中的劣等生》第26卷（Invasion篇）发售
- “成长”读书社群招募
- 2020-04-07vue中Axios的封装和API接口的管理