小程序demo实践（一）

「这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战」

demo实践

通过前几篇的学习，今天结合之前的知识点做一个简单的页面

首页效果及实现步骤

• 梳理项目结构
• 配置导航栏效果
• 配置tabBar效果
• 实现轮播图效果
• 实现九宫格效果
• 实现图片布局

---

梳理项目结构

• 新建三个页面，分别是首页、消息、联系我们。在项目 app.json 文件，pages节点中新建三个文件路径

  "pages":[
      "pages/home/home",
      "pages/message/message",
      "pages/contact/contact"
  ],
  

---

配置导航栏效果

• 修改导航栏背景颜色

• 修改标题内容

• 修改标题颜色

  在项目 app.json 文件中，window节点中修改相关三个属性

  

---

配置tabBar效果

• 添加tabBar图片资源

• 添加tabBar三个选项，并添加首页、消息、联系我们三个选项。在项目 app.json 文件中，与window节点平级下，新建 tab 节点，并设置首页、消息、联系我们三个选项

  "window":{
      "backgroundTextStyle":"light",
      "navigationBarBackgroundColor": "#2b4b6b",
      "navigationBarTitleText": "本地生活",
      "navigationBarTextStyle":"white"
  },
  

---

实现轮播图效果

• 获取轮播图数据列表的接口

  GET请求： www.escook.cn/slides

  getSwiperList(){
      wx.request({
          url: 'https://www.escook.cn/slides',
          method:"Get",
          success: (res) => {
              this.setData({
                  swiperList:res.data
              })
          }
      })
  },
  

• 渲染轮播图的效果

  <swiper indicator-dots circular>
      <swiper-item wx:for="{{swiperList}}" wx:key="id">
          <image src="{{item.image}}" ></image>
      </swiper-item>
  </swiper>
  

---

实现九宫格效果

• 获取九宫格数据列表的接口

  GET请求： www.escook.cn/categories

  getGridList(){
      wx.request({
          url: 'https://www.escook.cn/categories',
          method:"Get",
          success:(res)=>{
              this.setData({
                  gridList:res.data
              })
          }
      })
  },
  

• 渲染九宫格效果

  页面结构

  <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>
  

  样式结构

  .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;
  }
  

---

实现图片布局

页面结构

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

样式结构

.img-box {
    display: flex;
    padding: 20rpx 10rpx;
    justify-content: space-around;
}

.img-box image {
    width: 45%;
}