参考资料

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端调用之后，在调试器的日志栏中，会出现如下日志

image.png

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端调用之后，在调试器的日志栏中，会出现日志，之后页面上会出现弹窗。

image.png