参考资料
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
1. 新建项目
执行命令
npm init vite [项目名]
Select a framework 中选择【vue】
Select a variant 中选择【TypeScript】
image.png
2. 引入vant
根目录下执行命令
npm i vant
image.png
打开[main.ts]，引入vant
import Vant from 'vant';
import 'vant/lib/index.css';
…………
// 删除下一行
createApp(App).mount('#app')
// 添加如下代码
const app = createApp(App)
app.use(Vant)
app.mount('#app')
image.png
3. 设置固定宽度
详细的内容说明，参见VUE中设定窗口为固定值。
该步骤仅为便于开发，可以省略。
4. 页面搭建
更改App.vue
<template>
<van-nav-bar
title="dsbridge demo"
:placeholder="true"
:safe-area-inset-top="true"/>
</template>
<script setup lang="ts">
</script>
image.png
