Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
qq_16800119
unidocs-zh
提交
c323f54a
unidocs-zh
项目概览
qq_16800119
/
unidocs-zh
与 Fork 源项目一致
Fork自
DCloud / unidocs-zh
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
c323f54a
编写于
12月 04, 2023
作者:
D
DCloud_LXH
浏览文件
操作
浏览文件
下载
差异文件
Merge branch 'master' of github.com:dcloudio/unidocs-zh
上级
bdf1888d
728c0af2
变更
3
展开全部
隐藏空白更改
内联
并排
Showing
3 changed file
with
199 addition
and
107 deletion
+199
-107
docs/api/README.md
docs/api/README.md
+72
-69
docs/api/timer.md
docs/api/timer.md
+72
-5
docs/tutorial/page.md
docs/tutorial/page.md
+55
-33
未找到文件。
docs/api/README.md
浏览文件 @
c323f54a
此差异已折叠。
点击以展开。
docs/api/timer.md
浏览文件 @
c323f54a
# 定时器
## setTimeout(callback, delay, rest)
设定一个定时器。在定时到期以后执行注册的回调函数
...
...
@@ -10,7 +12,6 @@
|delay|Number|否|延迟的时间,函数的调用会在该延迟之后发生,单位 ms|
|rest|Any|否|param1, param2, ..., paramN 等附加参数,它们会作为参数传递给回调函数|
**返回值**
|返回值|类型|说明|
...
...
@@ -27,8 +28,41 @@
|:-|:-|:-|:-|
|timeoutID|Number|是|要取消的定时器的 ID|
### 最佳实践
定时器应当在组件、页面销毁时候取消,否则该定时器将成为游离定时器,无法被回收销毁。
```
html
<script
lang=
"ts"
>
let
timer
:
ReturnType
<
typeof
setTimeout
>
|
null
=
null
;
export
default
{
data
()
{
return
{};
},
methods
:
{
onSetTimeout
()
{
timer
=
setTimeout
(()
=>
{
console
.
log
(
"
setTimeout
"
);
},
1000
);
},
clearTimer
()
{
// clearTime
if
(
timer
)
{
clearTimeout
(
timer
);
timer
=
null
;
}
},
},
beforeUnmount
()
{
// clearTime
this
.
clearTimer
();
},
};
</script>
```
## setInterval(callback, delay, rest)
设定一个定时器。按照指定的周期(以毫秒计)来执行注册的回调函数
**参数说明**
...
...
@@ -39,7 +73,6 @@
|delay|Number|否|执行回调函数之间的时间间隔,单位 ms|
|rest|Any|否|param1, param2, ..., paramN 等附加参数,它们会作为参数传递给回调函数|
**返回值**
|返回值|类型|说明|
...
...
@@ -47,9 +80,10 @@
|intervalID|Number|定时器的编号,这个值可以传递给
[
clearInterval
](
/api/timer?id=clearinterval
)
来取消该定时|
**代码示例**
```
```
js
this
.
timer
=
setInterval
(()
=>
{
//TODO
//TODO
},
1000
);
```
...
...
@@ -63,5 +97,38 @@ this.timer = setInterval(() => {
|:-|:-|:-|:-|
|intervalID|Number|是|要取消的定时器的 ID|
### 最佳实践
```
html
<script
lang=
"ts"
>
let
timer
:
ReturnType
<
typeof
setTimeout
>
|
null
=
null
;
export
default
{
data
()
{
return
{};
},
methods
:
{
onSetTimeout
()
{
timer
=
setInterval
(()
=>
{
console
.
log
(
"
setInterval
"
);
},
1000
);
},
clearTimer
()
{
// clearTime
if
(
timer
)
{
clearInterval
(
timer
);
timer
=
null
;
}
},
},
beforeUnmount
()
{
// clearTime
this
.
clearTimer
();
},
};
</script>
```
## 注意事项
*
App 端返回的定时器编号可能为 String 类型,使用时无需主动转换为 Number 类型
\ No newline at end of file
-
App 端返回的定时器编号可能为 String 类型,使用时无需主动转换为 Number 类型
-
定时器执行间隔并不等于定时器间隔,受很多因素影响,这属于 JS 执行问题,详见
[
MDN 文档
](
https://developer.mozilla.org/zh-CN/docs/Web/API/setInterval
)
docs/tutorial/page.md
浏览文件 @
c323f54a
# 页面
## 页面简介
uni-app项目中,一个页面就是一个符合
`Vue SFC规范`
的 vue 文件。
...
...
@@ -15,7 +17,9 @@ uni-app项目中,一个页面就是一个符合`Vue SFC规范`的 vue 文件
uni-app x 在app-android上,每个页面都是一个全屏activity,不支持透明。
## 新建页面
## 页面管理
### 新建页面
`uni-app`
中的页面,默认保存在工程根目录下的
`pages`
目录下。
...
...
@@ -29,25 +33,29 @@ uni-app项目中,一个页面就是一个符合`Vue SFC规范`的 vue 文件
<img
src=
"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/pages-add-02.png"
style=
"max-width:450px"
></img>
</div>
新建页面时,可以选择
`是否创建同名目录`
。创建目录的意义在于,
新建页面时,可以选择
`是否创建同名目录`
。创建目录的意义在于:
-
如果你的页面较复杂,需要拆分多个附属的js、css、组件等文件,则使用目录归纳比较合适。
-
如果只有一个页面文件,大可不必多放一层目录。
## 删除页面
##
#
删除页面
删除页面时,需做两件工作:
-
删除
`.vue`
文件、
`.nvue`
、
`.uvue`
文件
-
删除
`pages.json -> pages`
列表项中的配置 (如使用HBuilderX删除页面,会在状态栏提醒删除pages.json对应内容,点击后会打开pages.json并定位到相关配置项)
页面改名同理。
### 页面改名
## pages.json
操作和删除页面同理,依次修改文件和
`pages.json`
。
### pages.json
pages.json是工程的页面管理配置文件,包括:页面路由注册、页面参数配置(原生标题栏、下拉刷新...)、首页tabbar等众多功能。
其篇幅较长,另见
[
pages.json
](
../collocation/pages.md
)
##
应用首页
##
# 设置
应用首页
`pages.json -> pages`
配置项中的第一个页面,作为当前工程的首页(启动页)。
...
...
@@ -72,7 +80,11 @@ pages.json是工程的页面管理配置文件,包括:页面路由注册、
## 页面内容构成
uni-app 页面基于 vue 规范。一个页面内,有3个根节点标签
`<template>`
、
`<script>`
、
`<style>`
,分别是模板组件区、脚本区、样式区。
uni-app 页面基于 vue 规范。一个页面内,有3个根节点标签:
-
模板组件区
`<template>`
-
脚本区
`<script>`
-
样式区
`<style>`
```
html
<template>
...
...
@@ -110,12 +122,14 @@ uni-app 页面基于 vue 规范。一个页面内,有3个根节点标签 `<tem
### template模板区
template中文名为
`模板`
,它类似html的标签。但有2个区别:
1.
html中script和style是html的二级节点。但在vue文件中,template、script、style这3个是平级关系。
2.
html中写的是web标签,但vue的template中写的全都是vue组件,每个组件支持属性、事件、vue指令,还可以绑定vue的data数据。
在vue2中,template的二级节点只能有一个节点,一般是在一个根view下继续写页面组件(如上示例代码)。
1.
html中
`script`
和
`style`
是 html 的二级节点。但在 vue 文件中,
`template`
、
`script`
、
`style`
这3个是平级关系。
2.
html 中写的是 web 标签,但 vue 的
`template`
中写的全都是 vue 组件,每个组件支持属性、事件、 vue 指令,还可以绑定 vue 的 data 数据。
在vue2中,
`template`
的二级节点只能有一个节点,一般是在一个根
`view`
下继续写页面组件(如上示例代码)。
但在vue3中,template可以有多个二级节点,省去一个层级,如下:
```
html
<template>
<view>
...
...
@@ -127,9 +141,11 @@ template中文名为`模板`,它类似html的标签。但有2个区别:
</template>
```
可以在
manifest中切换使用vue2还是vue3(uni-app x中只支持vue3)
可以在
`manifest`
中切换使用 Vue2 还是 Vue3。
### script脚本区
注意:
`uni-app x`
中只支持 Vue3。
### script 脚本区
script中编写脚本,可以通过lang属性指定脚本语言。
...
...
@@ -141,16 +157,17 @@ script中编写脚本,可以通过lang属性指定脚本语言。
</script>
```
在vue的选项式(option)规范中,script下包含
`export default {}`
。(除了选项式,还有
[
组合式
](
vue3-composition-api.md
)
)
在vue的选项式(option)规范中,script下包含
`export default {}`
。除了选项式,还有
[
组合式
](
vue3-composition-api.md
)
写法。
页面级的代码大多写在
`export default {}`
中。写在里面的代码,会随着页面关闭而关闭。
页面级的代码大多写在
`export default {}`
中。写在里面的代码,会随着页面关闭而关闭。
#### `export default` 外的代码
#### export default 外的代码
写在
`export default {}`
外面的代码,一般有几种情况:
先来介绍写在
`export default {}`
外面的代码,一般有几种情况:
1.
import三方js/ts模块
2.
import非easycom的组件(一般组件推荐使用
[
easycom
](
../collocation/pages.md#easycom
)
,无需导入注册)
3.
在ts/uts中,对data的类型进行type定义
1.
引入第三方 js/ts 模块
2.
引入非 easycom 的组件(一般组件推荐使用
[
easycom
](
../collocation/pages.md#easycom
)
,无需导入注册)
3.
在 ts/uts 中,对 data 进行类型定义
4.
定义作用域更大的变量
```
html
...
...
@@ -180,18 +197,21 @@ script中编写脚本,可以通过lang属性指定脚本语言。
</script>
```
开发者应谨慎编写
`export default {}`
外面的代码,这里的代码有2个注意事项:
1.
在应用启动时执行。也就是这里的代码执行时机是应用启动、而不是页面加载。如果这里的代码写的太复杂,会影响应用启动速度和内存占用。
2.
不跟随页面关闭而回收。在外层的静态变量不会跟随页面关闭而回收。
开发者应谨慎编写
`export default {}`
外面的代码,这里的代码有2个注意事项:
1.
影响应用性能。这部分代码在应用启动时执行,而不是页面加载。如果这里的代码写的太复杂,会影响应用启动速度,占用更多内存。
2.
不跟随组件、页面关闭而回收。在外层的静态变量不会跟随页面关闭而回收。如果必要你需要手动处理。比如
`beforeDestroy`
或
`destroyed`
生命周期进行处理。
#### export default 里的代码
`export default {}`
里的内容,是页面的主要逻辑代码。包括几部分:
1.
data:template模板中需要使用的数据。具体
[
另见
](
vue-basics.md#data
)
2.
页面生命周期:如页面加载、隐藏、关闭,具体
[
见下
](
#lifecycle
)
1.
data:template模板中需要使用的数据。具体
[
另见
](
vue-basics.md#data
)
2.
页面生命周期:如页面加载、隐藏、关闭,具体
[
见下
](
#lifecycle
)
3.
methods方法,如按钮点击、屏幕滚动
如下页面代码的逻辑是:
1.
在data中定义了
`title`
,初始值是"点我"
2.
在页面中放置了一个button组件,按钮文字区使用
`{{}}`
模板写法,里面写
`title`
,把data里的
`title`
绑定到按钮的文字区,即按钮的初始文字是"点我"
3.
按钮的点击事件
`@click`
,指向了methods里的一个方法
`buttonClick`
,点击按钮即触发这个方法的执行
...
...
@@ -240,7 +260,7 @@ style的写法与web的css基本相同。
## 页面生命周期@lifecycle
`
`uni-app`
`
页面除支持 Vue 组件生命周期外还支持下方页面生命周期函数,当以组合式 API 使用时,在 Vue2 和 Vue3 中存在一定区别,请分别参考:
[
Vue2 组合式 API 使用文档
](
/tutorial/vue-composition-api.html
)
和
[
Vue3 组合式 API 使用文档
](
/tutorial/vue3-composition-api.html
)
。
`
uni-app
`
页面除支持 Vue 组件生命周期外还支持下方页面生命周期函数,当以组合式 API 使用时,在 Vue2 和 Vue3 中存在一定区别,请分别参考:
[
Vue2 组合式 API 使用文档
](
/tutorial/vue-composition-api.html
)
和
[
Vue3 组合式 API 使用文档
](
/tutorial/vue3-composition-api.html
)
。
|函数名|说明|平台差异说明|最低版本|
|:-|:-|:-|:-|
...
...
@@ -272,7 +292,7 @@ style的写法与web的css基本相同。
所以原生导航栏是最快显示的。页面背景色也应该在这里配置。
2.
根据页面template里的组件,创建dom。
2.
根据页面template里的组件,创建dom。
这里的dom创建仅包含第一批处理的静态dom。对于通过js/uts更新data然后通过v-for再创建的列表数据,不在第一批处理。
...
...
@@ -497,16 +517,18 @@ app.doSomething() // 调用 App.vue methods 中的 doSomething 方法
|page.$getAppWebview()|获取当前页面的webview对象实例|App|
|page.route|获取当前页面的路由|
|
**注意:**
\
``getCurrentPages()``
仅用于展示页面栈的情况,请勿修改页面栈,以免造成页面状态错误。
\
**注意:**
`getCurrentPages()`
仅用于展示页面栈的情况,请勿修改页面栈,以免造成页面状态错误。
\
页面关闭时,对应页面实例会在页面栈中删除。
Tips:
*
``navigateTo``
,
``redirectTo``
只能打开非 tabBar 页面。
*
``switchTab``
只能打开
``tabBar``
页面。
*
``reLaunch``
可以打开任意页面。
*
页面底部的
``tabBar``
由页面决定,即只要是定义为
``tabBar``
的页面,底部都有
``tabBar``
。
*
不能在首页
```onReady```
之前进行页面跳转。
-
`navigateTo`
,
`redirectTo`
只能打开非 tabBar 页面。
-
`switchTab`
只能打开
`tabBar`
页面。
-
`reLaunch`` 可以打开任意页面。
- 页面底部的 `
tabBar
` 由页面决定,即只要是定义为 `
tabBar
` 的页面,底部都有 `
tabBar
`。
- 不能在首页 `
onReady
` 之前进行页面跳转。
### $getAppWebview() @getappwebview
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录