【一步步学小程序】1.创建项目以及TabBar

1.创建项目

如图，创建项目，输入项目名称、选择目录，AppID是唯一标识，我们可以先点如图红框内的测试号，自动生成一个AppID，然后点新建即创建完一个新项目。

2.创建3个页面

确保如图左上角的编译器按钮是选中状态，此时我们就可以看到项目的文件结构和编译器

打开app.json文件。所有页面都需要在此json中的pages标签下进行声明。我们看到开发工具已经帮我们创建了两个页面index和logs，但是我们不需要，可以先忽略，在pages中，声明3个新页面：

首页：pages/home/homeMain/homeMain
问答：pages/question/questionMain/questionMain
我的：pages/my/myMain/myMain

通过Command+S (WIndows下是Cotrol+S)保存后，此时再看下目录结构，发现pages目录下多了3个文件夹，正是对应上面3个页面。

我们暂时先不讨论目录中包含的文件。

3.创建Tabbar

上一步已经创建了3个页面，我们创建一个包含这三个页面的tabbar。还是在app.json文件中的pages标签之后，添加如下代码

"tabBar": {"color": "#646565","selectedColor": "#F55D54","borderStyle": "black","list": [{"selectedIconPath": "images/tab/home_selected.png","iconPath": "images/tab/home_unselected.png","pagePath": "pages/home/homeMain/homeMain","text": "首页"},{"selectedIconPath": "images/tab/message_selected.png","iconPath": "images/tab/message_unselected.png","pagePath": "pages/question/questionMain/questionMain","text": "问答"},{"selectedIconPath": "images/tab/me_selected.png","iconPath": "images/tab/me_unselected.png","pagePath": "pages/my/myMain/myMain","text": "我的"}]},

此时app.json文件结构如图：

各个字段的作用如下：

color：tabItem未被选中时的颜色
selectedColor：tabItem被选中时的颜色
borderStyle：tabbar上面的分割线颜色
list：所包含的tabItem的列表
selectedIconPath：tabItem被选中时的图片
iconPath：tabItem未选中时的图片
pagePath：tab对应的页面路径（即上一步创建在pages中添加的页面路径）
text：tabItem对应文字

保存app.json文件，此时模拟器中显示的内容如下图，虽然一行代码没写，但是已经创建好tabbar，并可以在多个tab中切换了，下一节，将介绍如果编写页面内容。

【一步步学小程序】1.创建项目以及TabBar相关推荐

【微信小程序】创建项目
微信小程序创建项目 1.新建项目,选择项目配置 2.查看项目目录 3.json配置文件构成 4.小程序的三大API 5.协同工作和发布 1.新建项目,选择项目配置 2.查看项目目录 pages 用来存 ...
【一步步学小程序】2.列表展示
我们上一节已经创建了一个可以点击切换的tabbar.这节我们开始正式敲代码,在首页上展示一个可以上下滚动的课程列表: 首先打开上一节的pages/home/homeMain/homeMain.wxml ...
【一步步学小程序】3. 使用自定义组件(component)
上一节创建了一个包含多个课程数据的列表.这一节我们用自定义组件(component),来优化列表页面,即如图,我们把每个课程单元格封装为组件. 使用组件的好处: 自定义组件可以在不同的页面中重复使用 ...
微信小程序宠物商城项目源码来了~
微信小程序蒙服汇项目源码来了~ 微信小程序垃圾分类项目源码来了~ 微信小程序校园社团管理系统项目源码来了~ 团队承接各类小程序定制,需要加微 code_gg_boy .小商城,购物,公司的一些管理,流 ...
视频教程-【三月】微信小程序云开发项目实战课程 - T3租机械-微信开发
[三月]微信小程序云开发项目实战课程 - T3租机械宁夏酷申科技有限公司技术总监,计算机专业毕业后一直从事技术开发和架构工作袁永刚 ¥366.00 立即订阅扫码下载「CSDN程序员学院APP」, ...
微信小程序开发15 项目实战基于云开发开发一个在线商城小程序
在学完前 4 个模块之后,我相信你会对微信小程序的开发有一个全新的认识.在前面 3 个模块中,俊鹏分别从微信小程序内在的运行原理,小程序工程化开发以及具体实践层面,深度讲解了微信小程序开发所必要的知识 ...
小程序入门到精通（三）：学小程序必备技术基础-flex布局
学小程序我们需要有点html.css.js基础,而flex布局是我们小程序常用的css布局,学习小程序之前,我们需要了解一些css方面的布局知识-Flex布局,Flex 布局将成为未来布局的首选方案 ...
详解微信小程序开发（项目从零开始）
关注公众号风色年代(itfantasycc) 280G前端&小程序资料随便拿! 详解微信小程序开发(项目从零开始) 一.序微信小程序,估计大家都不陌生,现在应用场景特别多.今天就系统的介绍 ...
【微信小程序】创建动态组件和引用的方法
实战内容:创建微信小程序动态组件并在其他页面中引用该组件欢迎关注收藏订阅专栏!!! 文章目录一.今日实战目标二.实战步骤 1.创建动态组件 2. 局部引用组件 3. 全局引用组件三.注意事项 ...

【一步步学小程序】1.创建项目以及TabBar

1.创建项目

2.创建3个页面

3.创建Tabbar

【一步步学小程序】1.创建项目以及TabBar相关推荐

最新文章

热门文章