uni-app 项目问题总结

uni-app项目中使用Tailwind CSS

Tailwind CSS 是一个工具集 CSS 框架，助你快速实现定制化的网站设计。

Tailwind CSS 是一个高度可定制的基础层 CSS 框架，它为您提供了构建定制化设计所需的所有构建块，而无需重新覆盖任何内建于框架中的设计风格。

Tailwind CSS官网

使用体验：第一次用到这个工具集css框架，说实话，使用了之后能够大大提高写页面的速度，真的是不很不错的一个工具，推荐使用

uni-app 页面关于状态栏的背景设置

在网上搜索了一下怎么去设置uni-app的状态栏样式，但是找到的都没有什么效果，下面总结一下我所使用的方法（这些方法仅适合用在自定义navbar的情况下）

方式一：使用view元素占位设置颜色

<template>
	<view class="pagebox">
        <!-- 占位 -->
        <view class="zhanwei"></view>
        
        <!-- 引入的navbar -->
		<uni-nav-bar left-icon="back">
			<view class="navbar_center">在线客服QA</view>
			<view slot="left"></view>
			<view slot="right" class="right">问题反馈</view>
		</uni-nav-bar>
    </view>
</template>

<style lang="scss" scoped>
    .zhanwei{
        width:100vw;
        height:var(--status-bar-height);	//这里是状态栏css变量
        background:"#FFFFFF"; // 需要设置的颜色
    }
</style>

方式二：给页面设置背景颜色，并设置padding-top的值

<template>
	<view class="pagebox" :style="{paddingTop:statusBar+ 'px'}">
        <!-- 引入的navbar -->
		<uni-nav-bar left-icon="back">
			<view class="navbar_center">在线客服QA</view>
			<view slot="left"></view>
			<view slot="right" class="right">问题反馈</view>
		</uni-nav-bar>
        <view  class="content" :style="{height:pageHeight+'px'}">
          <!-- :style="{height:pageHeight+'px'}" 设置这个是希望导航栏不滚动 -->
          <!--内容 -->
    	</view>
    </view>
</template>
<script>
	/**
	 * 在线客服
	 * */
	export default {
		data() {
			return {
				value: "",
				select: 1,
				scrollTop: 0,
				scroll: true,
			};
		},

		computed: {
            // 状态栏的高度
			statusBar() {
				// #ifdef APP-PLUS
				const e = uni.getSystemInfoSync();
				return e.statusBarHeight;
				// #endif
				// #ifdef H5
				return 0
				// #endif
			},
			pageHeight() {
				const e = uni.getSystemInfoSync();
				let statusBar = e.statusBarHeight;
				const height = e.screenHeight
				return height - statusBar - 44; // 44为导航栏的高度
			},
		},
	};
</script>
<style lang="scss" scoped>
    .pagebox{
        background:"#FFFFFF"; // 需要设置的颜色
    }
</style>

方式三：状态栏和导航栏有相同的背景，但是页面中没有

这种情况的话就需要给导航栏设置一个padding-top的值，这样就可以设置背景，让背景一致

<template>
	<view class="pagebox" >
        <!-- 自定义的navbar -->
		<view class="my_navbar" :style="{paddingTop:statusBar+ 'px'}">
			<view></view>
            <view class="navbar_center">在线客服QA</view>
			<view class="right">问题反馈</view>
		</view>
        <view  class="content" :style="{height:pageHeight+'px'}">
          <!-- :style="{height:pageHeight+'px'}" 设置这个是希望导航栏不滚动 -->
          <!--内容 -->
    	</view>
    </view>
</template>
<script>
	/**
	 * 在线客服
	 * */
	export default {
		data() {
			return {
				value: "",
				select: 1,
				scrollTop: 0,
				scroll: true,
			};
		},

		computed: {
            // 状态栏的高度
			statusBar() {
				// #ifdef APP-PLUS
				const e = uni.getSystemInfoSync();
				return e.statusBarHeight;
				// #endif
				// #ifdef H5
				return 0
				// #endif
			},
			pageHeight() {
				const e = uni.getSystemInfoSync();
				let statusBar = e.statusBarHeight;
				const height = e.screenHeight
				return height - statusBar - 44; // 44为导航栏的高度
			},
		},
	};
</script>
<style lang="scss" scoped>
    .my_navbar{
        background:"#FFFFFF"; // 需要设置的颜色
    }
</style>

关于在uni-app项目中使用nvue

因为项目中需要使用到地图，所以就引入了uni-app插件市场中的一个地图插件，该插件使用的是nvue，在修改样式的时候真的感觉挺痛苦的，所以总结一下在使用nvue过程中所遇到的一些坑

排除掉在app.vue页面中引入的css样式

因为nvue的css样式语法是有限制的，不支持的css写法有很多，所以必须使用条件编译排除掉app.vue中（会影响到nvue页面的css样式，不排除的话可能会报语法错误）：

#ifdef APP-PLUS
//需要引入的公共样式
#endif

###nvue的样式教程

https://uniapp.dcloud.io/nvue-api

nvue的编译方式

https://ask.dcloud.net.cn/article/36074