uni-app 项目问题总结

淡淡的烟草味﹌ 2023-01-01 10:57 251阅读 0赞

## uni-app项目中使用Tailwind CSS ##

![在这里插入图片描述][20210102121025234.gif_pic_center]

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

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

[Tailwind CSS官网][Tailwind CSS]

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

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

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

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

<template>
    	<view class="pagebox">
            
            <view class="zhanwei"></view>
            
            
    		<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'}">
            
    		<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'}">
              
              
        	</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" >
            
    		<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'}">
              
              
        	</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

[20210102121025234.gif_pic_center]: /images/20221120/5ff0c0aac53e4e4cabc6b0c9aee49901.png
[Tailwind CSS]: https://www.tailwindcss.cn/