【uniapp项目路由，配置，修改uni ui默认样式，小程序端不生效问题】

Didicode

已于 2023-06-29 11:13:29 修改

阅读量1.5k

点赞数

分类专栏： uniapp 文章标签： uni-app 前端小程序

于 2023-06-22 11:55:44 首次发布

本文链接：https://blog.youkuaiyun.com/m0_45991266/article/details/131292764

版权

文章讲述了在uniapp开发中处理不同平台样式差异的方法，如使用#ifdef指令进行条件编译，以及针对H5、APP-PLUS和MP端的样式配置。还提到了package.json中导航配置的差异处理。另外，文章讨论了button元素样式问题，路由跳转的限制，以及如何修改uniappUI库默认样式。最后，提出了小程序不支持背景图的解决方案。

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

1.对不同平台进行不同配置或样式：

对不同端的css样式不一样
使用
#ifdef
#endif 包裹
（其中MP表示小程序端，表仅在小程序端是那个样式）

// #ifdef APP-PLUS
		margin-top: 88rpx;
		// #endif
		// #ifdef H5
		margin-top: 0;
		// #endif
		// #ifdef MP
		margin-top: 88rpx;
		// #endif

对不同端package.json中导航配置不同
1.使用 #ifdef #endif 包裹

 {
			"path": "pages/mine/addAgent/uploadInfo",
			"style": {
				"navigationBarTitleText": "完善信息",
				//#ifdef H5  
				"titleNView": false,
				//#endif
				"enablePullDownRefresh": false
			}
	}

2.使用自带配置

{
		"path": "",
		"style": {
			"navigationBarTitleText": "",
			"h5": {
				"titleNView": false
			},
			"app-plus":{
			  "titleNView":false
			}

最低0.47元/天解锁文章