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

以你之姓@ 2024-04-29 19:24 142阅读 0赞

### 页面简介 ###

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

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

### 新建页面 ###

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

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

![image.png][]

`pages.json`的目录结构

![b8508202212131222091071.png][]

一般主要页面我们放在`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`列表项中的配置![5f8a749ed3104c13b518e79082a91d83.jpeg][]

[nvue]: https://uniapp.dcloud.net.cn/tutorial/nvue-outline
[image.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/74ac4c9ea92d48979716a727a3a86322.png
[b8508202212131222091071.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/e5c0977aa54a4152860f3f68a25eceae.png
[5f8a749ed3104c13b518e79082a91d83.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/79d7ece6ac9d4c4ab780215ef08edd2b.jpeg