小程序中获取分类页面数据步骤

有的小程序有分类这一项，但位置和方法不相同，这里就将如何获取后台数据并初步渲染说一下

data: {
    // 分类数据
    cates: []
    }

这里cates为什么会是一个数组而不是对象？因为这要根据后台数据文档来定，给的是什么类型，就定义什么类型

定义fetchCatesData函数进行获取数据， wx.request后面有url和成功、失败回调函数，如果数据请求有参数则在data中进行添加

 fetchCatesData() {
    wx.request({
      url: '后台提供的地址链接',
      data:'请求的参数',
      success: res => {
        this.setData({
        //将获取到的数据赋值给cates数组中，随后用于渲染
          cates: res.data.message
        })
      },
      fail: err => {
        console.log('err:', err)
      }
    })
  }

并把fetchCatesData函数定义到onLoad钩子函数中

onLoad(){
	//获取分类的数据
	this.fetchCatesData()
}

到这里就可以在AppData中获取到所返回的数据了
由于小程序页面布局各不相同，这只要进行渲染并获取样式即可完成，在这里附上该分类的结构图

<view class="cates">
  <block wx:for="{{cates}}" wx:key='index'>
    <navigator url="/pages/cates/cates" open-type="switchTab" wx:if='{{item.navigator_url}}'>
      <image src="{{item.image_src}}" />
    </navigator>
    <image wx:else src="{{item.image_src}}" />
  </block>
</view>

block不是一个组件，仅是一个包装元素，不会在页面中渲染，只接受控制属性，可以把if 或则 for 语句写在block标签 ，来控制了这一块的逻辑
navigator的open-type="switchTab"跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
navigator的open-type的四种属性：
navigate 保留当前页面，跳转到应用内的某个页面
redirect 关闭当前页面，跳转到应用内的某个页面
reLaunch 关闭所有页面，打开到应用内的某个页面
switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面