Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
程序yang
unidocs-zh
提交
95cb76a0
U
unidocs-zh
项目概览
程序yang
/
unidocs-zh
与 Fork 源项目一致
Fork自
DCloud / unidocs-zh
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
95cb76a0
编写于
2月 11, 2022
作者:
hbcui1984
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
add:页面描述、首页配置
上级
f20ad1a8
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
33 addition
and
3 deletion
+33
-3
docs/tutorial/page.md
docs/tutorial/page.md
+33
-3
未找到文件。
docs/tutorial/page.md
浏览文件 @
95cb76a0
## 页面生命周期 @lifecycle
## 页面简介
uni-app项目中,一个页面就是一个符合
`Vue SFC规范`
的
`.vue`
文件或
`.nvue`
文件。
`.vue`
页面和
`.nvue`
页面,均全平台支持,差异在于当uni-app发行到App平台时,
`.vue`
文件会使用webview进行渲染,
`.nvue`
会使用原生进行渲染,详见:
[
nvue原生渲染
](
/tutorial/nvue-outline
)
。
## 新建页面
`uni-app`
中的页面,通常会保存在工程根目录下的
`pages`
目录下。
每次新建页面,均需在
`pages.json`
中配置
`pages`
列表;未在
`pages.json -> pages`
中配置的页面,
`uni-app`
会在编译阶段进行忽略。pages.json的完整配置参考:
[
全局文件
](
/collocation/pages
)
。
通过HBuilderX开发
`uni-app`
项目时,在
`uni-app`
项目上右键“新建页面”,HBuilderX会自动在
`pages.json`
中完成页面注册,开发更方便。
同时,HBuilderX 还内置了常用的页面模板(如图文列表、商品列表等),选择这些模板,可以大幅提升你的开发效率。
<div>
<img
src=
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a90b5f95-90ba-4d30-a6a7-cd4d057327db/068c32c9-874d-48f4-b49a-b6a6c634beda.png"
style=
"max-width:450px"
></img>
</div>
## 删除页面
删除页面时,需做两件工作:
-
删除
`.vue`
文件或
`.nvue`
文件
-
删除
`pages.json -> pages`
列表项中的配置
## 应用首页
`uni-app`
会将
`pages.json -> pages`
配置项中的第一个页面,作为当前工程的首页(启动页)。
## 生命周期 @lifecycle
``uni-app``
支持如下页面生命周期函数:
...
...
@@ -406,7 +436,7 @@ uni-app自带的web-view组件,是页面中新插入的一个子webview。获
20. 目前不支持在 nvue 页面使用 `typescript/ts`。
21. nvue 页面关闭原生导航栏时,想要模拟状态栏,可以[参考文章](https://ask.dcloud.net.cn/article/35111)。但是,仍然强烈建议在 nvue 页面使用原生导航栏。nvue 的渲染速度再快,也没有原生导航栏快。原生排版引擎解析`json`绘制原生导航栏耗时很少,而解析 nvue 的 js 绘制整个页面的耗时要大的多,尤其在新页面进入动画期间,对于复杂页面,没有原生导航栏会在动画期间产生整个屏幕的白屏或闪屏。
## 组件生命周期
<!--
## 组件生命周期
``uni-app`` 组件支持的生命周期,与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期:
...
...
@@ -419,4 +449,4 @@ uni-app自带的web-view组件,是页面中新插入的一个子webview。获
|beforeUpdate|数据更新时调用,发生在虚拟 DOM 打补丁之前。[详见](https://cn.vuejs.org/v2/api/#beforeUpdate)|仅H5平台支持||
|updated|由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。[详见](https://cn.vuejs.org/v2/api/#updated)|仅H5平台支持||
|beforeDestroy|实例销毁之前调用。在这一步,实例仍然完全可用。[详见](https://cn.vuejs.org/v2/api/#beforeDestroy)|||
|destroyed|Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。[详见](https://cn.vuejs.org/v2/api/#destroyed)|||
\ No newline at end of file
|destroyed|Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。[详见](https://cn.vuejs.org/v2/api/#destroyed)||| -->
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录