14天速成小程序开发：UniApp入门第一课 - 页面路由与菜单配置

最新推荐文章于 2024-07-06 13:13:33 发布
最新推荐文章于 2024-07-06 13:13:33 发布
阅读量213 收藏 1
点赞数 4
分类专栏： 14天速成小程序开发 文章标签： uni-app vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WYyanyufei/article/details/139317131
版权

14天速成小程序开发

第一章 UniApp入门第一课 - 页面路由与菜单配置

文章目录

前言

我是一名有着 HTML、CSS 和 JavaScript 基础知识的uniapp小白，正在学习小程序开发。
这个系列文章将记录我的学习过程，并分享我的学习心得。
第一篇文章将介绍如何编写小程序底部菜单栏，由于我经验尚浅，如有错误之处，还请大家指正。

一、成果预览

在这里插入图片描述

二、准备工作

1.uniapp官方文档
2.HBuilderX

三、教程

1.新建项目

在这里插入图片描述
在这里插入图片描述

2.pages创建页面目录

在pages中创建几个目录，小程序上就会有几个页面

在这里插入图片描述

新建页面

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

注意删除页面后pages.json上的路径不会删除，要手动处理

3.用tabBar设置底部菜单

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

雁于飞
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-app底部导航栏设置
weixin_44445363的博客
01-27 2066
一、新建需要的页面 二、在pages.json文件里面配置文件页面路由 三、设置底部导航栏 代码： { "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index" }, { "path": "pages/news/index" }, { "path": "pages/my/index" } ], "g
微信小程序学习第一天，第二天
03-29
第一天 全局入口文件 程序入口文件是 app.js，内容可以为空 程序全局信息在 app.json 里配置，包括：路由，界面颜色 程序全局样式在 app.wxss 里配置，内容可以为空 pages 目录 pages/index/index.js let param = { ...
uniapp 自定义写底部导航栏
qq_30405009的博客
08-11 1134
uniapp 自定义写底部导航栏
uniapp底部导航封装
weixin_52103896的博客
07-25 173
自定义uniapp底部导航
[保姆级教程]uniapp实现页面路由配置
肥晨开发的学习之路
06-18 1073
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。弹出弹框，输入页面名称，点击创建。并以此类推完成所有新建页面。在package.json中的pages配置，继续添加即可。输入名称，并以此类推完成所有新建目录。把iconPath改成对应地址就好。右击目录，点击新建–》vue文件。先点击src–》新建–》目录。
uniapp 常用的路由跳转的几种方式（navigateTo、redirectTo...）
huangfuyk.的博客
05-26 2万+
1. uni.navigateTo 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。 示例代码如下： uni.navigateTo({ url:'./home/index' }); 注意： 页面跳转路径有层级限制，不能无限制跳转新页面 跳转到 tabBar 页面只能使用 switchTab 跳转 路由API的目标页面必须是在pages.json里注册的vue页面。如果想打开web url，具体可参考【uniapp官方-路由与页面跳转】 2. uni.n
uniapp从入门到精通（全网保姆式教程）~ 别再说你不会开发小程序了
热门推荐
路漫漫其修远兮，吾将上下而求索
08-20 4万+
为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app约定了如下开发规范：页面文件遵循Vue单文件组件规范组件标签靠近小程序规范，详细见uni-app组件规范接口能力（js api）靠近微信小程序规范，但需将前缀wx替换为uni，详见uni-app接口规范数据绑定及事件处理同Vue.js规范，同时补充了App以及页面的生命周期为兼容多端运行，建议使用flex布局进行开发。
微信小程序开发原生与uniapp框架的选择
创新之芽，科技之梦，我是小土豆，为未来点亮微光。
11-10 3852
微信开发
微信小程序学习之旅--第一个页面的制作
听雨少年的博客
08-24 1707
文章目录微信小程序入门(一)项目结构解读每个文件的功能xxx.js(index.js)文件xxx.json(index.json)xxx.wxml(index.wxml)xxx.wxss(index.wxss)总结文件约定文档结构解读小程序入门删除项目结构小程序页面的搭建技巧和规则新建app.json小程序必备语法1. 如何显示一张图片2. 文本3. 按钮单位rpx完成第一个页面布局配置小程序导航头部样式页面样式页面样式代码 微信小程序入门(一) 项目结构解读 我们发现，页面页面一般有4个文件组成 每个文
程序老鸟C#学习：3天学会全部基础--第一天
空名先生
10-19 1万+
????关于作者 众所周知，人生是一个漫长的流程，不断克服困难，不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考，于是我决定将自己的思考，经验和故事全部分享出来，以此寻找共鸣 ！！！ 专注于Android/Unity和各种游戏开发技巧，以及各种资源分享（网站、工具、素材、源码、游戏等） 有什么需要欢迎私我，交流群让学习不再孤单。 ????前提 自己出身Android开发，因为业务了解也清楚，所以项目开发很快，就决定业余时间学习下其他技术。公司有前端/后端/C++/移动端/动画/模型/硬
淘宝大学：六小灵童5天学会PS第3天修图美化（13课）
07-23
教程名称： 淘宝大学：六小灵童5天学会PS 第3天修图美化（13课）【】六小灵童 30分钟学会PS 图片美化.flv18.1M【】六小灵童 30分钟学会PS 海报设计.flv35.5M【】六小灵童 PS速成 图片美化流程.flv18.8M【】六小灵童...
微信小程序开发教程—逻辑层js详解
03-29
　微信小程序开发框架的逻辑层是由JavaScript编写。在JavaScript的基础上，微信团队做了一些适当的修改，以便提高开发小程序的效率。主要修改包括： 　:diamond_suit: 增加app和page方法，进行程序和页面的注册 　:...
易语言速成班第一期、第二期共计23课
07-23
易语言速成班第一期、第二期共计23课 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
最好的C++入门速成教材，1-2天可看完
05-02
C++是一种强大的、通用的编程语言，被广泛应用于系统软件、游戏开发、应用程序、设备驱动程序等各个领域。它的灵活性和高效性使得它在软件工程中占有重要地位。本教材专注于为初学者提供一个快速而全面的C++入门路径...
uniapp组件通讯
weixin_48811255的博客
07-02 276
uniapp组件通讯
uniapp/Android App上架三星市场需要下载所需要的SDK
骨子里的偏爱
07-04 165
uniapp/Android App上架三星市场需要下载所需要的SDK
uniapp 去掉小数末尾多余的0
最新发布
肥晨开发的学习之路
07-06 242
这个方法中，replace(/0+$/, “”)用于匹配并替换字符串末尾的一个或多个0。欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。以上方法都可以有效去除小数末尾不必要的0，根据具体需求选择适合的方法即可。
java入门使用课件，可自学，可用于教学
11-09
课程内容涵盖了Java就业技能系列中的核心知识点，包括Java基本语法、开发环境配置、数据类型（变量）、流程控制、面向对象编程、常用包、文件操作以及并发编程（多线程）。以下是详细的知识点概览： 1. **开发环境...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值