uni-app学习01 前期准备和了解

uni-app官网

https://uniapp.dcloud.net.cn/

目录结构

最简单的默认模板（实际使用时可以使用uni-ui项目模板）

 1. .hbuilderx
 2. pages —— 小程序页面
 3. static —— 静态资源文件
 4. unpackage —— HbuilderX打包生成的目录文件
 5. App.vue —— 根组件
 6. index.html —— 入口页面
 7. main.js —— 核心文件 挂在页面创建vue实例
 8. manifest.json —— 相关配置文件
 9. pages.json —— 全局json文件配置app.json
 10. uni.scss —— 样式 公共变量

pages文件夹

在pages文件夹下建立home.vue。建立的时候勾选“在pages.json中注册”，否则需要手动注册。

引用组件

在根目录创建一个目录components，用于存放组件

编写创建的新组件myHeader.vue

在index.vue中引用该组件

引用js

js文件或script标签内（包括 renderjs 等）引入js文件时，可以使用相对路径和绝对路径，形式如下

// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js';
// 相对路径
import add from '../../common/add.js';

注意：js 文件不支持使用 / 开头的方式引入

引用css

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

示例代码：

<style>
    @import "../../common/uni.css";

    .uni-card {
        box-shadow: none;
    }
</style>

引用静态资源

template内引入静态资源，如image、video等标签的src属性时，可以使用相对路径或者绝对路径，形式如下

<!-- 绝对路径，/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>

注意：

• @开头的绝对路径以及相对路径会经过 base64 转换规则校验
• 引入的静态资源在非 h5 平台，均不转为 base64。
• H5 平台，小于 4kb 的资源会被转换成 base64，其余不转。
• 自HBuilderX 2.6.6起template内支持@开头路径引入静态资源，旧版本不支持此方式
• App 平台自HBuilderX2.6.9起template节点中引用静态资源文件时（如：图片），调整查找策略为【基于当前文件的路径搜索】，与其他平台保持一致
• 支付宝小程序组件内 image 标签不可使用相对路径

css 引入静态资源

css文件或style标签内引入css文件时（scss、less 文件同理），可以使用相对路径或绝对路径（HBuilderX 2.6.6）

/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');

注意:

• 自HBuilderX 2.6.6起支持绝对路径引入静态资源，旧版本不支持此方式
• css文件或style标签内引用的图片路径可以使用相对路径也可以使用绝对路径，需要注意的是，有些小程序端 css
  文件不允许引用本地文件（请看注意事项）。

/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相对路径 */
background-image: url(../../static/logo.png);

Tips

• 引入字体图标请参考，字体图标
• @开头的绝对路径以及相对路径会经过 base64 转换规则校验 不支持本地图片的平台，小于 40kb，一定会转 base64。（共四个平台mp-weixin, mp-qq, mp-toutiao, app v2）
• h5 平台，小于 4kb 会转 base64，超出 4kb 时不转。 其余平台不会转 base64