Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
uni-app
提交
4950f92d
U
uni-app
项目概览
DCloud
/
uni-app
4 个月 前同步成功
通知
731
Star
38707
Fork
3642
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
7
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
7
Issue
7
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
未验证
提交
4950f92d
编写于
3月 16, 2020
作者:
折
折腾笔记
提交者:
GitHub
3月 16, 2020
浏览文件
操作
浏览文件
下载
差异文件
Merge pull request #1420 from consunmida/patch-1
文字错误
上级
63159758
5e9fa997
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
56 addition
and
56 deletion
+56
-56
docs/frame.md
docs/frame.md
+56
-56
未找到文件。
docs/frame.md
浏览文件 @
4950f92d
...
...
@@ -48,54 +48,54 @@
|mp-weixin|微信小程序|
|mp-alipay|支付宝小程序|
|mp-baidu|百度小程序|
## 资源路径说明
### 模板内引入静态资源
> `template`内引入静态资源,如`image`、`video`等标签的`src`属性时,可以使用相对路径或者绝对路径,形式如下
```
html
<!-- 绝对路径,/static指根目录下的static目录,在cli项目中/static指src目录下的static目录 -->
<image
class=
"logo"
src=
"/static/logo.png"
></image>
## 资源路径说明
### 模板内引入静态资源
> `template`内引入静态资源,如`image`、`video`等标签的`src`属性时,可以使用相对路径或者绝对路径,形式如下
```
html
<!-- 绝对路径,/static指根目录下的static目录,在cli项目中/static指src目录下的static目录 -->
<image
class=
"logo"
src=
"/static/logo.png"
></image>
<!-- 相对路径 -->
<image
class=
"logo"
src=
"../../static/logo.png"
></image>
```
### js文件引入
> `js`文件或`script`标签内(包括renderjs等)引入`js`文件时,可以使用相对路径和绝对路径,形式如下
```
js
// 绝对路径,@指向项目根目录,在cli项目中@指向src目录
import add from '@/common/add.js'
// 相对路径
import add from '../../common/add.js'
```
### css引入静态资源
> `css`文件或`style标签`内引入`css`文件时(scss、less文件同理),只能使用相对路径
```
css
/
* 相对路径 *
/
@import "../../common/base.css";
/
* 或者 *
/
@import url("../../common/base.css");
```
> `css`文件或`style标签`内引用的图片路径可以使用相对路径也可以使用绝对路径,需要注意的是,小程序端css文件不允许引用本地文件。
```
css
/
* 绝对路径 *
/
background-image: url(/static/logo.png);
/
* 相对路径 *
/
background-image: url(../../static/logo.png);
```
**Tips**
- 引入字体图标请参考,[
自体图标](frame?id=字体图标)
<image
class=
"logo"
src=
"../../static/logo.png"
></image>
```
### js文件引入
> `js`文件或`script`标签内(包括renderjs等)引入`js`文件时,可以使用相对路径和绝对路径,形式如下
```
js
// 绝对路径,@指向项目根目录,在cli项目中@指向src目录
import add from '@/common/add.js'
// 相对路径
import add from '../../common/add.js'
```
### css引入静态资源
> `css`文件或`style标签`内引入`css`文件时(scss、less文件同理),只能使用相对路径
```
css
/
* 相对路径 *
/
@import "../../common/base.css";
/
* 或者 *
/
@import url("../../common/base.css");
```
> `css`文件或`style标签`内引用的图片路径可以使用相对路径也可以使用绝对路径,需要注意的是,小程序端css文件不允许引用本地文件。
```
css
/
* 绝对路径 *
/
background-image: url(/static/logo.png);
/
* 相对路径 *
/
background-image: url(../../static/logo.png);
```
**Tips**
- 引入字体图标请参考,[
字体图标](frame?id=字体图标)
## 生命周期
...
...
@@ -420,8 +420,8 @@ uni-app 提供内置 CSS 变量
```
html
<template>
<!-- HBuilderX 2.6.3+ 新增 page-meta, 详情:https://uniapp.dcloud.io/component/page-meta -->
<page-meta>
<navigation-bar
/>
<page-meta>
<navigation-bar
/>
</page-meta>
<view>
<view
class=
"status_bar"
>
...
...
@@ -529,16 +529,16 @@ uni-app 提供内置 CSS 变量
font-family: test1-icon;
src: url('~@/static/iconfont.ttf');
}
```
`nvue`中不可直接使用css的方式引入字体文件,需要使用以下方式在js内引入。nvue内不支持本地路径引入字体,请使用网络链接或者`base64`形式。**`src`字段的`url`的括号内一定要使用单引号。**
```
js
```
`nvue`中不可直接使用css的方式引入字体文件,需要使用以下方式在js内引入。nvue内不支持本地路径引入字体,请使用网络链接或者`base64`形式。**`src`字段的`url`的括号内一定要使用单引号。**
```
js
var domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
'fontFamily': "fontFamilyName",
'src': "url('https://...')"
})
'src': "url('https://...')"
})
```
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录