HiDocs
Search K

Appearance

3.tabBar ​

3.1 什么是 tabBar ​

image-20221001213816490

3.2 tabBar 的 6 个组成部分 ​

image-20221001213828987

3.3 tabBar 节点的配置项 ​

属性类型必填默认值描述
positionString否bottomtabBar 的位置，仅支持 bottom/top
borderStyleString否blacktabBar 上边框的颜色，仅支持 black/white
colorHexColor否tab 上文字的默认（未选中）颜色
selectedColorHexColor否tab 上的文字选中时的颜色
backgroundColorHexColor否tabBar 的背景色
listArray是tab 页签的列表，最少 2 个、最多 5 个 tab

3.4 每个 tab 项的配置选项 ​

属性类型必填描述
pagePathString是页面路径，页面必须在 pages 属性中预先定义（并且必须位于 pages 的前面部分）
textString是tab 上显示的文字
iconPathString否未选中时的图标路径；但当 postion 为 top 时，不显示 icon
selectedIconPathString否选中时的图标路径；但当 postion 为 top 时，不显示 icon

app.json：

json
{
  "pages": [
    "pages/home/home", //导航
    "pages/message/message", //导航
    "pages/contact/contact", //导航
    "pages/index/index",
    "pages/test/test",
    "pages/logs/logs"
  ],
  "tabBar": {
    "list": [
      {
        //tabBar有很多属性，但是至少要包含一个list数组
        "pagePath": "pages/home/home", //对应上面的home
        "text": "首页",
        "iconPath": "/images/tabs/home.png",
        "selectedIconPath": "/images/tabs/home-active.png"
      },
      {
        "pagePath": "pages/message/message", //对应上面的message
        "text": "消息",
        "iconPath": "/images/tabs/message.png",
        "selectedIconPath": "/images/tabs/message-active.png"
      },
      {
        "pagePath": "pages/contact/contact",
        "text": "联系我们",
        "iconPath": "/images/tabs/contact.png",
        "selectedIconPath": "/images/tabs/contact-active.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

4.案例：配置 tabBar ​

4.1 需求描述 ​

image-20221001213927834

4.2 实现步骤 ​

image-20221001214537991

4.3 实现 ​

步骤 1 - 拷贝图标资源

image-20221001214616840

步骤 2 - 新建 3 个对应的 tab 页面

image-20221001214632208

步骤 3 - 配置 tabBar 选项

image-20221001214644392

完整的配置代码

image-20221001214659811

注：tabBar 的好处是，我们只需要配置，而不需要在 wxml 里面写任何内容，即可以实现导航栏！

四、页面配置 ​

1. 页面配置文件的作用 ​

小程序中，每个页面都有自己的 .json 配置文件，用来对当前页面的窗口外观、页面效果等进行配置。

2. 页面配置和全局配置的关系 ​

image-20221001214741462

3. 页面配置中常用的配置项 ​

与全局的 window 配置类似

属性类型默认值描述
navigationBarBackgroundColorHexColor#000000当前页面导航栏背景颜色，如 #000000
navigationBarTextStyleStringwhite当前页面导航栏标题颜色，仅支持 black / white
navigationBarTitleTextString当前页面导航栏标题文字内容
backgroundColorHexColor#ffffff当前页面窗口的背景色
backgroundTextStyleStringdark当前页面下拉 loading 的样式，仅支持 dark / light
enablePullDownRefreshBooleanfalse是否为当前页面开启下拉刷新的效果
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离，单位为 px

message.json：

json
{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#ff0000",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "消息页面",
  "backgroundColor": "#ff0000",
  "backgroundTextStyle": "light",
  "enablePullDownRefresh": true
}

五、网络数据请求 ​

1.小程序中网络数据请求的限制 ​

image-20221001214854768

只能请求 https 的接口，意味着只能使用域名接口

2.配置 request 合法域名 ​

image-20221001214910466

image-20221002165252715

3.发起 GET 请求 ​

wx 对象：是一个顶级全局对象

image-20221001214927739

例子：

js
// pages/home/home.js
Page({
  /**
   * 页面的初始数据
   */
  data: {},

  // 发起GET数据请求
  getInfo() {
    wx.request({
      url: "https://www.escook.cn/api/get",
      method: "GET",
      data: {
        name: "zs",
        age: 20,
      },
      success: (res) => {
        console.log(res.data); //res.data才是数据
      },
    });
  },

  // 发起POST请求
  postInfo() {
    wx.request({
      url: "https://www.escook.cn/api/post",
      method: "POST",
      data: {
        name: "ls",
        age: 33,
      },
      success: (res) => {
        console.log(res.data);
      },
    });
  },
});

4.发起 POST 请求 ​

image-20221001214945408

5.在页面刚加载时请求数据——生命周期函数 ​

image-20221001214959693

js
// pages/home/home.js
Page({
  /**
   * 页面的初始数据
   */
  data: {},

  // 发起GET数据请求
  getInfo() {
    wx.request({
      url: "https://www.escook.cn/api/get",
      method: "GET",
      data: {
        name: "zs",
        age: 20,
      },
      success: (res) => {
        console.log(res.data);
      },
    });
  },

  // 发起POST请求
  postInfo() {
    wx.request({
      url: "https://www.escook.cn/api/post",
      method: "POST",
      data: {
        name: "ls",
        age: 33,
      },
      success: (res) => {
        console.log(res.data);
      },
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getInfo();
    this.postInfo();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},
});

6.跳过 request 合法域名校验 ​

image-20221001215013740

只有在开发阶段可以用 http，部署了还是必须要用 https！

7.关于跨域和 Ajax 的说明 ​

image-20221001215029134

小程序不叫 ajax 请求，而是网络数据请求！

六、案例 - 本地生活 ​

1.首页效果以及实现步骤 ​

image-20221001215106531

2.接口地址 ​

image-20221001215130028

3.具体实现 ​

3.1 全局配置 ​

app.json

json
{
  "pages": [
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact" //联系我们
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "本地生活",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "/images/tabs/home.png",
        "selectedIconPath": "/images/tabs/home-active.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "/images/tabs/message.png",
        "selectedIconPath": "/images/tabs/message-active.png"
      },
      {
        "pagePath": "pages/contact/contact",
        "text": "联系我们",
        "iconPath": "/images/tabs/contact.png",
        "selectedIconPath": "/images/tabs/contact-active.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

3.2 具体页面 ​

home.wxml

html
<!--pages/home/home.wxml-->
<!-- 轮播图区域，indicator-dots circular属性-->
<swiper indicator-dots circular>
  <swiper-item wx:for="{{swiperList}}" wx:key="id">
    <image src="{{item.image}}"></image>
  </swiper-item>
</swiper>

<!-- 九宫格区域 -->
<view class="grid-list">
  <view class="grid-item" wx:for="{{gridList}}" wx:key="id">
    <image src="{{item.icon}}"></image>
    <text>{{item.name}}</text>
  </view>
</view>

<!-- 图片区域 -->
<view class="img-box">
  <image src="/images/link-01.png" mode="widthFix"></image>
  <image src="/images/link-02.png" mode="widthFix"></image>
</view>

home.wxss

css
/* pages/home/home.wxss */
swiper {
  height: 350rpx;
}

swiper image {
  width: 100%;
  height: 100%;
}

.grid-list {
  /*外层*/
  display: flex;
  flex-wrap: wrap;
  border-left: 1rpx solid #efefef;
  border-top: 1rpx solid #efefef;
}

.grid-item {
  /*内层*/
  width: 33.33%;
  height: 200rpx;
  display: flex; /*伸缩盒布局，为了让内容方便布局*/
  flex-direction: column; /*纵向布局*/
  align-items: center; /*居中*/
  justify-content: center; /*居中*/
  border-right: 1rpx solid #efefef; /*右侧边框*/
  border-bottom: 1rpx solid #efefef;
  box-sizing: border-box; /*改成怪异盒模型*/
}

.grid-item image {
  width: 60rpx;
  height: 60rpx;
}

.grid-item text {
  font-size: 24rpx;
  margin-top: 10rpx;
}

.img-box {
  display: flex;
  padding: 20rpx 10rpx;
  justify-content: space-around; /*把10%的距离平分*/
}

.img-box image {
  width: 45%; /*让其留出10%的距离*/
}

home.js

js
// pages/home/home.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 存放轮播图数据的列表
    swiperList: [],
    // 存放九宫格数据的列表
    gridList: [],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getSwiperList();
    this.getGridList();
  },

  // 获取轮播图数据的方法
  getSwiperList() {
    wx.request({
      url: "https://www.escook.cn/slides",
      method: "GET",
      success: (res) => {
        this.setData({
          swiperList: res.data,
        });
      },
    });
  },

  // 获取九宫格数据的方法
  getGridList() {
    wx.request({
      url: "https://www.escook.cn/categories",
      method: "GET",
      success: (res) => {
        this.setData({
          gridList: res.data,
        });
      },
    });
  },
});

总结

image-20221001215148797