1.1 什么是混合开发?
混合开发是一种融合了原生开发和Web开发优势的移动应用开发方式。
具体来说，混合开发通常指的是利用一种框架或平台来创建应用程序，这种程序结合了原生应用的一些功能和特性（比如访问设备的摄像头、相册、GPS、蓝牙等），并且使用Web技术（HTML5、CSS和JavaScript）来编写大部分的应用代码。
1.2 混合开发优势
混合开发在跨平台能力、性能、开发效率、更新、离线运行、业务灵活性等方面都有显著优势，这些优势使混合开发成为许多开发者和企业的首选开发模式。
- 跨平台能力：混合开发的一个主要优点是可以编写一次代码，然后部署到多个平台（如iOS/Android/HarmonyOS），这大大节省了开发和维护成本。
- 快速迭代：由于混合应用主要使用Web技术，因此它们可以像网页一样进行快速更新和迭代，无需用户手动更新应用。
- 用户体验：虽然混合应用在性能上可能不如完全的原生应用，但随着技术的发展，许多混合开发框架已经能够提供接近原生应用的用户体验。
- 成本效益：对于预算有限的项目或初创公司来说，混合开发是一个成本效益较高的选择，因为它减少了为每个平台单独开发应用的需要。
设置加载进度条
// 网页是否在加载中@State loading: boolean = true// 网页加载的进度@State progress: number = 0// ....// 堆叠组件Stack({ alignContent: Alignment.Top }){// 如果加载中, 则显示进度条插件if (this.loading) {Progress({ type: ProgressType.Linear, value: this.progress, total: 100 }).style({ strokeWidth: 2, enableSmoothEffect: true }).color($r('app.color.red')).zIndex(1)}}.width('100%').layoutWeight(1)设置Web组件加载网页
src: ResourceStr = 'https://m.suning.com' // 加载的页面地址
// ...
// 网页加载的进度
@State progress: number = 0
// 页面视图控制器
controller = new webview.WebviewController()// ...// 堆叠组件
Stack({ alignContent: Alignment.Top }){// 如果加载中, 则显示进度条插件if (this.loading) {Progress({ type: ProgressType.Linear, value: this.progress, total: 100 }).style({ strokeWidth: 2, enableSmoothEffect: true }).color($r('app.color.red')).zIndex(1)}// web组件: 用于加载在线网页Web({ src: this.src, controller: this.controller })
}
.width('100%')
.layoutWeight(1)-
设置进度条 显示/隐藏 和 加载进度
onPageBegin: 开始加载网页时触发
onPageEnd: 网页加载完成时触发
onProgressChange: 网页加载进度变化时触发该回调
// web组件: 用于加载在线网页
Web({ src: this.src, controller: this.controller })// 网页加载进度变化时触发该回调.onProgressChange((data) => { // 1. 进度条console.log('mk-logger', JSON.stringify(data)) // 新的加载进度，取值范围为0到100的整数if (data) {// 1.1 记录加载进度this.progress = data.newProgress// 1.2 如果加载进度完成if (data.newProgress === 100) {// 1.3 动画让进度条消失animateTo({ duration: 300, delay: 300 }, () => {this.loading = false})}}})// 开始加载网页时触发.onPageBegin(() => { this.progress = 0this.loading = trueconsole.log('mk-logger', 'onPageBegin')})// 网页加载完成时触发.onPageEnd(() => { console.log('mk-logger', 'onPageEnd')})导航栏相关操作处理
1.导航左侧处理
返回处理（最左边返回按钮）: 在webview中, 如果当前网站页面之前有页面则控制器内返回上一个网页的页面, 如果没有则原生侧路由返回
关闭处理（左边第二个x号按钮）: 原生侧路由返回,直接回到App的上一个页面
// ...
// 加载网页页面完成时触发该回调，用于应用更新其访问的历史链接
.onRefreshAccessedHistory(() => { const history = this.controller.getBackForwardEntries() // 获取当前Webview的历史信息列表this.historyCurrIndex = history.currentIndex // 当前在页面历史列表中的索引this.historySize = history.size // 历史列表中索引的数量，最多保存50条，超过时起始记录会被覆盖// AlertDialog.show({message: this.historyCurrIndex + '-' + this.historySize })}) webBack() {// 如果在web容器中, 当前页面之前还有页面, 则容器内返回上一页if (this.historyCurrIndex > 0) {this.controller.backward()} else {router.back()}}webClose() {router.back()}2.导航下拉菜单-刷新
@BuilderMenuBuilder() {Menu() {MenuItem({ content: '首页' }).onClick(() => router.back({ url: 'pages/Index', params: { index: 0 } }))MenuItem({ content: '分类' }).onClick(() => router.back({ url: 'pages/Index', params: { index: 1 } }))MenuItem({ content: '购物袋' }).onClick(() => router.back({ url: 'pages/Index', params: { index: 2 } }))MenuItem({ content: '我的' }).onClick(() => router.back({ url: 'pages/Index', params: { index: 3 } }))MenuItem({ content: '刷新一下' })//利用Webview控制器的refresh方法刷新页面.onClick(() => this.controller.refresh())}.width(100).fontColor($r('app.color.text')).font({ size: 14 }).radius(4)}3.导航条标题设置
// 网页document标题更改时触发该回调
.onTitleReceive((data) => { console.log('mk-logger', 'onTitleReceive')this.title = data?.title || ''
})
