第一节：环境准备、项目结构详解、App.vue/main.js/uni.scss详解、各种引用(组件/js/css/静态资源)
一. 环境准备
1. Hbuilder X
下载地址：https://www.dcloud.io/hbuilderx.html
2. 微信开发工具
下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
3. 使用步骤
选中uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验 uni-app。
注：
(1). 微信开发者工具需要开启服务端口：小程序开发工具设置 -> 安全（目的是让HBuilder可以启动微信开发者工具）
(2). 如第一次使用，需配置微信开发者工具的安装路径。
点击工具栏运行 -> 运行到小程序模拟器 -> 运行设置，配置相应小程序开发者工具的安装路径
(3). 自动启动失败，可用微信开发者工具手动打开项目（项目在unpackage/dist/dev/mp-weixin路径下）。
二. 项目结构详解
详见官网：https://uniapp.dcloud.net.cn/tutorial/project.html
static目录 使用注意
- 编译到任意平台时，
static目录下除不满足条件编译的文件，会直接复制到最终的打包目录，不会打包编译。非static目录下的文件（vue、js、css 等）只有被引用时，才会被打包编译。 css、less/scss等资源不要放在static目录下，建议这些公用的资源放在自建的common目录下。
三. App.vue/main.js/uni.scss详解
(详见官网：https://uniapp.dcloud.net.cn/collocation/main.html )
1. main.js
main.js是 uni-app 的入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex、定义全局变量、方法等。
注：全局变量主要通过 app.config.globalProperties 注册。
(1). 初始化vue3实例
import App from './App'
import { createSSRApp } from 'vue'
const app = createSSRApp(App)
export function createApp() {
return {
app
}
}(2). 定义全局变量
注册：
app.config.globalProperties.baseUrl = "xxxxxx";调用：
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
let data = proxy.baseUrl;特别注意：
上述getCurrentInstance+proxy的写法，仅支持再vue页面的script标签中使用，不支持再单独的js中用。
(3). 定义全局方法
A. 以全局对象的形式注册
注册：
比如：myUtils.js 中有几个方法，采用默认的形式进行导出，如下：
// 默认导出
export default {
ajaxAsync1,
ajaxAsync2,
ajaxAsync3,
}默认导入的时候，会用一个对象进行接收，比如对象名为 $myUtils，里面包括上述三个方法，然后直接把这个对象定义为全局对象即可。
import myUtils from './js/myUtils.js'
app.config.globalProperties.$myUtils = myUtils;调用：
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
let data= await proxy.$myUtils.ajaxAsync1(xxxxxx);B. 直接注册为全局方法
注册：
myUtils.js中的方法以同上，myUtils2.js中的方法采用按需的方式导出，如下代码：
// 按需导出
export {
ajaxAsync4,
ajaxAsync5,
}分别将两个对象里的方法注册为全局方法
import myUtils from './js/myUtils.js'
//直接注册全局方法
for (let key in myUtils) {
app.config.globalProperties[key] = myUtils[key];
}
import * as myUtils2 from './js/myUtils2.js'
//直接注册全局方法
for (let key in myUtils2) {
app.config.globalProperties[key] = myUtils2[key];
}调用：
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
let data= await proxy.ajaxAsync1(xxxxxx);
2. App.vue
App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素，也就是没有<template>。这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData。
(1). 应用生命周期
注：应用生命周期仅可在App.vue中监听，在页面监听无效。
(2). 全局数据globalData
这是一种简单的全局变量机制。这套机制在uni-app里也可以使用，并且全端通用（app、小程序、web）。
注册声明：
<script>
export default {
onLaunch: function() {},
onShow: function() {},
onHide: function() {},
// 定义全局的数据
globalData: {
name: 'ypf',
age: 18
}
};
</script>使用：
<script setup>
const { globalData } = getApp();
console.log(globalData.name, globalData.age);
</script>注：在单独的js文件中也可以直接使用。
(3). 全局样式
在App.vue中，可以定义一些全局通用样式，例如需要加一个通用的背景色，首屏页面渲染的动画等都可以写在App.vue中。
注：
App.vue 中通过 @import 语句可以导入外联样式，一样作用于每一个页面。
在App.vue定义样式变量无效，样式变量需要到uni.scss中定义。
<style>
/*********************************************全局样式 *********************************************/
/* 说明：
1. 此处写的样式为全局样式，所有页面都生效
2. 该页面不能定义 scss 样式变量，定义全局变量请到uni.scss文件中
3. 可以导入文件，比如： // @import '@/static/css/base.scss';
4. 通过调试工具能看到，页面的最外层都是 page标签，所以可以通过设置page的样式，给整个页面生效
*/
@import '@/static/css/base.scss';
/* 通过page标签可以设置全局页面的样式 */
page {
background-color: #f8f8f8;
font-family: 'Microsoft YaHei';
}
</style>
3. uni.scss
uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。主要有以下几个作用：
(1). 定于全局样式，每个页面都生效
效果同在 app.vue 页面定义样式相同，通常更倾向在app.vue页面写全局样式
(2). 定义全局样式变量
声明：
// 1.定义自定义的全局的样式变量 (可以将变量单独写到一个文件里，这里引入即可)
@import '@/static/css/base.scss';
$ypf-color: orange;使用：
需要添加 lang="scss"， HBuilderX 里面安装 scss 插件，运行的时候会自动安装该插件。
<style lang="scss">
// 默认就是局部样式 加scoped没有任何意义
.box {
color: $ypf-color;
border-radius: $radius;
}
</style>(3). 重写uni-app内置的样式变量
详见后面章节
(4). 重写uni-ui内置的样式变量
详见后面章节
四. 各种引用(组件/js/css/静态资源)
(详见官网：https://uniapp.dcloud.net.cn/tutorial/page-component.html)
1. 组件
(1). 传统Vue2项目开发，引用组件需要导入 - 注册 - 使用三个步骤
<template>
<view>
<!-- 3.使用组件 -->
<uni-rate text="1"></uni-rate>
</view>
</template>
<script>
// 1. 导入组件
import uniRate from '@/components/uni-rate/uni-rate.vue';
export default {
components: { uniRate } // 2. 注册组件
}
</script>(2). Vue 3.x增加了script setup特性，将三步优化为两步，无需注册步骤，更为简洁
<template>
<view>
<!-- 2.使用组件 -->
<uni-rate text="1"></uni-rate>
</view>
</template>
<script setup>
// 1. 导入组件
import uniRate from '@/components/uni-rate/uni-rate.vue';
</script>(3). uni-app的easycom机制，将组件引用进一步优化，开发者只管使用，无需考虑导入和注册，更为高效
<template>
<view>
<!-- 1.使用组件 -->
<uni-rate text="1"></uni-rate>
</view>
</template>
<script>
</script>何为easycom机制？
(详见官网：https://uniapp.dcloud.net.cn/collocation/pages.html#easycom)
只要组件安装在项目根目录components或uni_modules的components目录下，并符合components/组件名称/组件名称.vue或uni_modules/插件ID/components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。
组件名称文件夹和组件名称名字要相同。 比如：components/ypf-table/ypf-table.vue
easycom机制是默认开启的，可以再page.json中配置关闭。
2. js
js文件或script标签内（包括 renderjs 等）引入js文件时，可以使用相对路径和绝对路径(@符号默认指向根目录)，形式如下
// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js';
// 相对路径
import add from '../../common/add.js';
3. css
@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径或绝对路径(@符号默认指向根目录)，用;表示语句结束。
<style lang="scss">
@import '@/static/css/variable.css';
@import '../../css/variable.css';
</style>也可以使用url的写法
/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');
4. 静态资源
(1). <template>模板内引入静态资源
template内引入静态资源，如image、video等标签的src属性时，可以使用相对路径或者绝对路径，形式如下
<template>
<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>
<!-- 变量模式 -->
<image class="logo" :src="myImg" ></image>
</template>
<script>
import myImg from '@/static/images/logo.png'
</script>注意
@开头的绝对路径以及相对路径会经过 base64 转换规则校验- 引入的静态资源在非 h5 平台，均不转为 base64。
- H5 平台，小于 4kb 的资源会被转换成 base64，其余不转。
(2). 背景图片
绝对路径使用：~@ 、@、或者直接/ 开头都可以
/* 绝对路径 */
background-image: url("~@/static/cvy.png");
background-image: url("@/static/cvy.png");
background-image: url("/static/cvy.png");
/* 相对路径 */
background-image: url("../../static/cvy.png");注：
@开头的绝对路径以及相对路径会经过 base64 转换规则校验- 不支持本地图片的平台，小于 40kb，一定会转 base64。（共四个平台 mp-weixin, mp-qq, mp-toutiao, app v2）
- h5 平台，小于 4kb 会转 base64，超出 4kb 时不转。
- 其余平台不会转 base64
(3). 字体图标
（参考官网：https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#字体图标 ）
uni-app 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点：
(1). 支持 base64 格式字体图标。
(2). 支持网络路径字体图标。
(3). 网络路径必须加协议头 https
(4). 小程序不支持在 css 中使用本地文件，包括本地的背景图和字体文件，需以 base64 方式方可使用。但是uni-app会进行自动转换，也就是说小程序也可以使用本地图标文件，但是需要注意以下几个规则：
A. 为方便开发者，在字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式；(换言之：字体图标大于40kb的本地文件，小程序中不能使用)
B. 字体文件大于等于 40kb，仍转换为 base64 方式使用的话可能有性能问题，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用；
C. 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。
图标源码如下图：
iconfont.css 如下：
/* 导入字体图标 */
@font-face {
font-family: "iconfont";
src: url('~@/static/custom-font/iconfont.ttf') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-shouye:before {
content: "\e668";
}
.icon-touxiang-kong:before {
content: "\e660";
}在App.vue中全局引入图标样式
<style>
/*每个页面公共css */
@import '@/static/custom-font/iconfont.css';
</style>使用：
<template>
<view class="style-page">
<view class="bg-view"></view>
<text class="text iconfont icon-shouye"></text>
</view>
</template>
!
- 作 者 : Yaopengfei(姚鹏飞)
- 博客地址 : http://www.cnblogs.com/yaopengfei/
- 声 明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
- 声 明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。
浙公网安备 33010602011771号