1. tabBar

tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中的tabBar有在顶部的，也有在底部的，以底部为多。

在小程序中通过点击tabBar，可以切换到不同页面。一个小程序中，tabBar最少2个，最多5个。

app.json文件初始内容。

{"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle":"black"},"style": "v2","sitemapLocation": "sitemap.json"
}

"window"用于配置页面的顶部导航。

  "window": {"backgroundTextStyle": "light",  //下拉刷新的文字颜色"navigationBarBackgroundColor": "#fff",  //顶部背景"navigationBarTitleText": "Weixin",  //标题文字内容"navigationBarTextStyle": "black"  //标题文字颜色},

app.json相当于路由配置文件，pages/index文件夹表示首页。

2. 运行多页面

1. 新建文件夹

在pages目录下右键选择“新建文件夹”并命名为abc，将创建与index文件夹同级的abc文件夹。

2. 新建页面

在abc文件夹下右键选择“新建Page”并命名为abc，abc文件夹将生成abc.js文件、abc.json文件、abc.wxml文件和abc.wxss文件。并且，非常重要的是，app.json文件的“pages”内容将发生修改。

3. 准备图标文件

新建的tabBar加上原来的首页，我们现在需要为这两个页面提供点击时用到的图标。因为图标有选中和非选中两个状态，所以我们需要为两个tabBar准备两种状态的图标，即四个图标。

图标的尺寸大小要求通过查阅官网可知为81*81px。

https://developers.weixin.qq.com/miniprogram/dev/api/ui/tab-bar/wx.setTabBarItem.html#%E5%8F%82%E6%95%B0

（1）在与pages同级的位置，即项目文件夹（我们这里是CHECK05）下右击，选择新建文件夹，命名为“static”。

（2）在static文件夹下右击，选择”新建文件夹”，命名为“images”。

（3）在images文件夹下保存如下4个图片，尺寸为81*81px，分别是tab_home_selected.png、 tab_home.png、tab_my_selected.png和tab_my.png。

（4）修改app.json文件，写入“tabBar”。

根据语法要求，在文件的倒数第二行"sitemapLocation": "sitemap.json"后面写上“,”然后换行，写入tabBar内容。

即从sitemapLocation这行到文件最后一行显示如下。

{
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/abc/abc"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor":"#fff",
"navigationBarTitleText":"Weixin",
"navigationBarTextStyle":"black"
},
"style":"v2",
"sitemapLocation":"sitemap.json",
"tabBar":{
"color":"#333",
"selectedColor":"#d43c33",
"backgroundColor":"#fff",
"position":"bottom",
"list":[
{
"pagePath":"pages/index/index",
"text":"主页",
"iconPath":"pages/static/images/tab_home.png",
"selectedIconPath":"pages/static/images/tab_home_selected.png"
},
{
"pagePath":"pages/abc/abc",
"text":"个人中心",
"iconPath":"pages/static/images/tab_my.png",
"selectedIconPath":"pages/static/images/tab_my_selected.png"
}
]
}
}

注意这里请在英文输入法状态下操作，否则可能会导致输入了中文空格而报错，并且不好排查。

为了避免粘贴后有中文空格导致报错，我把空格都删除了。

编译成功后底部显示两个导航，“主页”和“个人中心”显示效果如下。

（二）运行微信小程序：单页面和多页面相关推荐

HBuilder X下载安装，运行微信小程序教程（官网）
HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE. [1] HBuilder的编写用到了Java.C.Web和Ruby.HBuilder本身主体是由Java编写. ...
关于微信小程序“南安明朗教育”活动页面错误问题记录
关于微信小程序"南安明朗教育"活动页面错误问题记录关于微信小程序"南安明朗教育"活动页面错误问题记录你好! 这是一遍关于南安明朗教育的微信小程序问题解决的日 ...
uniapp HBuilder 无法运行微信小程序的问题解决
uniapp HBuilder 无法运行微信小程序的问题解决一.问题描述当在 HBuilder 中新建一个空白项目,以微信小程序运行的时候,提示以下信息且没有运行成功. 二.原因原因其实已经在错 ...
HBuilder开发工具运行微信小程序模拟器详细步骤流程
这个问题大家可以不看API.API上一堆命令什么的.只是启动模拟器的话还用不到那么复杂.实际操作只需要两三步而已打开HBuilder在这个地方选微信开发者工具一般来说下方这个地方报错,然后给你一堆 ...
小程序跳到h5页面_微信小程序跳转到H5页面实战篇
有些场景需要从微信小程序跳转到H5页面,通常网上的教程会告诉你使用web-view组件就可以了,但实际开发中还有很多需要注意的地方,尤其是很多概念往往会把初学者弄糊涂了,下面就让我们从概念开始吧!微信 ...
微信小程序页面生成html,微信小程序教程系列之新建页面（4）
例如在web的开发中,新建一个页面只需要新建一个html文件即可. 但是到在微信小程序中,新建一个页面也不只是新建一个wxml文件,那么该如何做呢?下面我们一起来学习新建一个页面的步骤: 1> ...
微信小程序获取windowHeight出现不同页面高度不一致问题及解决方案
微信小程序获取windowHeight出现不同页面高度不一致问题及解决方案参考文章: (1)微信小程序获取windowHeight出现不同页面高度不一致问题及解决方案 (2)https://www. ...
微信小程序 - 自定义组件中类似页面 onShow 的页面显示就触发的生命周期钩子函数（页面回退时更新数据常用, 例如回退页面更新子组件数据, 回退更新子组件中 data 内容）
前言在微信小程序中,用户回退页面触发更新数据的操作,一般都是在页面 onShow() 中写上执行更新的函数即可. 但如果咱们把数据和方法都写在了自定义子组件中,那么用户回退页面时, 更新数据就成了 ...
uniApp和微信小程序好看的我的页面（有源码）
uniApp和微信小程序好看的我的页面(有源码) 1.先睹为快未登录状态以登录 uniapp源码 <template><view class="content" ...
微信小程序中使用全局变量解决页面的传值问题
微信小程序中使用全局变量解决页面的传值问题由于项目需要,最近便在做一个类似于美团的餐饮平台的的微信微信小程序 ,项目有十几个页面,那么页面间的传值被经常用到.在小程序中页面间的传值主要有使用全局变 ...

（二）运行微信小程序：单页面和多页面

1. tabBar

（二）运行微信小程序：单页面和多页面相关推荐

最新文章

热门文章