混合开发 - 综合案例
APP体验
| 平台 | 链接 | 说明 |
|---|---|---|
| 安卓 | 下载 | 安装apk到手机体验 |
| 鸿蒙 | - | 请自行下载示例项目编译 |
| IOS | - | 请自行下载示例项目编译 |
其它鸿蒙和ios需要开发证书需要自行编译
因此无法分发给大家体验，但体验是一致的。
示例下载
混合开发需要app端和web端，两个项目配合才可以。下面是示例项目下载的地址。
一、APP示例项目
可以在仓库下载APP端，需要搭配web应用。
克隆后，使用hbx导入至少要4.86+，然后编译到安卓即可。
x-webview-u组件在代码仓库中uni_modules/x-webview-u需要复制到插件目录内。
二、web示例项目
在app端中x-webview-u中展示的web应用示例
本地调试
混合开发，肯定是要先在本地调试好后，再编译打包发到服务器后再拿链接给app端面浏览展示。 但在开发期间不可能使用服务上的web远程连接，我们肯定需要边开发边调试本地的web内容。
1、准备一个服务器
在你的服务器中安装配置好frps服务器端并配置好端口密钥，如果你是宝塔用户可以在应用中搜索到， 可以直接启用。
2、本地服务器
下载好前面的web应用端后安装好依赖直接npm run dev后会打开web应用页面端口默认是3000
3、配置端口转发
vue应用启动后，需要把内容转发到外网供app端使用，需要配置frpc需要对应你服务器端的frps端口及密钥。 然后再使用远程地址给app中的x-webview-u组件上的属性src用。
例如:https://你的远程服务器ip或者网址:888
这个地址就会直接映射访问你本地的web vue应用了。
这样在app中直接打开就可以调试开发了。你本地保存编译更新，app内也会动态刷新了。
日志捕获
开发期间如果调试查看web中的日志呢？我已经为你准备好了，直接在hbx中查看。
日志的开头前缀为：[Log][tmui4xJssdk][时间],此在源码中可以看到， 请保持不要变，这是对版权的尊重，不可自己修改源码前缀为你的前缀。然后再分发出去。