uni-app 框架与资源路径
不需要专门去学习小程序的语法，uni-app使用的是vue的语法，不是小程序自定义的语法。
搜索框 ：有疑问直接搜索框输入，BUG直接复制错误提示粘贴上去搜索。
介绍 ：先看这个页面，就知道uniapp大体知识，覆盖了哪些内容，如何进行开发。
框架 ：pages.json 配置项、生命周期、页面通讯、日志打印、定时器。
API： 为开发APP、小程序、H5等提供的内置函数。uniCloud: 简化服务端开发，不用自己开发服务端代码。
uniapp项目目录及文件介绍
一个uni-app项目，默认包含如下目录及文件：
┌─
cloudfunctions> 云函数目录（阿里云为aliyun，腾讯云为tcb，uniCloud详见 ）│─
components符合vue组件规范的uni-app组件目录│ └─
comp-a.vue可复用的a组件├─
hybrid存放本地网页的目录，详见├─
platforms存放各平台专用页面的目录，详见├─
pages业务页面文件存放的目录│ ├─
index│ │ └─
index.vueindex页面│ └─
list│ └─
list.vuelist页面├─
static存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此├─
wxcomponents存放小程序组件的目录，详见├─
main.jsVue初始化入口文件├─
App.vue应用配置，用来配置App全局样式以及监听、应用生命周期, 详见├─
manifest.json配置应用名称、appid、logo、版本等打包信息，└─
pages.json配置页面路由、导航条、选项卡等页面类信息，详见
注意
- 编译到任意平台时，
static目录下的文件均会被打包进去，非static目录下的文件（vue、js、css 等）被引用到才会被包含进去。static目录下的js文件不会被编译，如果里面有es6的代码，不经过转换直接运行，在手机设备上会报错。css 、 less/scss等资源同样不要放在static目录下，建议这些公用的资源放在common目录下。
总结
static 目录放图片、视频资源。common目录放 js 、 css 、 less/scss 等资源，components 目录放可复用vue组件。
资源路径说明
vue组件中引入静态资源
template 内引入静态资源，如 image 、video等标签的 src 属性时，可以使用相对路径或者绝对路径，形式如下：
bash
<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/titleTouxiang.png"></image>
<image class="logo" src="@/static/titleTouxiang.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/titleTouxiang.png"></image>
注意
@开头的绝对路径以及相对路径会经过base64转换规则校验。- 引入的静态资源在非
h5平台，均不转为base64。H5平台，小于4kb的资源会被转换成base64，其余不转。- 支付宝小程序组件内
image标签不可使用相对路径。
总结
因为支付宝小程序使用 image 时不可使用相对路径，所以项目中全部使用绝对路径，推荐以 @ 开头，原因
看下面js文件
js文件引入
js 文件或script标签内（包括renderjs等）引入 js 文件时，可以使用相对路径和绝对路径，形式如下：
bash
// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js'
// 相对路径
import add from '../../common/add.js'注意
js文件不支持使用/开头的方式引入。
总结
模板中的标签属性在引入图片、视频资源时，使用以
@开头的绝对路径；
css引入静态资源
css 文件或 style标签 内引入 css 文件时（scss、less文件同理），可以使用相对路径或绝对路径：
javascript
/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');注意
自 HBuilderX 2.6.6-alpha 起支持绝对路径引入静态资源，旧版本不支持此方式
说明
css 文件或 style标签 内引用的图片路径可以使用相对路径也可以使用绝对路径，
需要注意的是，有些小程序端css文件不允许引用本地文件（请看注意事项）：
javascript
/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相对路径 */
background-image: url(../../static/logo.png);注意
- 引入字体图标请参考，字体图标。
@开头的绝对路径以及相对路径会经过base64转换规则校验。- 不支持本地图片的平台，小于
40kb，一定会转base64。（共四个平台mp-weixin, mp-qq, mp-toutiao, app v2）。 h5平台，小于4kb会转base64，超出4kb时不转。其余平台不会转base64。
在项目开发时，引用任意类型资源文件，全部使用以
@开头的绝对路径方式引入，引入字体图标文件时，使用~@开头，如：~@/static/icon/iconfont.ttf。
iconfont字体图标
下载图标库，进入阿里巴巴矢量图标库
下载完成点击.html
方式一：Unicode 引用步骤
Unicode 是字体在网页端最原始的应用方式，特点是：
- 兼容性最好，支持
IE6+，及所有现代浏览器。- 支持按字体的方式去动态调整图标大小，颜色等等。
- 但是因为是字体，所以不支持多色。
- 只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
- 多色有需求建议使用
symbol的引用方式。
把 iconfont.css 和 iconfont.ttf 文件拷贝到 /static/icon/ 目录下
在 App.vue文件的 <style> 标签下完成 引用.ttf字体文件 和 定义 iconfont 的样式，字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。网络路径必须加协议头 https 。
阿里 Unicode 在线图标链接复制如下（一定不要忘记加 https://）：
挑选相应图标并获取字体编码，应用于页面，注意：类名是 iconfont ，字体编码 &# 开头 ; 结尾。
效果：
方式二：Font-class 类名引用步骤(推荐方式)
font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。
与 Unicode 使用方式相比，具有如下特点：
- 兼容性良好，支持
IE8+，及所有现代浏览器。- 相比于
Unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。- 因为使用
class来定义图标，所以当要替换图标时，只需要修改class里面的Unicode引用。- 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
在App.vue文件的<style>标签下使用import导入iconfont.css字体文件把上面方式一的代码注释掉，避免相互影响
注意：font-class类名方式，微信小程序开发工具上不支持网络链接，只支持本地方式；打包上线时，只支持在线方式。
阿里Font class在线图标链接复制如下（一定不要忘记加 https://）微信小程序不支持网络链接，只支持本地方式：
挑选相应图标并获取类名，应用于 .vue 页面,注意：iconfont和 icon-haoping 是iconfont.css文件声明的， icon-haoping 是具体的图标类名。进行iconfont.css文件进行修改，删除下图中两行，
修改上图中的base64位后面的format('woff2'),改为format('woff2');以分好结尾，并且前面加上src:
最后几行url不需要也要删除
效果：
方式三：nvue 文件引用字体图标
nvue要使用Unicode引用。nvue文件中不可直接使用css的方式引入字体文件，需要在每个nvue文件中使用js的方式引入。无法App.vue全局引入。nvue内不支持本地路径引入字体，请使用网络链接或者base64形式。
步骤一、在user.nvue文件要使用字体图标，那在此组件的beforeCreate生命周期钩子加载iconfont.ttf文件。
c
<template>
<view>
Goods
<text class="iconfont"></text>
</view>
</template>
<script>
export default {
beforeCreate() {
// #ifdef APP-NVUE
// nvue文件 加载unicode图标文件
const dom = weex.requireModule('dom');
dom.addRule('fontFace', {
fontFamily: 'iconfont', // 在style中声明 .ionfont 样式引用
// 使用 https:// 开头的网络链接，且用一定要用单引号''引起来
src: "url('https//at.alicdn.com/t/c/font_3863633_6esci1kuw13.ttf')"
});
// #endif
},
data() {
return {}
},
methods: {}
}
</script>步骤二、在 style 中声明.iconfont引用上面加载的字体文件，定义图标大小和颜色。
注意：下面 font-family 的值对应上面 js 中的 fontFamily 值。
c
<style>
.iconfont{
font-family: iconfont;
}
</style>步骤三、选择相应图标并获取字体编码，应用于 .nvue 页面
注意：类名是iconfont，字体编码 &# 开头 ; 结尾
c
<template>
<view>
Goods
<text class="iconfont"></text>
</view>
</template>效果图：
方式四：彩色图标 iconfont
步骤一、进入阿里巴巴矢量图标库，添加图标到项目，然后下载至本地
解压后的本地文件如下，其中eot文件很重要
如果没有eot文件则进入icon的项目设置，勾选eot选项后重新下载
就会出现eot文件
步骤二、在本地找到下载的压缩包，并解压，进入解压缩之后的文件，在地址栏中输入cmd打开控制台（如下图）：
步骤三、打开电脑命令行，执行以下命令，全局安装iconfont-tools转换工具
css
npm install -g iconfont-tools
第四步、在控制台中输入指令：iconfont-tools，按回车执行指令，根据提示输入对应的值， 如下图所示：
第五步、 执行完后，就会多出来一个 iconfont-app 的文件夹
步骤六、进入 iconfont-app 文件夹，将其中的iconfont-app-icon.css复制到项目的/static/icon/目录下
步骤七、然后在 App.vue 引入该文件
步骤七、使用方法，其中 wy-icon 开头是必须的，wy-icon就是你上面的设置
c
<text class="wy-icon wy-icon-shouye"></text>效果：
注意：彩色图标当前对 vue文件有效，控制台会关于backgroud的相关警告，可忽略它。
总结：
vue文件中使用Font-class类名方式，统一在App.vue中引入iconfont.css图标文件，特别强调：目前微信小程序开发工具不支持网络链接，只支持本地方式;打包上线时，只支持在线方式。
css
<style >
/* 每个页面公共css */
/* font-class引入时，微信小程序开发工具不支持网络链接，只支持本地方式；打包上线时，只支持在线方式 */
@import url("~@/static/icon/iconfont.css");
/* 彩色的图标 */
@import url("~@/static/icon/iconfont-app-icon.css");
</style>模板中使用：
css
<text class="wy-icon wy-icon-shouye"></text>nvue文件使用Unicode字符编码方式，在每个要使用图标的.nvue文件中分别引入iconfont.ttf图标文件，引入方式具体参见上面nvue文件引用字体图标。模板中使用：
css
<template>
<view>
Goods
<text class="iconfont"></text>
</view>
</template>