混合开发-JSBridge

1.1 什么是混合开发?

混合开发是一种融合了原生开发和Web开发优势的移动应用开发方式。

具体来说，混合开发通常指的是利用一种框架或平台来创建应用程序，这种程序结合了原生应用的一些功能和特性（比如访问设备的摄像头、相册、GPS、蓝牙等），并且使用Web技术（HTML5、CSS和JavaScript）来编写大部分的应用代码。

1.2 混合开发优势

混合开发在跨平台能力、性能、开发效率、更新、离线运行、业务灵活性等方面都有显著优势，这些优势使混合开发成为许多开发者和企业的首选开发模式。

1. 跨平台能力：混合开发的一个主要优点是可以编写一次代码，然后部署到多个平台（如iOS/Android/HarmonyOS），这大大节省了开发和维护成本。
2. 快速迭代：由于混合应用主要使用Web技术，因此它们可以像网页一样进行快速更新和迭代，无需用户手动更新应用。
3. 用户体验：虽然混合应用在性能上可能不如完全的原生应用，但随着技术的发展，许多混合开发框架已经能够提供接近原生应用的用户体验。
4. 成本效益：对于预算有限的项目或初创公司来说，混合开发是一个成本效益较高的选择，因为它减少了为每个平台单独开发应用的需要。

设置加载进度条

 // 网页是否在加载中
 @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)

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 = 0
    this.loading = true
    console.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.导航下拉菜单-刷新

 @Builder
  MenuBuilder() {
    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 || ''
})