微信小程序抖音实战-首页(下)

上节讲了页面的布局和样式,本节主要是内容数据的获取

抖音的数据接口需要微信的AppId和Secret来获取用户OpenId所以需要先到控制台设置一下这两个参数

首先打开官网

http://100boot.cn 点击抖音案例下面的进一步了解

使用静默登录接口

因为小程序的每个页面都可以当做是入口进入,app.js 会在每个页面进入之前调用,所以我们在这里做一个获取用户编号的操作

const api = require('utils/api.js');
//app.js
App({
  
  globalData: {
    userInfo: null
  },

  onLaunch: function (options) {
    console.log('app onLaunch')
    console.log(options)
    var that = this;
    api.login(function (loginRes) {
      that.globalData.isLogin = true;
      if (that.onLogin) {
        that.onLogin();
      }
    })
  }
})

查询推荐的抖音内容

进入我们的subject.js ,这个页面的思路如下

  1. 进入页面默认加载10条抖音推荐内容并显示第一条抖音
  2. 上翻操作时判断剩余抖音条数
  3. 补充更多的抖音内容

好了看下代码的实现过程
在 onLoad 中查询第一次的抖音内容

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    // 登录回调
    if (app.globalData.isLogin) {
      this.loadFirstData();
    } else {
      app.onLogin = function () {
        that.loadFirstData();
      }
    }
  },

获取到数据后放到subjectList中做缓存

loadFirstData: function (success) {
    var that = this;
    console.log("load subject page " + that.data.page);

    api.getRecommendList({
      data: {
        page: that.data.page,
        rows: 10,
        type: 'image'
      },
      success: function (res) {
        var list = res.content;
        var listData = [];
        for (var i = 0; i < that.data.subjectList.length; i++) {
          listData.push(that.data.subjectList[i])
        }
        for (var i = 0; i < list.length; i++) {
          listData.push(list[i])
        }
        var subject = listData[0];
        subject.play = subject.type == 'video';
        that.setData({
          count: res.count,
          pages: res.pages,
          subject: subject,
          subjectList: listData
        })
        if (success) {
          success();
        }
      }
    })
  },

每次翻页的时候修改页码

onScrollLoad: function () {
    var page = this.data.talkPage;
    if (this.data.talkPage < this.data.talksPages) {
      page--;
    } else {
      page = this.data.talksPages;
    }
    this.setData({
      talkPage: page
    })
    this.loadTalks();
  },

点击刷新按钮的时候重新获取数据

reload: function (e) {
    this.setData({
      page: 1,
      current: 0,
      subjectList: []
    })
    this.loadFirstData();
  },

ajax.js 工具类

这个工具类主要就是对我们的每个请求做个简单的封装处理,比如每次请求需要拼接上服务的主路径serverPath 还要拼接上用户登录返回的token,以及Key 值,异常消息的处理等

var serverPath = 'https://100boot.cn/douyin/';
const key = '<填写你的Key>';
// common.js
function request(opt) {
  // set token
  var token = wx.getStorageSync("token");
  if (token && opt.url.indexOf('token=') == -1) {
    if (opt.url.indexOf('?') == -1) {
      opt.url += "?token=" + token;
    } else {
      opt.url += "&token=" + token;
    }
  }
  if (key && opt.url.indexOf('key=') == -1) {
    if (opt.url.indexOf('?') == -1) {
      opt.url += "?key=" + key;
    } else {
      opt.url += "&key=" + key;
    }
  }
  wx.showNavigationBarLoading();
  wx.request({
    method: opt.method || 'GET',
    header: {
      token: token || ''
    },
    url: serverPath + opt.url,
    data: opt.data,
    success: function (res) {
      if (res.statusCode == 200) {
        if(res.data.code == 100){
          if (opt.success) {
            opt.success(res.data.result, res.data);
          }
        }else{
          console.warn(res.data);
          wx.showModal({
            content: res.data.message,
            showCancel: false
          })
        }
      } else {
        console.error(res);
        wx.showModal({
          title: '微信异常',
          content: res.statusCode,
          showCancel: false
        })
      }
    },
    fail: function(){
      wx.showModal({
        content: '远程连接失败',
        showCancel: false
      })
    },
    complete: function () {
      wx.hideNavigationBarLoading();
    }
  })
}

module.exports = {
  serverPath: serverPath,
  request : request,
  key: key
}

api.js 工具类

const ajax = require('ajax.js');

// 登录
function login(success) {
  console.log("login...")
  wx.login({
    success: function (res) {
      // 发送 res.code 到后台换取 openId, sessionKey, unionId
      console.log(res.code)
      ajax.request({
        method: 'GET',
        url: 'user/login?code=' + res.code,
        success: loginRes => {
          wx.setStorageSync('token', loginRes.token);
          if (success) {
            success(loginRes);
          }
        }
      })
    }
  })
}

// 获取推荐的抖音
function getRecommendList(opt) {
  console.log("getRecommendList...")

  ajax.request({
    url: 'subject/recommendList',
    data: opt.data || {
      page: 1,
      rows: 5
    },
    success: opt.success
  })
}
module.exports = {
  login: login,
  getRecommendList: getRecommendList
}

更多内容请到官网https://100boot.cn的这里下载

更多精彩内容

微信小程序电商实战-入门篇
微信小程序电商实战-首页(上)
微信小程序电商实战-首页(下)
微信小程序电商实战-商品详情(上)
微信小程序电商实战-商品详情加入购物车(下)
微信小程序电商实战-商品列表流式布局
微信小程序实战篇:基于wxcharts.js绘制移动报表
微信小程序实战篇:实现抖音评论效果
微信小程序抖音实战-首页(上)
微信小程序实战篇:抖音案例使用手册

关注我们

如果需要源码可以关注“IT实战联盟”公众号并留言(源码名称+邮箱),小萌看到后会联系作者发送到邮箱,也可以加入交流群和作者互撩哦~~~


推荐阅读更多精彩内容