关键词:
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="{{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.js var 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:[], }, onLoad: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 = resp.data.showapi_res_body.pagebean.contentlist; var toViewId = currentPage % 2 == 0 ? "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="{{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="{{imgItem.url}}"></image> </block> </view> <view class="source">{{item.source}} {{item.pubDate}}</view> </view> </block> </scroll-view>
完!
今日头条——面试案例
今日头条面试案例1-数据结构中堆的概念,堆排序-死锁的概念,怎么避免死锁-ReentrantLock、synchronized和volatile(n面)-HashMap-singleTask启动模式-用到的一些开源框架,介绍一个看过源码的,内部实现过程。-消息机制实现-ReentrantLock... 查看详情
关于今日头条小程序(字节跳动小程序)相关问题(代码片段)
...相差不多,然后我就抱着试一试的心态,真的是试一试把微信小程序换了个id,然后打包上传,发现竟然跑的通!跑的通!跑的通!再说一次跑的通。当时我的内心是崩溃的,说好的tt.标签那,这样照搬真的好吗,好歹稍微改下啊... 查看详情
网站爬取-案例三:今日头条抓取(ajax抓取js数据)
今日头条这类的网站制作,从数据形式,CSS样式都是通过数据接口的样式来决定的,所以它的抓取方法和其他网页的抓取方法不太一样,对它的抓取需要抓取后台传来的JSON数据,先来看一下今日头条的源码结构:我们抓取文章... 查看详情
微信小程序获取国外今日天气预报信息接口
使用天气API的国外今日天气预报接口制作返回json预览cityid:"601010100",city:"堪培拉",cityEn:"Canberra",country:"澳大利亚",countryEn:"Australia",update_time:"2019-04-2418:00:00",wea:"晴",wea_img:"qing",tem:"22",win:"西北风",win_speed:" 查看详情
h5跨平台能力调研
...各平台对H5的支持方式目前主流的平台(iOSAPP、AndroidAPP、微信小程序、支付宝小程序、百度智能小程序、今日头条小程序等)对H5页面的支持是通过提供<web-view/>组件的方式。<web-view/>组件是一个可以用来承载H5网页的组... 查看详情
新闻网站电脑版带手机版源码,仿东方头条,今日头条,搜狐自媒体网站帝国cms定制
...尚、体育等各类别的头条新闻资讯。支持电脑版+手机版+微信版+小程序版+APP版,由10年的技术团队专业定制,需要的朋友可以联系我们。网站采用:PHP+MySQL+thinkPHP框架(可定制)?演示网电脑版:ww 查看详情
[新浪]今日头条被高估了吗?
今日头条被高估了吗? 欢迎关注“创事记”的微信订阅号:sinachuangshiji 文/华生 来源:砺石商业评论(ID:libusiness) 砺石导言 对于今日头条这样一家缺乏核心竞争力,并且始终头顶较大法律与道德风险... 查看详情
python3-三天学会微信小程序(python后端研习)(代码片段)
文章目录一、day01微信小程序1.问题2.环境的搭建2.1Python环境2.2小程序环境2.2.1申请一个微信公众平台2.2.2保存自己的appid2.2.3下载开发者工具2.2.4创建项目3.开发小程序3.1全局配置3.2组件3.2.1text3.2.2view3.2.3image3.3样式3.3.14.flex布局5.实... 查看详情
python3-三天学会微信小程序(python后端研习)(代码片段)
文章目录一、day01微信小程序1.问题2.环境的搭建2.1Python环境2.2小程序环境2.2.1申请一个微信公众平台2.2.2保存自己的appid2.2.3下载开发者工具2.2.4创建项目3.开发小程序3.1全局配置3.2组件3.2.1text3.2.2view3.2.3image3.3样式3.3.14.flex布局5.实... 查看详情
如何在头条做营销:2022今日头条营销价值洞察报告.pdf(附下载链接)
本报告共包含如下四大部分:1、趋势:品牌内容营销难题;2、人群:今日头条人群特征;3、内容:今日头条内容生态;4、商业:今日头条商业生态。更多细节和行研干货资料请到小程序省时查报告中查看全文并下载。 查看详情
如何通过今日头条引精准流量,学完即用
...发现很多人都对今日头条引流比较感兴趣,每天都有人在微信上问我做今日头条引流的玩法,我也多多少少的回答了他们。但是,头条规则改变太快,很多当前有效的玩法,没过多久就失效了。这里说的玩法,是指文章或视频上... 查看详情
wx2tt微信小程序转头条小程序工具(代码片段)
wx2tt微信小程序转头条小程序工具安装npmiwx2tt-g使用方法wx2tt<path/to/wxapp><path/to/ttapp>[--watch][--minify][--minify-wxss][--minify-js][--minify-wxml]参数说明path/to/wxapp表示微信小程序目录path/to/ttapp表示头条小程序目录--watch表示监听模式... 查看详情
微信小程序计算器案例(代码片段)
...⏰预计时间:30分钟🎉专栏系列:我的第一个微信小程序计算器前言实现效果实现步骤wxmlwxssjs数字按钮事件处理函数计算按钮处理事件清空数字、删除数字、添加“.”事件处理函数总结前言嗨嗨嗨,好久没更新... 查看详情
今日头条和今日头条极速版有什么区别
3C数码您的浏览器不支持HTML5视频zymedia(\'video\')参考技术A今日头条和今日头条极速版区别为:安装包大小不同、占用运行内存不同、特色功能不同。一、安装包大小不同1、今日头条普通版:今日头条普通版的安装包大小为22.8M。2... 查看详情
如何通过今日头条引精准流量,学完即用
...发现很多人都对今日头条引流比较感兴趣,每天都有人在微信上问我做今日头条引流的玩法,我也多多少少的回答了他们。 但是,头条规则改变太快,很多当前有效的玩法,没过多久就失效了。这里说的玩法,是指文章或视... 查看详情
微信小程序开发问题
...替呀等等方面的技术手段本回答被提问者采纳 参考技术C微信小程序开发时会出现的问题:1.小程序环境配置的问题2.json格式转换问题3.富文本的问题4.微信小程序中屏幕自适应问题5.微信小程序的图片宽度和高 查看详情
微信小程序画布与涂鸦案例(代码片段)
canvas.wxml<viewclass="container"><viewclass="canvas_area"><canvascanvas-id="myCanvas"class="myCanvas"disable-scroll="false 查看详情
微慕wordpress小程序增强版
2017年1月9日,张小龙在2017微信公开课Pro上发布的微信小程序正式上线。在过去的2年多的时间里,微信小程序领头,各大互联网平台也不甘落后,陆续推出自己的小程序。2018年7月4日,百度智能小程序正式上线... 查看详情