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.vue
index页面
│ └─list
│ └─list.vue
list页面
├─static
存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─wxcomponents
存放小程序组件的目录,详见
├─main.js
Vue初始化入口文件
├─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
属性时,可以使用相对路径或者绝对路径,形式如下:
<!-- 绝对路径,/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
文件时,可以使用相对路径和绝对路径,形式如下:
// 绝对路径,@指向项目根目录,在cli项目中@指向src目录
import add from '@/common/add.js'
// 相对路径
import add from '../../common/add.js'
注意
js
文件不支持使用/
开头的方式引入。
总结
模板中的标签属性在引入图片、视频资源时,使用以
@
开头的绝对路径;
css引入静态资源
css
文件或 style
标签 内引入 css
文件时(scss、less
文件同理),可以使用相对路径或绝对路径:
/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');
注意
自 HBuilderX 2.6.6-alpha
起支持绝对路径引入静态资源,旧版本不支持此方式
说明
css
文件或 style
标签 内引用的图片路径可以使用相对路径也可以使用绝对路径,
需要注意的是,有些小程序端css
文件不允许引用本地文件(请看注意事项):
/* 绝对路径 */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
文件。
<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
值。
<style>.iconfont{font-family: iconfont;}
</style>
步骤三、选择相应图标并获取字体编码,应用于 .nvue
页面
注意:类名是iconfont
,字体编码 &#
开头 ;
结尾
<template><view>Goods<text class="iconfont"></text></view>
</template>
效果图:
方式四:彩色图标 iconfont
步骤一、进入阿里巴巴矢量图标库,添加图标到项目,然后下载至本地
解压后的本地文件如下,其中eot
文件很重要
如果没有eot
文件则进入icon
的项目设置,勾选eot
选项后重新下载
就会出现eot
文件
步骤二、在本地找到下载的压缩包,并解压,进入解压缩之后的文件,在地址栏中输入cmd
打开控制台(如下图):
步骤三、打开电脑命令行,执行以下命令,全局安装iconfont-tools
转换工具
npm install -g iconfont-tools
第四步、在控制台中输入指令:iconfont-tools
,按回车执行指令,根据提示输入对应的值, 如下图所示:
第五步、 执行完后,就会多出来一个 iconfont-app
的文件夹
步骤六、进入 iconfont-app
文件夹,将其中的iconfont-app-icon.css
复制到项目的/static/icon/
目录下
步骤七、然后在 App.vue 引入该文件
步骤七、使用方法,其中 wy-icon
开头是必须的,wy-icon
就是你上面的设置
<text class="wy-icon wy-icon-shouye"></text>
效果:
注意:彩色图标当前对 vue
文件有效,控制台会关于backgroud
的相关警告,可忽略它。
总结:
vue
文件中使用Font-class
类名方式,统一在App.vue
中引入iconfont.css
图标文件,特别强调:目前微信小程序开发工具不支持网络链接,只支持本地方式;打包上线时,只支持在线方式。
<style >/* 每个页面公共css *//* font-class引入时,微信小程序开发工具不支持网络链接,只支持本地方式;打包上线时,只支持在线方式 */ @import url("~@/static/icon/iconfont.css");/* 彩色的图标 */@import url("~@/static/icon/iconfont-app-icon.css");
</style>
模板中使用:
<text class="wy-icon wy-icon-shouye"></text>
nvue
文件使用Unicode
字符编码方式,在每个要使用图标的.nvue
文件中分别引入iconfont.ttf
图标文件,引入方式具体参见上面nvue
文件引用字体图标。模板中使用:
<template><view>Goods<text class="iconfont"></text></view>
</template>