uniapp移动端基础介绍_代码007(未授权)

本文介绍: 静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。template下包含两个view会报错，只要加一个view把两个view包含起来才不会报错。中全局引用，每个页面都可以使用该样式。推荐第二种方式，方便所有的样式文件在。中导入，每个页面都可以使用该样式。属性来控制组件的样式。

root节点只能包含一个view标签在这里插入图片描述
template下包含两个view会报错，只要加一个view把两个view包含起来才不会报错。

如果我们创建自定义的样式文件，例如创建一个/static/scss/cafe.css，想要使其在全局引用。

1、在App.vue中全局引用，每个页面都可以使用该样式。

<style lang="scss">
  @import '@/static/scss/ruoyi.css';
</style>

2、在index.scss中导入，每个页面都可以使用该样式。

@import '@/static/scss/cafe.css';

推荐第二种方式，方便所有的样式文件在index.scss统一管理和维护。

css 变量	描述
–status-bar-height	系统状态栏高度
–window-top	内容区域距离顶部的距离
–window-bottom	内容区域距离底部的距离

注意：

<template>
  <page-meta>
    <navigation-bar />
  </page-meta>
  <view>
    <view class="status_bar">
      <!-- 这里是状态栏 -->
    </view>
    <view>状态栏下的文字</view>
  </view>
</template>
<style>
  .status_bar {
    height: var(--status-bar-height);
    width: 100%;
  }
</style>

<template>
  <view>
    <view class="toTop">
      <!-- 这里可以放一个向上箭头，它距离底部tabbar上浮10px-->
    </view>
  </view>
</template>
<style>
  .toTop {
    bottom: calc(var(--window-bottom) + 10px);
  }
</style>

<template>
  <view class="content">
    <view :style="{ height: iStatusBarHeight + 'px'}"></view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        iStatusBarHeight: 0,
      };
    },
    onLoad() {
      this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
    },
  };
</script>

如创建/utils/cafe.js。

export function hello() {
  alert('hello')
}

在其他页面使用hello方法

<script>
  import { hello } from  '@/utils/cafe.js'

  export default {
    onLoad: function() {
      hello()
    }
  };
</script>

框架组件上支持使用style、class属性来控制组件的样式。

style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

<view :style="{color:color}" />

<view class="normal_view" />

全局方法在main.js定义，如/utils/permission.js，把checkPerm、checkRole方法注册到全局使用。

import { checkPermi, checkRole } from './utils/permission'

Vue.prototype.checkPermi = checkPermi
Vue.prototype.checkRole = checkRole

<view v-if="checkRole(['admin'])">角色权限控制</view>
<view v-if="checkPermi(['system:user:list'])">按钮权限控制</view>

全局变量机制globalData，支持全端通用。
以下是 App.vue 中定义globalData的相关配置：

<script>  
  export default {  
    globalData: {  
      text: 'text'  
    }
  }  
</script>

console.info(getApp().globalData.text);

修改globalData变量的方式如下：getApp().globalData.text = 'cafe'

uni-app支持的通用css单位包括px、rpx

vue页面支持下面这些普通H5单位，但在nvue里不支持

在style中添加lang属性，这样就可以支持scss样式编译了

<template>
  <view class="content">
    <view class="item">
      <view class="title">若依移动端</view>
      <view class="count">520</view>
    </view>
  </view>
</template>

<style lang="scss">
  .item {
    .title {
      background-color: #0066CC;
    }

    .count {
      background: black;
      color: #FFF;
    }
  }
</style>