参考资料
dsbridge-android 的github的地址: https://github.com/wendux/DSBridge-Android
本项目android的源码:https://gitee.com/BenjaminSong/dsbridge-demo-android
编辑工具: Android Studio
vue端:https://www.jianshu.com/p/40716a69194d
1. 具体方式。
dsbirdge使用较多的页面显示一般是两种页面。
通过url地址直接访问
这种方式就类似于打开手机浏览器,通过浏览器打开相应的网页,与浏览器打开网页方式不同的是,它可以通过相应的通信方式直接调用Android上才能操作的内容,不会过多的受限于浏览器的限制。比如消息推送、获取详细的经纬度、操作蓝牙之类的操作。
而从加载速度的角度来看,这种方式有好有坏。这种方式是在打开APP时是需要先通过网络去下载显示的所需的文件,下载完成后才能限制前端页面,如果文件较大或者网络较慢,此方式则会导致页面加载速度过慢,而且还需要有一个专门的服务器发布前端项目。但此方式的优势是更新方便,对于无需更新APP壳的新版本只需更换服务器上的版本就等同于更新整个APP了,不需要对APP重新打包发版。
通过本地文件的形式
此方法是将相关的前端文件打包的内容直接放置于APP内部,在访问时直接使用相应的文件。
这样的方式对于加载速度而言,APP打开时就直接从本地直接加载了相应的前端文件,无需网络配置,不受网络影响,可以很快的先加载出页面,在通过相应的API去请求数据,也适用于无网、弱网、局域网等状态。但缺点也很明显,由于页面是打包在APP中,所以需要更新的话,只能重新打包发版,对于频繁更新的情况下不太适用或者比较麻烦。
2. 具体实现。
通过url地址直接访问
通过这种方式仅需更改MainActivity.vue 中 dWebView.loadUrl(“");引号中的链接。直接配置成需要访问的链接即可。
由于较高版本的Android中对于这种访问方式进行限制https访问,如果没有https的链接,仅有http地址,则需要在 AndroidManifest.xml 中的 application 配置 android:usesCleartextTraffic="true"
通过本地文件的形式
首先先对相关的项目进行打包,由于本项目中用的是vue3 + vite,其中打包的文件不支持通过通过文件的方式进行访问,需要重新进行配置,具体配置,详见另一篇文章《vite+vue3 打包后如何直接打开index.html文件》。
得到打包文件之后,先在 main 文件夹下新建一个 assets 文件夹,将打包完的文件放置于这个文件夹里。
之后编辑 MainActivity.java,将其中的 dWebView.loadUrl(“");改为dWebView.loadUrl("file:///android_asset/index.html");