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

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

项目中遇到了一些类似于直播需要与原生进行混合开发的时候,前端应该怎么做?

  1. 先引入js文件 unfile.js

下载unifile.js的链接

或者可以复制以下js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
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
  1. 放在 common/unfile.js’

  2. 调用方法,在要使用原生技术的页面进行引入

1
import bridge from '@/common/unfile.js'
  1. 使用
1
2
3
4
5
6
7
8

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

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

注意

  1. 原来是前端打包为apk或者ipa,现在打包为h5手机版让后端上传服务器给ios或者安卓链接,让安卓和ios进行打包

manifest.jsonh5配置中设置 路由模式运行的基础路径 例如: hash /h5/

  1. 如果使用原生会有一些很多方法不能使用例如:前端写的微信登录,拉起相机,扫描二维码等都需要原生来做

  2. 所以说尽量前端能做,不要与原生混合开发