uni-app 鸿蒙版本 app-plus titleNView 无效

发布于 1周前 作者 htzhanglong 来自 Uni-App

uni-app 鸿蒙版本 app-plus titleNView 无效

项目信息 详情
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 win11
HBuilderX类型 正式
HBuilderX版本 4.29
手机系统 HarmonyOS NEXT
手机系统版本 HarmonyOS NEXT Developer Preview
手机厂商 华为
手机机型 华为 Harmony Next
页面类型 vue
vue版本 vue3
打包方式 离线
项目创建方式 HBuilderX

示例代码:

{
"path": "pages/index/search",
"style": {
"app-plus": {
"scrollIndicator": "none",
"bounce": "none",
"titleNView": {
"searchInput": {
"align": "left",
"backgroundColor": "#F7F7F7",
"borderRadius": "4px",
"placeholder": "搜索一下",
"placeholderColor": "#CCCCCC",
"disabled": false
},
"buttons": [{
"color": "#989898",
"colorPressed": "#Fd6801",
"float": "right",
"fontSize": "14px",
"text": "搜索"
}]
}
}
}
// 监听导航输入
onNavigationBarSearchInputChanged(e) {
this.keywords = e.text
if (this.keywords == '') {
this.search_list = []
}
},
onNavigationBarSearchInputConfirmed() {
uni.hideKeyboard();
this.search_history_key(this.keywords)
this.search_lists(this.keywords)
},
//监听搜素点击提交
onNavigationBarButtonTap(e) {
//收起键盘
uni.hideKeyboard();
if (this.keywords == '') {
this.search_list = ''
uni.showToast({
title: '请输入搜索的内容',
icon: "none",
position: "bottom",
duration: 1500
});
return false;
}
if (e.index == 0) {
this.search_history_key(this.keywords)
this.search_lists(this.keywords)
}
},

操作步骤:

// 监听导航输入  
onNavigationBarSearchInputChanged(e) {  
    this.keywords = e.text  
    if (this.keywords == '') {  
        this.search_list = []  
    }  
},  
onNavigationBarSearchInputConfirmed() {  
    uni.hideKeyboard();  
    this.search_history_key(this.keywords)  
    this.search_lists(this.keywords)  
},  
//监听搜素点击提交  
onNavigationBarButtonTap(e) {  
    //收起键盘  
    uni.hideKeyboard();  
    if (this.keywords == '') {  
        this.search_list = ''  
        uni.showToast({  
            title: '请输入搜索的内容',  
            icon: "none",  
            position: "bottom",  
            duration: 1500  
        });  
        return false;  
    }  
    if (e.index == 0) {  
        this.search_history_key(this.keywords)  
        this.search_lists(this.keywords)  
    }  
},

预期结果:

  • 显示输入框

实际结果:

  • 未显示输入框

bug描述:

  • 鸿蒙版本的 app-plus titleNView 无效
  • 安卓机器上面正常,鸿蒙机器上面不可见了。

更多关于uni-app 鸿蒙版本 app-plus titleNView 无效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

安卓APP正常(看附件1) 鸿蒙不显示了(看附件2)


更多关于uni-app 鸿蒙版本 app-plus titleNView 无效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


鸿蒙上,不支持 plus 的相关内容

针对您提到的 uni-app 鸿蒙版本 app-plustitleNView 无效的问题,这里提供一个基础的代码示例和配置说明,帮助您排查和解决这个问题。titleNView 是用于设置页面标题栏的组件,通常在 pages.json 中配置,或者在页面的 <template> 中直接使用。

1. 在 pages.json 中配置 titleNView

首先,确保在 pages.json 中为特定页面配置了 titleNView。例如:

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "app-plus": {
          "titleNView": {
            "autoBackButton": true,
            "buttons": [
              {
                "text": "设置",
                "fontSrc": "/static/fonts/iconfont.ttf#icon-setting",
                "fontSize": "18px"
              }
            ]
          }
        }
      }
    }
  ]
}

2. 在页面的 <template> 中使用 titleNView(不常见,但可用于动态控制)

虽然通常是在 pages.json 中配置,但有时需要在页面中动态控制标题栏,可以通过条件渲染的方式(不过这种情况较少见,且对于鸿蒙版本的支持可能有所不同)。

3. 检查鸿蒙系统特定配置

由于您提到的是鸿蒙版本,需要注意 uni-app 在不同平台上的行为可能有所不同。确保您的 manifest.json 中已经正确配置了鸿蒙平台的相关设置:

{
  "mp-appplus": {
    "distribute": {
      "platforms": [
        "huawei"
      ]
    }
  }
}

4. 确保依赖和版本

  • 确保 uni-app CLI 和 HBuilderX 是最新版本,以支持最新的鸿蒙开发特性。
  • 检查 manifest.jsonpages.json 的格式是否正确,避免因为格式错误导致配置无效。

5. 调试和日志

  • 使用 HBuilderX 的真机调试功能,查看应用在鸿蒙设备上的实际表现。
  • 检查控制台输出,看是否有关于 titleNView 的警告或错误信息。

如果以上步骤仍然无法解决问题,建议查阅最新的 uni-app 官方文档或社区论坛,看是否有其他开发者遇到并解决了类似的问题。鸿蒙平台作为较新的开发目标,可能存在一些特定的兼容性问题或限制。

回到顶部