标准版uni-app移动端页面添加/开发操作流程

页面简介

uni-app项目中，一个页面就是一个符合Vue SFC规范的.vue文件或.nvue文件。

.vue页面和.nvue页面，均全平台支持，差异在于当uni-app发行到App平台时，.vue文件会使用webview进行渲染，.nvue会使用原生进行渲染。nvue具体介绍及使用方法见： nvue原生渲染

新建页面

uni-app中的页面，通常会保存在工程根目录下的pages目录下。

每次新建页面，均需在pages.json中配置pages列表；未在pages.json -> pages 中配置的页面，uni-app会在编译阶段进行忽略。

pages.json的目录结构

一般主要页面我们放在pages中，

// 例如： 首页、购物车 个人中心等
{
"path": "pages/index/index",  // 该路径需要对应文件 pages中的路径
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom",  
"navigationBarTextStyle": "white",
}
},

而一些业务模块且不是tabbar页面，我们可以在subPackages中创建分包

/// 实例
"subPackages": [{  // 模块分包
"root": "pages/extension",
"name": "extension",
"pages": [{
"path": "customer_list/chat",
"style": {
"navigationBarTitleText": "对话详情",  // 页面title
"navigationStyle": "custom",
"app-plus": {
                        "scrollIndicator": false //禁用原生导航栏,
                        "titleNView": {
                            "type": "default"
                        },
                        "disableScroll": true
                }
}]
}]

应用首页

这里要注意的是uni-app会将pages.json -> pages配置项中的第一个页面，作为当前工程的首页（启动页）。

模板内引入静态资源

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

注意

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

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');

删除页面

删除页面时，需做两件工作：

• 删除.vue文件或.nvue文件
• 删除pages.json -> pages列表项中的配置

原文地址：https://blog.csdn.net/weixin_64051447/article/details/137779870

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！