uni-app 导航栏背景色编译后JS存在BUG 影响背景色显现 本地运行正常 编译后报错
uni-app 导航栏背景色编译后JS存在BUG 影响背景色显现 本地运行正常 编译后报错
示例代码：
<page-meta>
<navigation-bar background-color="blue"/>
</page-meta>
操作步骤：
编译后出现这问题
预期结果：
尽快修复这个BUG
实际结果：
尽快修复这个BUG
bug描述：
当页面使用
<page-meta>
<navigation-bar background-color="blue"/>
</page-meta>
时，编译成H5，在服务器上网站会不生效，报NavigationBarLoading函数未定义，从而影响后续JS代码执行，导航栏背景色不生效！本地运行到浏览器可以，编译后不行
5 回复
提供下复现工程，或者单页面源码，说明 vue 和 HBuilderX 的版本，说明你的 navigation-bar 是怎么封装的。
如果你在调用 setnavigationbarloading，有可能会被 tree-shaking，改成普通写法，if(show){ showloading}else{hideloading}
mpm-v 10.8.3
Hbuilder 4.29
<template>
<page-meta>
<navigation-bar :background-color="themeColor.color" />
</page-meta>
<view id="apps">
<view class="img_flash">
<image :src=“prefix+‘cad/yuan_zhou_chang.png’” @tap=“previewImage” mode=“widthFix”></image>
</view>
<view class="title">
<text class="t" :class="''+themeColor.name">{{$t('ji.suan.can.shu')}}</text>
<jbkj-bar :calculationType="calculationType" :isShowVideo="isShowVideo" :otherInfo="otherInfo" :isCollect="isCollect" :showParams="showParams" :user="user" rprefix='yali_rongqi'
@collectClick='collectClick' @panelParams='panelParams'></jbkj-bar>
</view>
<view :class="'pub_form'+(locale=='en'?'_e':'')" v-if="showParams">
<view class="form_item">
<view class="checkbox_group">
<radio-group @change="radioChangePokou" class="checkbox_label">
<label class="checkbox">
<radio value="0" :checked="radioIdx == '0'" color="#333"/>{{$t('zhi.ban.jing')}}
</label>
<label class="checkbox">
<radio value="1" :checked="radioIdx == '1'" color="#333"/>{{$t('zhi.zhi.jing')}}
</label>
<label class="checkbox">
<radio value="2" :checked="radioIdx == '2'" color="#333"/>{{$t('zhi.zhou.chang')}}
</label>
</radio-group>
</view>
</view>
<view class="form_item" v-if="item.idx==0">
<text class="star">{{$t('ban.jing')}}</text>
<input type="digit" v-model="item.radius" @confirm="confirm(0)" :focus="focus" :placeholder="$t('qsr')+$t('ban.jing')"
placeholder-class="placeholder">
<view class="unit">
<button @tap="clear(0)"/>
</view>
</view>
<view class="form_item" v-if="item.idx==1">
<text class="star">{{$t('zhi.jing')}}</text>
<input type="digit" v-model="item.diameter" @confirm="confirm(1)" :focus="focus1" :placeholder="$t('qsr')+$t('zhi.jing')"
placeholder-class="placeholder">
<view class="unit">
<button @tap="clear(1)"/>
</view>
</view>
<view class="form_item" v-if="item.idx==2">
<text class="star">{{$t('zhou.chang')}}</text>
<input type="digit" v-model="item.perimeter" @confirm="confirm(1)" :focus="focus1" :placeholder="$t('qsr')+$t('zhou.chang')"
placeholder-class="placeholder">
<view class="unit">
<button @tap="clear(1)"/>
</view>
</view>
<view class="form_item">
<text class="">{{$t('deng.fen.shu')}}</text>
<picker @change="bindPickerChange" :value="equalPartsIdx" :range="equalPartsArr">
<view class="picker">
<view v-if="equalPartsIdx == -1" class="placeholder">{{$t('qing.xuan.ze.deng.fen.shu')}}</view>
<text v-if="equalPartsIdx >= 0" class="selText">{{equalPartsArr[equalPartsIdx]}}</text>
<image src="/static/images/icon_arr.png" mode="widthFix"></image>
</view>
</picker>
</view>
<view class="form_item tip">
{{$t('zhu.yi')}}:
<view class="red">
<text>*</text>{{$t('dai.biao.bi.tian.xuan.xiang')}}
</view>
</view>
</view>
<!-- 计算结果 -->
<view class="title">
<text class="t" :class="''+themeColor.name">{{$t('ji.suan.jie.guo')}}</text>
<view class="icon_list">
<button :class="showResult ? 'arr arr_dn' : 'arr'" @tap="panelTable">
<image src="/static/images/icon_arr.png" mode="widthFix"></image>
</button>
</view>
</view>
<view :class="'pub_form'+(locale=='en'?'_e':'')" v-if="showResult">
<view class="form_item">
<text>{{$t('zhou.chang')}}</text>
<text :class="item.arc ? 'content' : 'placeholder'">{{item.arc ? item.arc : $t('ji.suan.jie.guo')}}</text>
<view class="unit">
<button @tap="clear(1)"/>
</view>
</view>
<view class="form_item">
<text>{{$t('ban.jing')}}</text>
<text :class="item.arc1 ? 'content' : 'placeholder'">{{item.arc1 ? item.arc1 : $t('ji.suan.jie.guo')}}</text>
<view class="unit">
<button @tap="clear(2)"/>
</view>
</view>
<view class="form_item">
<text>{{$t('zhi.jing')}}</text>
<text :class="item.arc2 ? 'content' : 'placeholder'">{{item.arc2 ? item.arc2 : $t('ji.suan.jie.guo')}}</text>
<view class="unit">
<button @tap="clear(3)"/>
</view>
</view>
<view class="form_item" v-for="(it, index) in resultJson" v-bind:key="index">
<text>{{it.x}}</text>
<text :class="it.xval ? 'content' : 'placeholder'">{{it.xval ? it.xval : $t('ji.suan.jie.guo')}}</text>
<view class="unit">
<button @tap="clearPart(index)"/>
</view>
</view>
</view>
<jbkj-video :video="video" v-if="video.videoUrl"></jbkj-video>
<view class="blank"></view>
<!-- 底部btn -->
<jbkj-buttons @compute='compute' @reset='reset' cols="2"></jbkj-buttons>
</view>
</template>
针对你提到的uni-app导航栏背景色在编译后JS存在BUG，影响背景色显现，而本地运行正常的问题，这通常是由于环境差异、代码兼容性问题或者编译配置错误引起的。由于无法直接访问你的项目代码和详细错误信息，我将提供一个常见的解决方案思路和代码示例，帮助你检查和定位问题。
1. 检查pages.json配置
首先，确保你的pages.json中关于导航栏的配置是正确的。以下是一个简单的配置示例：
{
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "App",
"navigationBarBackgroundColor": "#007aff"
},
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"navigationBarBackgroundColor": "#ff0000", // 可以为单个页面设置背景色
"navigationBarTextStyle": "black"
}
}
]
}
2. 动态设置导航栏背景色（JS代码）
如果你需要在JS中动态设置导航栏背景色，可以使用uni-app提供的API。以下是一个示例：
// 在页面的onLoad或onReady生命周期中调用
uni.setNavigationBarColor({
frontColor: '#ffffff', // 前景色，即标题颜色
backgroundColor: '#ff0000', // 背景色
animation: {
duration: 300, // 动画持续时间，单位为ms
timingFunc: 'easeIn' // 动画效果
}
});
3. 检查编译配置
确保你的manifest.json和vue.config.js（如果使用HBuilderX创建的项目可能没有这个文件）中的配置是正确的，特别是关于条件编译的部分。有时候，错误的条件编译指令会导致代码在特定环境下失效。
4. 清理缓存和重新编译
有时候，编译缓存可能导致一些奇怪的问题。尝试清理项目缓存并重新编译：
# 如果你使用的是HBuilderX，可以尝试清理项目并重启IDE
# 如果是使用命令行编译，可以尝试删除dist或output目录后重新编译
5. 查看编译后的代码
使用开发者工具查看编译后的代码，检查是否有明显的错误或者不一致之处。特别是检查与导航栏背景色设置相关的代码是否被正确编译。
由于无法直接访问你的项目，以上建议可能需要根据你的具体情况进行调整。如果问题依旧存在，建议详细检查编译后的控制台输出，查找可能的错误信息，并根据错误信息进一步定位问题。
