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

吃苹果的上帝 2018-06-11 10:16:43 ⋅ 94 阅读

上一篇:微信小程序抖音实战-首页(上)

友情提示:由于微信小程序系列都是通过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 ,这个页面的思路如下

  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绘制移动报表
微信小程序实战篇:实现抖音评论效果
微信小程序抖音实战-首页(上)
微信小程序实战篇:抖音案例使用手册

关注我们

访问https://100boot.cn  选择案例下载


全部评论: 0

    我有话说:

    程序实战-(上)

    你也可以用程序编写一个

    程序电商实战-

    上一篇:程序电商实战-(上)好了,上一期我们把搜索、导航栏和广告轮播给做完了,那么接下来会继续

    程序电商实战-(上)

    上一篇:程序电商实战-入门篇 嗨,大家好!经过近两周的精心准备终于开始程序电商实战之路喽。那么最终会做成什么样呢?好了,不啰嗦了 我们先看长什么样吧!   效果图

    程序实战篇:实现评论效果

    我们在写程序的时候经常会遇到弹出层的效果而现有官网提供的跳转方法多数是不支持参数传递的。本文教大家做一个评论效果的程序......

    程序商城(三):电商福利专场无限拉刷新动态API数据实现

    电商第5个模块-福利专场,通过https调用API数据模型来实现无限拉刷新......

    程序实战-视频弹幕

    如果你去只是为了看视频就少了一大乐趣,评论区才是最有趣的地方,边看视频边看评论的弹幕是不是更有意思

    程序电商实战-商品详情(上)

    先看一今天要实现程序商品详情吧!

    程序电商实战-购物车(

    我们继续接着昨天的购物车写,主要把剩下的数量加减 template 模板、选中计算功能实现掉!

    程序实现商品数量加减

    这是一个用程序原生代码实现的数量加减demo,主要是用于商品购物车或者商品详情修改数量使用

    程序商城(四):动态API实现商品详情(上)

    1、实现商品详情页面布局(这篇实现3个模块,头部商品图片轮播、商品价格和商品描述、商品详情展示) 2、根据用户点击不同的商品请求API动态加载数据

    程序电商实战-商品详情加入购物车(

    今天会接着上一篇开始写商品详情加入购物车的部分,直接看效果......

    程序实战篇:商品属性联动选择(案例)

    本期的程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点

    程序电商实战-入门篇

    程序开发工具有新版本更新啦!开发体验更好了,接下来一起为电商程序做一准备前期准备工作~~

    程序-Image的widthFix属性和rpm尺寸的使用

    在做程序的商品详情,商品的详情是图片集合,渲染完成后发现图片加载的很不自然

    程序商城(七):动态API实现商品分类

    程序商品分类页面布局并且调用动态API获取数据并加载

    程序实战篇:基于wxcharts.js绘制移动报表

    程序图表插件(wx-charts)是基于canvas绘制,体积巧,支持图表类型饼图、线图、柱状图 ......

    程序实战篇:程序之页面数据传递

    我们在写程序的时候经常会遇到子面向主页面回传数据或者普通页面跳转到tabBar 页面携带数......

    程序商城(九):授权并实现个人中心页面页面

    实现商城的授权并获取用户信息和个人中心页面布局