因为想所以努力
因为想所以努力

Uni-app 目录结构、样式与布局、配置文件、生命周期、变量的声明与模板的绑定基础笔记

一段代码多端使用

uni-app 官网：

https://uniapp.dcloud.io/

使用环境：

HbuilderX + 微信小程序开发者工具

目录结构：

Wechat：
Uni-app 目录结构、样式与布局、配置文件、生命周期、变量的声明与模板的绑定基础笔记_第1张图片

  • project.config.json 核心的配置文件
    Uni-app 目录结构、样式与布局、配置文件、生命周期、变量的声明与模板的绑定基础笔记_第2张图片

  • app.wxss css的样式文件，属于全局样式
    Uni-app 目录结构、样式与布局、配置文件、生命周期、变量的声明与模板的绑定基础笔记_第3张图片
    uni-app：
    Uni-app 目录结构、样式与布局、配置文件、生命周期、变量的声明与模板的绑定基础笔记_第4张图片

  • manifest.json 配置应用标识、SDK、权限等一些关于应用的配置
    如图：
    Uni-app 目录结构、样式与布局、配置文件、生命周期、变量的声明与模板的绑定基础笔记_第5张图片

  • page.json : 在wechat对应的是app.json,这里面注册页面视图可以理解为小程序相关配置：
    Uni-app 目录结构、样式与布局、配置文件、生命周期、变量的声明与模板的绑定基础笔记_第6张图片

  • main.js :此文件会运行到整个的应用中去，里面可以定义全局变量类似于Android中的Application类

Uni-app 目录结构、样式与布局、配置文件、生命周期、变量的声明与模板的绑定基础笔记_第7张图片

  • App.vue : 也是一个全局的文件，之后会介绍

Uni-app 目录结构、样式与布局、配置文件、生命周期、变量的声明与模板的绑定基础笔记_第8张图片

  • pages 里面作视图
    在这里插入图片描述

在uni-app中遵循单文件组件规范，及.vue文件是一个自定义类型的文件，用类HTML语法描述以个Vue组件。每一个Vue文件又包含三个类型的顶级语言模块