(标签-微信小程序|关键词-web-view)

Question

微信小程序web-view嵌入h5页面，跳转后标题正常显示，点击进入详情后标题不会变？

问题描述

比如，微信小程序用web-view跳转到h5页面，h5页面有以下

• 设备列表，标题为设备列表
• 设备详情，标题为设备详情

现在微信小程序成功跳转到h5的设备列表了，小程序标题显示为“设备列表”。
但是，点击进入设备详情，小程序标题没变，理论上应该显示为设备详情的，该怎么改

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

在微信小程序中，要实现页面跳转时标题的变化，可以在跳转到目标页面前，通过wx.onNavigationBarButtonTap监听导航栏标题的点击事件，然后在事件处理函数中修改当前页面的标题。具体操作如下：

1. 在小程序页面的js文件中，监听导航栏标题的点击事件：

wx.onNavigationBarButtonTap(null, {
  title: '设备详情' // 设置目标页面的标题
});

1. 在跳转到目标页面之前，调用上述事件处理函数：

wx.navigateTo({
  url: '/pages/device-detail/device-detail?id=' + deviceId // 跳转到设备详情页面
});

1. 在目标页面的js文件中，接收传递过来的设备ID，并获取设备详情数据：

Page({
  data: {
    deviceId: '',
    deviceDetail: {}
  },

  onLoad: function (options) {
    this.setData({
      deviceId: options.id
    });
    // 获取设备详情数据的逻辑
  }
});

1. 在目标页面的wxml文件中，展示设备详情数据：

<view>
  <text>设备名称：{{deviceDetail.name}}</text>
  <text>设备状态：{{deviceDetail.status}}</text>
  <!-- 其他设备详情信息 -->
</view>

这样，在跳转到设备详情页面时，小程序的标题就会显示为“设备详情”。