小程序网络请求实践-优快云博客

小程序学习初尝试

简单介绍这几天学习小程序发起网络请求的整个过程：

首先你需要去小程序的后台去配置你的合法域名:

小程序管理中心—》设置—》开发设置—》服务器域名

2.设置完这个合法域名就可以在程序里进行请求了，关键方法是wx.request，这里要注意请求的方式分为GET和POST有一些区别，还有就是请求要用https的，下面看代码：

 wx.request({
      url: 'https://news-at.zhihu.com/api/4/news/latest',
      header: {
        'Content-Type': 'application/json'
      },
      method: 'GET',
      success: function (res) {
        //填充列表数据
        console.log(res.data);
      }

    })
  }

3.上面就是发送请求的具体方式数据通过res.data拿到，下面就是数据取出来，进行页面上的填充，首先你需要再data:定义变量，然后在把数据赋值上去，在页面上就可以使用了：

 data: { sliderData: {}, //轮播图数据},
 //赋值在
 success: function (res) {
        //填充列表数据
        console.log(res.data);
         sliderData: data.top_stories,
      }

4.这样在页面上就可以直接展示数据了，下面是一个轮播图，就不详细介绍了：

<swiper class="index-swiper" indicator-dots="true" interval="10000" autoplay="true">
    <block wx:key="id" wx:for="{{sliderData}}">
      <swiper-item data-id="{{item.id}}" bindtap="toDetailPage">
        <image mode="aspectFill" src="{{item.image}}" style="width:100%" />
        <view class="mask"></view>
        <view class="desc">
          <text>{{item.title}}</text>
        </view>
      </swiper-item>
    </block>
  </swiper>

5.然后就是点击事件的添加，这里的关键字是bindtap，还有就是要通过记录点击的数据id来进行点击事件的处理，这里是仿照的知乎日报，所以查看新闻详情的时候是会传递过去新闻的id。

6.获取ID的方法就是固定的，拿到ID就可以跳转到相应的详情页，展示内容了

 var id = e.currentTarget.dataset.id;
  wx.navigateTo({
      url: '../detail/detail?id=' + id
    });

结语

就简单介绍一些基础知识；如果有前端基础的同学，应该更得心应手。如有问题欢迎反馈