// pages/home/home.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
      // 存放轮播图数据的列表
      swiperList: [],
      // 存放九宫格数据的列表
      gridList: [],
      /**
  * 页面的初始数据
  */
},
gotoMessage() {
  wx.switchTab({
    url: '/pages/message/message'
  })
},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
      this.getSwiperlist()
      this.getGridList()
  },
  // 获取轮播图数据的方法
  getSwiperlist() {
    wx.request({
      url: 'https://www.escook.cn/slides',// 请求这个地址来拿数据
      method: 'GET',
      success: (res) => {
        console.log(res)
        this.setData({ // 数据拿到后利用这个方法来进行赋值
          swiperList: res.data
        })
      }
    })
  },
  // 获取九宫格数据的方法
  getGridList(){
    wx.request({
      url: 'https://www.escook.cn/categories',
      method: 'GET',
      success: (res) => {
      this.setData({
        gridList: res.data
      })
      }
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  }
})






<!--pages/home/home.wxml-->
<!-- 轮播图区域 -->
<swiper indicator-dots circular autoplay>
<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"></view>
    <image src="{{item.icon}}"></image>
    <text>{{item.name}}</text>
</view>


<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>
<navigator url="/pages/info/info" open-type="navigate">导航到非tabBar页面</navigator>


<button bindtap="gotoMessage">导航到消息页面</button>




具体机型微信版本号什么的我不会看

为啥人家就能实现呢？自学小白表示不理解