logo头像
Snippet 博客主题

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

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

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

首先打开官网

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

使用静默登录接口

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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 中查询第一次的抖音内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
// 登录回调
if (app.globalData.isLogin) {
this.loadFirstData();
} else {
app.onLogin = function () {
that.loadFirstData();
}
}
},

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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();
}
}
})
},

每次翻页的时候修改页码

1
2
3
4
5
6
7
8
9
10
11
12
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();
},

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

1
2
3
4
5
6
7
8
reload: function (e) {
this.setData({
page: 1,
current: 0,
subjectList: []
})
this.loadFirstData();
},

ajax.js 工具类

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
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 工具类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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实战联盟”公众号并留言(源码名称+邮箱),小萌看到后会联系作者发送到邮箱,也可以加入交流群和作者互撩哦~~~

上一篇