参考资料
dsbridge 的地址:https://npmjs.com/package/dsbridge
本项目vue的源码:https://gitee.com/BenjaminSong/dsbridge-demo-vue
本项目使用 vue3 + vite + vant
本项目仅做demo单页面使用。前期暂不考虑兼容低版本浏览器的内核问题。
android端:https://www.jianshu.com/p/86a72c85e0f0
此文章需结合《在Android中使用dsbirdge(4) Android壳上接收js调用》
1. 添加模块
npm i dsbridge
// 介于 npm 经常会报错,所以在 npm 无效的情况下,建议使用 yarn
yarn add dsbridge
// npm与yarn 两个命令二选一,根据个人喜好和个人情况进行选择
2.实际使用,无需回调
import dsBridge from 'dsbridge'
// Android壳中未使用命名空间的情况下
function doJStoAndroid(){
dsBridge.call("showJSLog","这是调用Android壳方法的演示!")
}
// Android壳中使用命名空间的情况下
function doJStoAndroid(){
dsBridge.call("test.showJSLog","这是调用Android壳方法的演示!")
}
js端调用之后,在调试器的日志栏中,会出现如下日志
3.实际使用,需回调
import dsBridge from 'dsbridge'
// Android壳中未使用命名空间的情况下
function doJStoAndroidBack(){
dsBridge.call("jsCallBack","这是调用Android壳回调方法的演示!",(e:any) => {
showDialog({ message: e });
})
}
// Android壳中使用命名空间的情况下
function doJStoAndroidBack(){
dsBridge.call("test.jsCallBack","这是调用Android壳回调方法的演示!",(e:any) => {
showDialog({ message: e });
})
}
具体效果,js端调用之后,在调试器的日志栏中,会出现日志,之后页面上会出现弹窗。