uniapp 创建新页面 以及新页面的配置

于 2024-07-25 15:44:04 发布
阅读量87 收藏
点赞数 2
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzz1780340/article/details/140664312
版权

在pages文件夹中新建--目录---创建文件名

然后在这个目录之下创建vue文件：---右击新建-----vue文件

此时就新建好了，之后呢 我们刷新项目是看不到的，所以我们需要再page.json中设置我们的配置项，最主要的就是页面的路径，其余的话根据需求，但是要想在项目中启动中显示的话 可以将此页面的配置项放在pages数组中的第一项。如图所示：


全局中的页面设置在页面中也是都可以设置的  就不一一赘述了，同时要注意页面设置中的style是会将全局设置覆盖掉的。

但是页面设置中可以单独的为h5页面特定设置

别发呆了吧
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp主页面示例.rar
05-21
uniapp
uniapp - 新建页面与tabBar配置
最新发布
qq_36782325的博客
05-16 836
目标是创建一个文章模块的页面和底部tab按钮。
UniApp个人总结：新建页面大汇总
qq_44695769的博客
06-07 1275
还有就是,uniapp自己把交互反馈封装好了，这个我很推荐，因为很多时候我们都需要交互反馈，这么好又方便的东西。uniapp交互反馈如果需要数据库封装的，可以找我之前的文章uniapp sqlite数据库封装设计总结（完结篇）
UniApp 使用命令创建页面的详细指南
pleaseprintf的博客
08-14 1544
UniApp是一款跨平台的前端框架，可以用于开发同时运行在多个平台（如微信小程序、H5、App等）的应用程序。本文将详细介绍如何使用命令来在UniApp中创建新页面，以及一些常见的页面创建命令。通过本文，你已经学会了如何使用命令在UniApp中创建新页面。这将大大提高开发效率，帮助你快速搭建跨平台应用程序的页面。希望本文对你在使用UniApp开发过程中有所帮助。如果你有任何问题或疑问，欢迎留言讨论。
uniapp简单页面操作：创建与跳转
qq_43474235的博客
08-27 639
在页面目录（pages），鼠标右键点击,即可进入新建页面面板。详细界面如下：页面创建成功后，会自动创建页面信息到页面配置文件。
【零基础学会uniapp】第五课：添加新的页面
jysf98746的博客
02-08 1693
H5端调用uni.reLaunch之后之前页面栈会销毁，但是无法清空浏览器之前的历史记录，此时navigateBack不能返回，如果存在历史记录的话点击浏览器的返回按钮或者调用history.back()仍然可以导航到浏览器的其他历史记录。uni.navigateTo 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。选择是否在pages.json中进行注册，注意：所有需要单独显示的页面，都必须在这里进行注册，否则无法显示。关闭当前页面，跳转到应用内的某个页面。
基于uniapp项目进行开发的纯页面
04-13
标题中的“基于uniapp项目进行开发的纯页面”意味着这个项目是使用uni-app框架构建的，它是一个多端开发框架，允许开发者用一套代码编写应用，可以发布到iOS、Android、Web（H5）、微信小程序、支付宝小程序等多个...
移动端uniapp(个人笔记,新手向)
10-31
在uniapp中，开发者主要通过编写Vue.js风格的JSX代码来创建组件和页面。这些代码会被编译成原生的iOS和Android代码，确保了良好的性能表现。uniapp还提供了丰富的API接口，可以直接调用设备功能，如定位、相机、蓝牙...
uniapp + uviewui2 架构
02-27
【标签】"最新uniapp开发模板"表明这是一个基于最新uniapp版本的开发模板，可能包含了最新的特性和优化，为开发者提供了一个快速启动新项目的基础。这样的模板通常会遵循最佳实践，包括但不限于目录结构、api管理、...
uniapp引入Dplayer.js以及hls.js用来解析播放m3u8直播流视频
11-15
在上面的代码中，我们创建了一个DPlayer实例，并配置了视频源（m3u8 URL）、自动播放、关闭弹幕、设置主题颜色以及开启直播模式。同时，我们还配置了hls.js的相关参数，如启用hls、关闭调试信息和自动选择最高清晰度...
前端学习（2347）：创建新页面和配置
歌谣的博客
10-04 748
pages.json { "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path" : "pages/message/message", "style" : { "navigationBarTitleText": "信息页", "navigationBarBackgroundColor": "#7FFF00", "h5":{ ..
uni-app新建页面
xiaowude_boke的博客
12-28 1298
uniapp 新建页面
探讨uniapp的页面问题
一个搬砖工人
08-26 2085
接下来我们介绍onLoad、onReady、onShow的先后关系，页面加载的详细流程。uni-app框架，首先根据pages.json的配置，创建页面。所以原生导航栏是最快显示的。页面背景色也应该在这里配置。根据页面template里的组件，创建dom。这里的dom创建仅包含第一批处理的静态dom，对于通过js更新data，然后通过v-for再创建的列表数据，不在第一批处理。要注意一个页面静态dom元素过多，会影响页面加载速度。
uni-app之flex布局教程 uniapp在线教程 uni app视频教程
04-17
讲解uni-app中如何使用flex的布局，uni-app中原生界面开发必学技能讲解了flex的容器属性讲解了flex的项目属性
Uni-app笔记 创建页面和页面配置、配置基本tabbar
u013470619的博客
09-19 2284
1、创建页面 在pages文件夹右击新建页面即可 选择创建同名目录会自动放在单独文件夹中 选择注册到pages.json会自动注册页面地址 你也可以选择使用sass 或者 scss的模板 2、页面引用 pages中pages属性下第一项为首页 如果想要让一个页面作为首页，路径写在最上即可 你的页面创建完成后如果你没有勾选自动注册，那么你需要手动去pages的pages属性下配置文件路径 你可以参照文档 设置每一个页面的单独样式 3、tabbar底部导航 tabbar一般为底部...
Android实战跑腿项目——gradle配置
aming小老弟
08-27 608
QQ 1274510382 Wechat JNZ_aming 商业联盟 QQ群538250800 技术搞事 QQ群599020441 解决方案 QQ群152889761 加入我们 QQ群649347320 共享学习 QQ群674240731 纪年科技aming 网络安全 ,深度学习,嵌入式,机器强化,生物智能,生命科学。 ...
uni-app的第一个程序
实践求真知
09-01 851
一官网 http://uniapp.dcloud.io/ 二环境搭建 1HBuilder：前端开发工具 2微信开发者工具：微信小程序运行环境 下载地址： https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 三入门项目 新建项目 四运行方式 1在google浏览器运行 运行位置 运行效果 2在微信开发者工具中运行 运行位置 运行效果 3运行在手机中 ...
uni-app 页面跳转
热门推荐
Lee的博客
06-15 19万+
今天看Dcloud官网更新了个uni-app，据说一套代码三端发布（Android,iOS,微信小程序），果断一试。 uni.navigateTo(OBJECT) 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。 OBJECT参数说明 参数 类型 必填 说明 url String 是 需要跳转的应用内非...
uniapp创建新页面
09-06
要在UniApp中创建新页面，您可以按照以下步骤操作： 1. 在您的项目中找到 `pages` 文件夹，并在其中创建一个新的文件夹，以表示您的新页面。例如，如果您希望创建一个名为 `about` 的页面，则可以在 `pages` 文件夹中创建一个名为 `about` 的文件夹。 2. 在新创建的文件夹中，您需要创建三个文件：`.vue` 文件、`.json` 文件和 `.js` 文件。这些文件将分别用于页面的布局、配置和逻辑。 - `.vue` 文件是页面的布局文件，您可以使用 Vue.js 的语法在其中编写页面的 HTML 结构和样式。 - `.json` 文件是页面的配置文件，您可以在其中指定页面的标题、路由等信息。 - `.js` 文件是页面的逻辑文件，您可以在其中编写页面的行为和交互逻辑。 3. 编辑您创建的这些文件，根据需要添加所需的代码和内容。 4. 在您的项目的 `pages.json` 文件中，找到 `pages` 属性，并将您新创建的页面路径添加到其中。例如，如果您创建了一个名为 `about` 的页面文件夹，则可以将 `"pages/about/about"` 添加到 `pages.json` 中。 完成以上步骤后，您就成功创建了一个新页面。您可以在该页面的 `.vue` 文件中编写页面布局和样式，`.json` 文件中配置页面信息，`.js` 文件中编写页面逻辑。然后，您可以在应用中导航到这个新页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值