微信小程序笔记（一）服务端Get数据和带参数的页面跳转

算是第二回接触小程序了吧，版本更新了很多，要求也越来越高，我还在原地踏步的样子，闲话不多说，先感谢博主lyanjun的https://blog.csdn.net/baidu_32377671/article/details/80849649文章，我是参照他的步骤做下来的，使用微信开发者工具，中间遇到一些问题，记录以备后用

1、创建文件

界面	功能
test	列表界面
detail	详情界面

test.json和detail.json的配置，参照博主的设置。

test.json

{
  "navigationBarTitleText": "图片列表"
}

detail.json

{
  "navigationBarTitleText": "详情界面"
}

2、显示列表

// pages/pic/list.js
let pageNum;
Page({
    /**
     * 页面的初始数据
     */
    data: {
        imgs: []
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        pageNum = 1;
        this.mineFunction();
    },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log("上拉");
    pageNum++;
    this.mineFunction();
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  /**
     * 请求数据
     */
    mineFunction: function () {
      var that = this;
      wx.request({
          url: 'https://gank.io/api/v2/data/category/Girl/type/Girl/page/' + pageNum +'/count/10',
          success (res) {
                let list = res.data.data;
                let listData = that.data.imgs; //拿到绑定的数据源
                list.forEach((values) => listData.push(values)); //遍历下载的数据
                console.log(listData);
                that.setData({
                    imgs: listData //更新数据源
                })
          },
          fail: function() {
            // fail
            console.log('Get Fail');
          },
          complete: function() {
            // complete
            console.log('Get Comlete');
          }
      });
  },

  /**
   * item点击事件
   * @param e
   */
  itemClick: function (e) {
      let position = e.currentTarget.dataset.pos;
      console.log("点击了第【" + position + "】" + "个元素");
      let item = e.currentTarget.dataset.item;
      wx.navigateTo({//跳转界面
          url: `../pic/detail?pos=${position}&item=${JSON.stringify(item)}`
      });
  }
})

主要是这个页面出现问题，起因是干货集中营的API更新了，https://gank.io/api，重新编辑了一下，原来的imgs的调用，this.data.imgs和this.setData一直说没定义，查阅发现需要用var that=this;再调用that来使用就没了问题。

 

其他也没什么改动了，发一下效果