将uni-app打包的H5放在 Android程序中在 webview 显示的两种方法_uniapp h5 高德定位 在android webview

前言

之前有个项目要同时做小程序和APP，本着节省时间的想法，研究了下uni-app，但是发现从中打包成APP不太靠谱，所以想着打包成H5，然后在APP里头加载。虽然最终还是分开用原生来实现了，不过这个技术选型还是得记录下来，免得以后遇到同类型项目，又忘了这茬。

Hash

在uni-app项目中，有个配置文件manifest.json，打开它，选择H5配置，修改路由模式为hash，并且将运行基础路径修改成相对路径。

然后选择发行-网站，进行打包，就能在项目根目录的unpackage/dist/build/h5得到打包后的H5文件，这个时候，我们直接双击index.html就能在浏览器中打开。

既然能正常在浏览器中打开，那直接也能在Android的webview中打开了。
举例：我们把h5的整个文件夹，放在Android工程的assets文件夹中，然后在webview中加载file:android_asset/h5/index.html即可。

History

如果基于不可抗力，必须选择History路由模式打包H5，就选择以下方法。

1. 添加依赖

https://github.com/yanzhenjie/AndServer 参考官方说明

2. 将打包出来的h5的整个文件夹，放在Android工程的assets文件夹中
3. 添加配置代码：

@Config
class AppConfig: WebConfig {

    override fun onConfig(context: Context?, delegate: WebConfig.Delegate?) {
        context?: return
        delegate?: return
        delegate.addWebsite(AssetsWebsite(context, "/h5/"))
    }
}

/*
@Controller
class PageController {

    @GetMapping("/")
    fun index(): String =
        "forward:/index.html"
}*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

4. 启动本地服务

val mAndServer = AndServer.webServer(this)
    .port(8089)
    .timeout(10, TimeUnit.SECONDS)
    .listener(object : Server.ServerListener{
        override fun onStarted() {
            println("本地服务器启动")
            // 加载H5
            webview.loadUrl("http://127.0.0.1:8089/index.html")
        }

        override fun onStopped() {
            println("本地服务器停止")
        }

        override fun onException(e: Exception?) {
            e?.printStackTrace()
        }
    })
    .build()

mAndServer.startup()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

完事