Uniapp

一、什么是 uniapp

二、项目目录和文件作用

   pages.json

   manifest.json

   App.vue

   main.js

   uni.scss

   unpackage

   pages

   static

   components

三、全局配置和页面配置

    1.通过 globalStyle 进行全局配置

    2. 创建新页面

    3. 配置 tabbar

    4. condition 启动模式配置

四、组件的基本使用

    1. text 文本组件的用法

    2. view 视图容器组件的用法

    3. button 按钮组件的用法

    

五、uni-app 中的样式

一、什么是 uniapp
        
        uni-app 是一个使用 [Vue.js](https://vuejs.org/) 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。即使不跨端，uni-app 同时也是更好的小程序开发框架。
        具有 vue 和微信小程序的开发经验，可快速上手 uni-app。
二、项目目录和文件作用
        
   pages.json
         文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生 tabbar 等
   manifest.json
         文件是应用的配置文件，用于指定应用的名称、图标、权限等。
   App.vue
         是我们的根组件，所有页面都是在`App.vue`下进行切换的，是页面入口文件，可以调用应用的生命周期函数。
   main.js
         是我们的项目入口文件，主要作用是初始化`vue`实例并 使用需要的插件。
   uni.scss
         文件的用途是为了方便整体控制应用的风格。比如按钮、颜色、边框风格，`uni.scss`文件里预置了一批 scss 变量预置。
   unpackage
         就是打包目录，在这里有各个平台的打包文件
   pages
         所有的页面存放目录
   static
         静态资源目录，例如图片等
   components
         组件存放目录
三、全局配置和页面配置
    1.通过 globalStyle 进行全局配置
        用于设置应用的状态栏、导航条、标题、窗口背景色等。

    2. 创建新页面
        右键 pages 新建 message 目录 ，在 message 目录下右键新建  .vue 文件,并选择基本模板。
    

          通过 pages 来配置页面

          pages 数组中第一项表示应用启动页

"pages":[
    {
       "path":"pages/message/message"
    },
    {
     "path":"pages/index/index",
     "style":{
        "navigationBarTitleText":"uni-app"
       }
    }
]
          通过 style 修改页面的标题和导航栏背景色，并且设置 h5 下拉刷新的特有样式
"pages":[
  {
    "path":"pages/message/message",
    "style":{
    "navigationBarBackgroundColor":"#007AFF",
    "navigationBarTextstyle":"white",
    "enablePullDownRefresh":true,
    "disablescroll":true
    "h5”:{
        "pullToRefresh":{
            "color":“#007AEE"
            }
        }
      }
   }
]

    3. 配置 tabbar
        如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。
        注：
        - 当设置 position 为 top 时，将不会显示 icon
        - tabBar 中的 list 是一个数组，只能配置最少 2 个、最多 5 个 tab，tab 按数组的顺序排序。
         属性说明：

        其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：

        代码实例：

"tabBar": {
        "color": "green",
        "selectedColor": "red",
        "backgroundColor": "whitesomke",
        // "borderStyle": "black",
        "position": "bottom",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath": "static/logo.png",
                "selectedIconPath": "static/1.webp"
                
            },
            {
                "pagePath": "pages/login/login",
                "text": "分类",
                "iconPath": "static/logo.png",
                "selectedIconPath": "static/2.webp"
                
            },
            {
                "pagePath": "pages/register/register",
                "text": "我的",
                "iconPath": "static/logo.png",
                "selectedIconPath": "static/4.webp"
                
            }
        ]
        
        
    },

    4. condition 启动模式配置
        启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面
        属性说明
        

        list 说明

四、组件的基本使用
        uni-app提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼接称自己的应用uni-app 中的组件，就像 HTML 中的 div 、p、span 等标签的作用一样，用于搭建页面的基础结构
    1. text 文本组件的用法

        注： text` 组件相当于行内标签、在同一行显示；
                除了文本节点以外的其他节点都无法长按选中。
    2. view 视图容器组件的用法

    3. button 按钮组件的用法
         
        button 组件默认独占一行，设置 size 为 mini 时可以在一行显示多个。

        代码案例：

<button size='mini' type='primary">前端</button>
<button size='mini' type='default' disabled='true'>前端</button>
<button size='mini' type='warn' loading='true'>前端</button>

注：
        · <image> 组件默认宽度 300px、高度 225px；
        · src 仅支持相对路径、绝对路径，支持 base64 码；
        · 页面结构复杂，css 样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的           情况，此时设置 image{will-change: transform} ,可优化此问题。
五、uni-app 中的样式
       1. rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。以750 宽的屏幕为基准，750rpx 恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。
       2. 使用 @import 语句可以导入外联样式表， @import 后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束
       3. 支持基本常用的选择器 class、id、element 等
       4.在 uni-app 中不能使用 * 选择器。
        5. page 相当于 body 节点
       6.定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。
        7. uni-app 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点：
                字体文件小于 40kb， uni-app 会自动将其转化为base64 格式；
                字体文件大于等于 40kb， 需开发者自己转换，否则使用将不生效；
                字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。

到此就是uniApp最基础的部分了，如有不全还请谅解，谢谢！
————————————————

                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
                        
原文链接：https://blog.csdn.net/IT_JiaRouBing/article/details/139027901