首页 > 代码库 > 微信小程序-今日头条案例

微信小程序-今日头条案例

github地址:   https://github.com/HowName/toutiao

项目为仿今日头条,使用了百度ApiStore接口查询数据,使用微信组件/api有 封装请求方法,底部tab,启动页动画,loading,scroll-view,swiper,列表页支持上下拉加载更多

效果图:

技术分享

 

启动欢迎页,几行代码可实现旋转与缩放:

 //flash.js  onReady:function(){      // 页面渲染完成      var that = this,duration = 1500;      var animation = wx.createAnimation({          duration: duration,      });      //step() 方法表示一组动画的结束      animation.scale(2).rotate(360).step();      animation.scale(1).step();        this.setData({          animationData : animation.export()      });      var timestamp = new Date().getTime();      setTimeout(function(){        wx.redirectTo({          url: ‘../index/index?time=‘+timestamp        })      },duration*2.5);  },

  

//flash.wxml<image class="flash-img" animation="{{animationData}}" src="http://www.mamicode.com/{{src}}" ></image>

  

 

网络请求方法:

//app.js  req: function(url,data,param){    var requestData = {      url: url,      data: typeof data == ‘object‘ ? data : {},      method: typeof param.method == ‘string‘ && param.method.length > 0 ? param.method.toUpperCase() : ‘GET‘,      header: typeof param.header == ‘object‘ ? param.header : {},      success: function(res) {      	typeof param.success == ‘function‘ && param.success(res);      },      fail: function(res){        typeof param.fail == ‘function‘ && param.fail(res);      },      complete: function(res){        typeof param.complete == ‘function‘ && param.complete(res);      }    };    wx.request(requestData);  },

 

列表页:

//index.jsvar app = getApp(),currentPage = 1;const URL = "http://apis.baidu.com/showapi_open_bus/channel_news/search_news";Page({  data:{    imgUrls: [      ‘http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg‘,      ‘http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg‘,      ‘http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg‘    ],    toView: "",    loadingHidden:true,    renderData:[],  },  onl oad:function(options){    this.loadDataFromServer();  },  //api读取数据  loadDataFromServer: function(){    var that = this;    that.changeLoadingStatus(false);    app.req(URL,{      page : currentPage,      needContent : 1,    },{      header: { apikey: app.globalData.apikey },      success:function(resp){        console.log(resp);        console.log("成功加载页数 "+currentPage);        var tempData = http://www.mamicode.com/resp.data.showapi_res_body.pagebean.contentlist;"top-id" : "top-id2"; //需要改变值页面才会重新渲染        that.setData({           //renderData: that.data.renderData.concat(tempData),  合并数组容易超出长度,无法做到无限加载           renderData: tempData,           toView: toViewId,        });        that.changeLoadingStatus(true);      }    });  },  //加载上一页或者下拉刷新  refresh:function(e){      currentPage = currentPage > 1 ? --currentPage : 1;      this.loadDataFromServer();  },  //加载下一页  loadMore:function(e){      ++currentPage;      this.loadDataFromServer();  },  //改变loading状态  changeLoadingStatus: function(bool){    this.setData({      loadingHidden: bool    });  },  onReady:function(){    // 页面渲染完成    wx.setNavigationBarTitle({      title: ‘列表‘    });  },  onShow:function(){    // 页面显示  },  onHide:function(){    // 页面隐藏  },  onUnload:function(){    // 页面关闭  }});

 

//index.wxml<loading hidden="{{loadingHidden}}">     加载中...</loading><scroll-view scroll-y="true" style="height: 100%;" scroll-into-view="{{toView}}" upper-threshold="5" lower-threshold="5" bindscrolltoupper="refresh" bindscrolltolower="loadMore">    <swiper indicator-dots="true" id="swiper-view" autoplay="true" interval="2000">        <block wx:for="{{imgUrls}}">            <swiper-item>                <image src="http://www.mamicode.com/{{item}}" width="100%" height="150"/>            </swiper-item>        </block>    </swiper>    <view id="top-id"> </view>    <view id="top-id2"> </view>    <block wx:for="{{renderData}}">        <view class="container">              <view class="title">                <text class="title-text">{{item.title}}</text>            </view>                    <view class="images"  wx:if="{{item.imageurls.length > 0}}">                <block wx:for="{{item.imageurls}}" wx:for-item="imgItem" wx:for-index="imgIndex">                    <image wx:if="{{imgIndex <= 2}}"  src="http://www.mamicode.com/{{imgItem.url}}"></image>                </block>            </view>            <view class="source">{{item.source}}  {{item.pubDate}}</view>        </view>    </block></scroll-view>

 完!

 

  

  

 

微信小程序-今日头条案例