上一篇：微信小程序抖音实战-首页（上）
友情提示：由于微信小程序系列都是通过https调用API服务动态获取的数据模型，建议先看微信小程序抖音实战-首页（上）搭建页面。
下面教大家抖音微信小程序动态数据的获取
抖音的数据接口需要微信的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 ，这个页面的思路如下
进入页面默认加载10条抖音推荐内容并显示第一条抖音
上翻操作时判断剩余抖音条数
补充更多的抖音内容
好了看下代码的实现过程
在 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绘制移动报表
微信小程序实战篇：实现抖音评论效果
微信小程序抖音实战-首页（上）
微信小程序实战篇：抖音案例使用手册
关注我们
访问https://100boot.cn 选择案例下载
注意：本文归作者所有，未经作者允许，不得转载
