javascript android npm dsBridge —— 让h5调用app原生功能

需求背景：在app项目中需要嵌入h5项目的页面，并且该h5页面需要上传图片的功能。 前期方案：上传组件使用h5的input的方案，但是当我完成，真机操作后，发现坑来了，安卓机无法选择拍照上传图片，并且与原生api的样式不一致，因此使用另一种方案，故有此h5调用app原生上传图片。

安装dsbridge

npm i dsbridge

webBridge模块

app原生开发也需要写上相对应的方法，h5才能使用，如调上传图片api —— startPhotoForResult，原生也需命名一致！

// webBridge.js

/**

* webBridge模块

*/

var dsBridge = require('dsbridge')

var u = navigator.userAgent

var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 // android终端

var that = {}

/**

* 调用app方法

* @param {string} 方法名称

* @param {Function} 回调函数

* @param {object} 附加数据

*/

that.startPhotoForResult = type => {

return new Promise(resolve => {

if (dsBridge.hasNativeMethod('startPhotoForResult', 'all')) {

dsBridge.call('startPhotoForResult', type, res => {

let data = res

if (typeof res === 'string') {

data = JSON.parse(data)

}

resolve(data)

})

} else { // 兼容H5操作

const Tobase64 = fileObj => {

const reader = new FileReader()

reader.readAsDataURL(fileObj)

reader.onload = function(e) {

const base64 = e.target.result.split(';base64,')[1]

resolve({ image: base64 })

}

}

let input = document.createElement('INPUT')

input.type = 'file'

input.addEventListener('change', e => {

Tobase64(e.target.files[0])

})

input.click()

input = null

}

})

}

window.webBridge = that

export default window.webBridge

引入main.js

// main.js

import webBridge from '@/lib/webBridge'

使用

// html

// js

// 点击调用上传

startPhotoForResult({ type }) {

// 调用原生事件

webBridge.startPhotoForResult(type)

.then(data => {

// 返回形式根据原生而定

const img = `data:image/png;base64,${data.image}`

// this.uploadAjax(img) 调用后端接口

})

},

最后效果如下： 有什么问题，可留言沟通交流~~

相关文章

 您阅读本篇文章共花了：