uni-app 原生开发APP-优快云博客

本文链接：https://blog.youkuaiyun.com/wml790116/article/details/128547726

本文介绍了在使用uni-app开发小程序过程中遇到的一些问题，如顶部导航状态栏设置、页面跳转、数据绑定、折叠面板高度调整、动态显示与微信小程序兼容性等，并提供了相应的解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义顶部导航

<view>
<uni-nav-bar left-icon="left"  right-icon="paperplane" title="空调列表" :fixed="true" statusBar="true" backgroundColor="#DB4537" color="white" @clickLeft="back" @clickRight="toHome"/>
</view>

上方statusBar="true"需要默认写上，否则丢失了状态栏，那么显示就太靠手机顶部了。

toIndex(){
	uni.reLaunch({
		url: "/pages/index/index"
	})
},

上方点击图标要跳转到主页，必须使用reLanch，不能使用navigateTo，redirectTo

代码显示数字
```
<uni-list-item title="模块数" :rightText="item.modulesCount+''" ></uni-list-item>
```
以上代码如果要显示出，需要在值后面+‘’转成字符串。否则后台会报错。
拍照上传图片功能，这个功能记得在app打包时在manifest.json文件模块配置里面勾选相机和相册功能。否则在拍照时有提示。
使用uni-app开发小程序应用，在折叠面板里面显示列表，并且这个列表进行添加删除显示时，发现不能自动调整高度。经过查询发现折叠面板在小程序下不支持自动调整。需要在代码中手工进行调整。
adjustHeight() {
               // #ifdef MP
               this.$nextTick(() => {
                   this.$refs.collapse.resize()
               })
               // #endif
  },  <uni-collapse accordion ref="collapse"> 两个地方的collapse要对应。
uni-app中动态切换显示隐藏，在浏览器调试没有问题，发布到小程序后发现不起作用。原始代码为v-if="this.baseFormData.IFKQ==0? true:false" 经过查询后发现微信小程序不支持this.相关操作。去掉this后部署发现正常了
在用Hbuilder中开发小程序有个输入框要求显示宽度为65%代码<uni-easyinput style="65%"v-model="baseFormData.JOBNAME" placeholder="请输入岗位" @blur="saveData"></uni-easyinput>，在浏览器中调试没有问题，发布到小程序后发现还是100%，最后在外面增加一层view，然后设置宽度后解决问题。