小程序模板网

微信小程序调用后台接口+热点新闻滚动展示

发布时间:2018-04-20 10:44 所属栏目:小程序开发教程

1、微信JS文件,发送请求调用: //将返回接口数据,写入Page({data})里面

 

				
  1. //获取热点新闻,这个也是写在onload:function(){//code)里面的
  2. wx.request({
  3. url: 'https://m.xxiangfang.com/index.php/Home/Xiaoxxf/activity?is_hot=1',//热点新闻
  4. data: {},
  5. method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
  6. header: {
  7. 'Content-Type': 'application/json'
  8. },
  9. success: function (res) {
  10. console.log(res.data)
  11. that.setData({
  12. notices: res.data //一维数组,只取两条数据
  13. })
  14. },
  15. fail: function () {
  16. // fail
  17. },
  18. complete: function () {
  19. // complete
  20. }
  21. })

2、后台php处理:

使用curl调用即可,记得传参和token(key)标识

3、JS文件里面【热点新闻滚动展示】:

 

				
  1. onLoad: function (res) {
  2. startNotice: function() {
  3. var me = this;
  4. var notices = me.data.notices || [];
  5. //console.log(this.data.notices) //就是这里有问题,数据还没从接口返回就跑到这里了 xzz-6.2
  6. if( notices.length == 0 ) {
  7. //return; //是这里的问题,数据没加载过来,导致程序return;
  8. }
  9.  
  10. var animation = me.animation;
  11. //animation.translateY( -12 ).opacity( 0 ).step();
  12. // animation.translateY( 0 ).opacity( 1 ).step( { duration: 0 });
  13. // me.setData( { animationNotice: animation.export() });
  14.  
  15. var noticeIdx = me.data.noticeIdx + 1;
  16. console.log(notices.length);
  17. if( noticeIdx == notices.length ) {
  18. noticeIdx = 0;
  19. }
  20.  
  21. // 更换数据
  22. setTimeout( function() {
  23. me.setData( {
  24. noticeIdx: noticeIdx
  25. });
  26. }, 400 );
  27.  
  28. // 启动下一次动画
  29. setTimeout( function() {
  30. me.startNotice();
  31. }, 5000 );
  32. },
  33.  
  34. onShow: function() {
  35. this.startNotice();
  36. },

4、wxml的前段代码:

 

				
  1. <span style="color:#999999">热门活动</span><span style="color:#3273c3">{{notices[noticeIdx]}}</span>


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23762.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询