知乎Live全文搜索之微信小程序实战(二)

{% raw %}
const App = getApp(); // sdk提供的
const api = require('../../utils/api.js');  // 用require语句加载模块，相对路径
const util = require('../../utils/util.js');

const formatTime = util.formatTime;

Page({  // Page是sdk提供的
  data: {  // 模板用到的数据都在data下
    lives: [], 
    start: 0,
    limit: 20,
    loading: false,
    windowWidth: App.systemInfo.windowWidth,
    windowHeight: App.systemInfo.windowHeight,
  },
  onLoad() {  // Page自带的生命周期函数，监听页面加载。其他的生命周期可以看官方文档啦
    this.loadMore(); // 加载页面就会通过loadMore加载数据
  },
  onPullDownRefresh() { // 另外一个Page自带的生命周期函数，监听用户下拉动作
    this.loadMore(null, true);
  },
  loadMore(e, needRefresh) {
     ...// 加载数据的逻辑，下面再聊
  },
  onViewTap(e) { // 模板绑定的bindtap/catchtap事件就会执行这个函数
    const ds = e.currentTarget.dataset; // 查找模板对应div的数据集，也就是那些'data-'开头的属性，比如上面的「data-id="{{ live.id }}" data-type="live"」,这里会能找到ds.id和ds.type了
    const t = ds['type'] === 'live' ? 'live/live' : 'users/user' // ds.type 和 ds['type'] 一样的用
    wx.navigateTo({ // 是sdk提供的一个界面API，表示在新窗口打开页面
      url: `../${t}?id=${ds.id}`,
    });
  },
});
{% endraw %}

Page({
  data: {
    lives: [],
    start: 0,
    limit: 20,
    loading: false,
    ....

loadMore(e, needRefresh) {
    const self = this;
    const loading = self.data.loading;
    const data = {
      start: self.data.start,
    };
    if (loading) {
      return;
    }
    self.setData({
      loading: true,
    });
    api.explore({
      data,
      success: (res) => {
        let lives = res.data.rs;
        lives.map((live) => {
          const item = live;
          item.starts_at = formatTime(new Date(item.starts_at * 1000), 1);
          return item;
        });
        if (needRefresh) {
          wx.stopPullDownRefresh();
        } else {
          lives = self.data.lives.concat(lives);
        }
        self.setData({
          lives: lives,
          start: self.data.start + self.data.limit,
          loading: false,
        });
      },
    });
  },

const apiURL = 'http://localhost:8300/api/v1';

const wxRequest = (params, url) => {
  wx.request({
    url,
    method: params.method || 'GET',
    data: params.data || {},
    header: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    success(res) {
      if (params.success) {
        params.success(res);
      }
    },
    fail(res) {
      if (params.fail) {
        params.fail(res);
      }
    },
    complete(res) {
      if (params.complete) {
        params.complete(res);
      }
    },
  });
};

const explore = (params) => {
  wxRequest(params, `${apiURL}/explore`);
};
const getLiveInfoById = (params) => {
  wxRequest({ success: params.success }, `${apiURL}/live/${params.data.id}`);
};

module.exports = {
  explore,
  getLiveInfoById,
  ...
};

{% raw %}
<view class="m-live" bindtap="onViewTap" data-id="{{ live.id }}" data-type="live">
...
<view class="info">
  ..
  <view class="rating">
    ..
    <view catchtap="onViewTap" data-id="{{ live.speaker.id }}" data-type="user" class="user">
...
{% endraw %}

onViewTap(e) {
  const ds = e.currentTarget.dataset;
  const t = ds['type'] === 'live' ? 'live/live' : 'users/user'
  wx.navigateTo({
    url: `../${t}?id=${ds.id}`,
  });
},

export default class Index extends Page {

  data = {
    userInfo: {}
  };
  bindViewTap () {
    console.log('Button Clicked');
  };
  onLoad() {
    console.log('OnLoad');
  };
}

export function gen_page(type) {
  return {
    data: {
      lives: [],
      ...
    },
    onLoad() {
      ...
      api[`getHotBy${type}ly`]({
        success: (res) => {
        ...
        }
      });
    },
    onChangeTab(e) {
      const ds = e.currentTarget.dataset;
      if (type == 'Month' && ds.type == 'Week') {
        wx.navigateBack('../hot/weekly');
      } else {
        wx.navigateTo({
          url: `../hot/${ds.type.toLowerCase()}ly`,
        });
      }
    },
  },
  ...
}

const lib = require('./lib.js');

Page(lib.gen_page('Week'));