标准版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.6template内支持@开头路径引入静态资源,旧版本不支持此方式
  • App 平台自HBuilderX 2.6.9template节点中引用静态资源文件时(如:图片),调整查找策略为【基于当前文件的路径搜索】,与其他平台保持一致

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列表项中的配置
相关推荐
陈不知代码6 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
源码_V_saaskw6 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
996幸存者10 小时前
uni-app区域选择、支持静态、动态数据
微信小程序·uni-app
ᥬ 小月亮12 小时前
Uniapp编写微信小程序,绘制动态圆环进度条
微信小程序·小程序·uni-app
耶啵奶膘16 小时前
uniapp+vue3——通知栏标题纵向滚动切换
uni-app
The_era_achievs_hero19 小时前
UniappDay03
vue.js·微信小程序·uni-app
游戏开发爱好者81 天前
没有 Mac,如何上架 iOS App?多项目复用与流程标准化实战分享
android·ios·小程序·https·uni-app·iphone·webview
Python大数据分析2 天前
uniapp之微信小程序标题对其右上角按钮胶囊
微信小程序·小程序·uni-app
一只一只妖2 天前
uniapp小程序上传图片并压缩
小程序·uni-app
顽疲2 天前
从零用java实现 小红书 springboot vue uniapp(14) 集成阿里云短信验证码
java·vue.js·spring boot·阿里云·uni-app