微信小程序联调接口

微信小程序联调接口


在wxml页面中使用wx:for进行列表项循环。
通过data-index={{item.id}}"绑定不同活动项的id,方便点击进行跳转

  <block wx:for="{{form.data}}" wx:key="{{item.id}}">
    <view bindtap = "toDetail" data-index="{{item.id}}" class="activity">
      <view class="background">
        <view class="text">
          {{item.name}}
        </view>
      </view>
      <view class="details">
        <view class="text2">
          <text class="in">{{item.number}}人已参加</text>
          <text class="free">
            <text wx:if="{{item.money == 0}}">
              免费报名
            </text>
          </text>
        </view>
        <view class="text2">{{item.activityAddress}}</view>
        <view class="text2">报名截止时间:{{item.enterEndDate}}</view>
      </view>
    </view>
  </block>

在onload函数中调用接口

onLoad: function (options) {
    app.apiPost({
      url:'接口/findAppletActivityInfo.do'
    }).then((res)=>{
      this.setData({
        form: res
      })
    })
  },

之后在跳转函数中使用接口(接口请求类型为query)
通过e.currentTarget.dataset.index拿到活动的id

toDetail(e){
  let index = e.currentTarget.dataset.index;
  wx.navigateTo({
    url: '接口/detail1/detail1?index='+index
  })
}

再在detail页面通过options.index拿到对应的活动id,调用接口拿到活动详细数据并渲染到页面

onLoad: function (options) {
  const id = options.index;
  app.apiGet({
    url: '接口/findAppletActivityInfoDetails.do?id='+id,
    // data: {
    //   id
    // }
  }).then((res)=>{
    this.setData({
      form: res.data,
      params: id
    })
  })
},

版权声明:本文为weixin_46233266原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。