今日头条小程序版是怎么开发出来的

今天看来下今日头条版的小程序,不知道他们是怎么开发出来的,感觉不是原生的纯小程序开发,应该是用了什么框架,有没有知道?

0

2个回答

今日头条App的Topbar是一个典型的频道管理和切换组件,在微信小程序上也实现了类似的效果。

我们先看具体效果好了 ↓↓↓

wx-topbar-1

wx-topbar-2

wx-topbar-3

这个项目(wx-topbar)已经放在GitHub上了——点此前往,欢迎学习交流。

接下来,简要说一下实现思路。

先看视图层,Topbar横向滚动对应的WXML代码如下:



{{ navbarArray[item].text }}


空白







scroll-view负责Topbar中各个频道的呈现,所有频道的相关数据都存储在navbarArray这个对象数组里,而数组navbarShowIndexArray里存储了要显示频道在数组navbarArray中的索引。

不难猜测,频道是否选中高亮,与数组navbarArray有关;频道是否显示,与数组navbarShowIndexArray有关。

点击某个频道名称,就会触发对应频道的切换操作。

view.navbar-arrow-down对应的是右上角的向下箭头,可采用fixed定位类型,点击后弹出管理频道的Modal.



显示频道





{{ navbarArray[item].text }}

上移



隐藏频道





{{ navbarArray[item].text }}

上移



在这个管理频道的Modal里,通过改变数组navbarShowIndexArray来控制频道是否显示和显示顺序,同时,需要另外一个数组navbarHideIndexArray来存储隐藏的频道。

Modal显示的时候,Topbar需要被另一个写有“频道设置”字样的Bar覆盖。


频道设置




然后,我们来看逻辑层的实现。初始化的部分data如下:

data: {
navbarArray: [{
text: '推荐',
type: 'navbar-item-active'
}, {
text: '热点',
type: ''
}, {
text: '视频',
type: ''
}, {
text: '图片',
type: ''
}, {
text: '段子',
type: ''
}, {
text: '社会',
type: ''
}, {
text: '娱乐',
type: ''
}, {
text: '科技',
type: ''
}, {
text: '体育',
type: ''
}, {
text: '汽车',
type: ''
}, {
text: '财经',
type: ''
}, {
text: '搞笑',
type: ''
}],
navbarShowIndexArray: Array.from(Array(12).keys()),
navbarHideIndexArray: [],
channelSettingShow: '',
channelSettingModalShow: '',
channelSettingModalHide: true
}
navbar-item-active是一个可使频道高亮的Class,navbarShowIndexArray初始化的结果是一个0到11的数组,刚好是数组navbarArray的所有元素的索引。显然,初始化的结果是所有频道都将显示。

为了实现频道个性化配置的保存,navbarShowIndexArray还需要通过小程序的数据缓存API储存起来。

storeNavbarShowIndexArray: function() {
wx.setStorage({
key: 'navbarShowIndexArray',
data: this.data.navbarShowIndexArray
});
}
切换频道的函数如下:

switchChannel: function(targetChannelIndex) {
this.getArticles(targetChannelIndex);

let navbarArray = this.data.navbarArray;
navbarArray.forEach((item, index, array) => {
    item.type = '';
    if (index === targetChannelIndex) {
        item.type = 'navbar-item-active';
    }
});
this.setData({
    navbarArray: navbarArray,
    currentChannelIndex: targetChannelIndex
});

}
这样,频道的管理和简单切换我们就实现了。

但是,到此为止,频道的切换只能通过点击对应Topbar中频道那一小块区域来实现,要是在正文区域左滑和右滑也能切换频道就好了。

一个容易想到的思路是,在正文区域绑定touch事件,通过坐标判断滑动方向,然后使Topbar中当前频道的上一个或下一个频道高亮,同时,控制Topbar横向滚动合适的偏移长度,以确保切换后的频道能出现在视图区域。

onTouchstartArticles: function(e) {
this.setData({
'startTouchs.x': e.changedTouches[0].clientX,
'startTouchs.y': e.changedTouches[0].clientY
});
},
onTouchendArticles: function(e) {
let deltaX = e.changedTouches[0].clientX - this.data.startTouchs.x;
let deltaY = e.changedTouches[0].clientY - this.data.startTouchs.y;
if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 10) {
let deltaNavbarIndex = deltaX > 0 ? -1 : 1;
let currentChannelIndex = this.data.currentChannelIndex;
let navbarShowIndexArray = this.data.navbarShowIndexArray;
let targetChannelIndexOfNavbarShowIndexArray = navbarShowIndexArray.indexOf(currentChannelIndex) + deltaNavbarIndex;
let navbarShowIndexArrayLength = navbarShowIndexArray.length;
if (targetChannelIndexOfNavbarShowIndexArray >= 0 && targetChannelIndexOfNavbarShowIndexArray <= navbarShowIndexArrayLength - 1) {
let targetChannelIndex = navbarShowIndexArray[targetChannelIndexOfNavbarShowIndexArray];
if (navbarShowIndexArrayLength > 6) {
let scrollNavbarLeft;
if (targetChannelIndexOfNavbarShowIndexArray < 5) {
scrollNavbarLeft = 0;
} else if (targetChannelIndexOfNavbarShowIndexArray === navbarShowIndexArrayLength - 1) {
scrollNavbarLeft = this.rpx2px(110 * (navbarShowIndexArrayLength - 6));
} else {
scrollNavbarLeft = this.rpx2px(110 * (targetChannelIndexOfNavbarShowIndexArray - 4));
}
this.setData({
scrollNavbarLeft: scrollNavbarLeft
});
}
this.switchChannel(targetChannelIndex);
}
}
}

2

网上寻找到的答案http://www.jianshu.com/p/fe5756b541d8

1
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
重磅:「今日头条」小程序平台正式发布!
【回复“1024”,送你一个特别推送】日前据一位开发者透露,其已经受邀参加了今日头条小程序的内测,如果不出意外,今日头条小程序平台很快就会发布。如果今日头条发布了小程序,...
今日头条正式上线小程序,你还有机会么?
今日头条一年一度的最大盛会——头条生机大会在11月17日-18日举行,除了今日头条这个产品,字节跳动还有抖音短视频、西瓜视频等众多头部产品,已经成为新的超级流量入口。 生机大会上,新任CEO陈林宣布了字节跳动正式发布小程序,其实这个口号从9月17日就开始喊了。字节跳动也成为继微信、支付宝、百度之后,国内第四家在自己平台上架小程序的公司。现在巨头都擅长搞平台,搞生态闭环啊。 字节跳动宣称,头条小...
今日头条&抖音小程序开发文档
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828 问题:百度上直接搜索“ 今日头条小程序开发文档 ” 或 “ 抖音小程序开发文档 ”,是搜不出来开发文档的,你可以搜索 “ 字节跳动小程序 ”。 点击这里可直接进入开发文档,或直接点击:https://developer.toutiao.com/docs/...
灯灯小程序开发手记:仿今日头条(上)
写在前面 新的一年,祝大家新年快乐!当然对于程序员来说,新的一年,也要有新的改变。因此灯灯决定凑热闹编写微信小程序啦! 上一篇文章《记一次小程序开发过程》中,灯灯大致写了下自己第一次开发小程序的感受和流程。这一次灯灯会详细记录下自己制作一个小程序的思路、遇到的问题、涉及到的代码等和大家分享。 要做个什么 首先我们要确定做一个什么小程序,我决定先做一个很常规的新闻App练练手,样式就模仿头条...
帝国cms仿今日头条小程序的基本模型的开发限于新闻模型
本节将描述使用帝国cms仿今日头条简版的微信小程序的配置和开发,在此之前,请大家先阅读一下以下内容:   phpstudy配置之本地虚拟主机的配置和本地域名的配置   本地安装帝国cms   要在帝国cms中建立新闻模型的栏目和相应的数据。   然后按下面的步骤进行,分为两大方面,一方面是帝国cms后台的插件,另一方面是微信小程序的配置。首先要下载这两个方面的相关文件。下载地址如下:   帝国cm...
微信小程序开发-仿今日头条(二)
转载请标明:https://blog.csdn.net/yangjianbo456/article/details/80935017 欢迎访问我的微信小程序:该小程序github源码地址(喜欢就给个star呗) (本小程序是模仿新闻类的app做的一个小程序) 在此特别感谢: 有梦想的程序丶猿 提供的免费开放接口API (其博客地址:https://www.jiansh...
今日头条lite:你关心的才是头条【极乐小程序商店出品】
今天极乐君给大家推荐一款微信小程序叫:今日头条 “今日头条”是一款基于数据挖掘技术的个性化推荐引擎产品,它为用户推荐有价值的、个性化的信息,提供连接人与信息的新型服务。体验进入>>极乐小程序商店本小程序根据你的浏览习惯与历史,推荐你关心的内容,让你用最少的时间关注到你想知道的信息,真正实现了头条的Slogan:你关心的才是头条,以后需要下载今日头条APP,现在在微信中就可以使用了,不需要下载任何A
模仿今日头条(微信小程序)源码
源码描述: 一、源码特点 1、模仿今天头条基于微信小程序开发的源代码,包含的模块有新闻资讯列表,资讯详情,个人中心设置。
(小程序)仿今日头条源码
(小程序)仿今日头条的源码,直接下载可运行。值得学习的demo
模仿今日头条的微信小程序源码
一个模仿今日头条的小程序源码,来自51小程序http://bbs.html51.com/t-350-1-1/
仿今日头条微信小程序详细源代码
仿今日头条微信小程序详细源代码,微信小程序开发必备。
微信小程序仿今日头条小程序端界面和代码演示
基于帝国cms 7.5 utf-8版的今日头条小程序下载地址: http://www.sjmoban.com/xiaochengxu/7.html 程序本版包含: 1.获取分类列表 2.获取新闻列表 3.查看新闻内容 4.列表左右滑动,动态加载,滑到底部自动加载更多。 本小程序客户端将持续更新,谢谢关注。  ...
微信小程序-仿今日头条源码
微信小程序-仿今日头条源码,较为基础的项目源码。希望可以帮到想学习小程序的宝宝们
vue仿今日头条
vue.js 2.0高仿今日头条的移动端项目。技术栈:1.vue、vuex、vue-router、axios2.iview、element-ui3.vue-lazyload、flexible.js地址:GitHub地址:https://github.com/xiaoli0510/toutiao注意点:1.collect组件里面请求数据是用的本地数据,需放在static文件夹2.click事件中有的...
一款微信小程序是如何诞生的。
上一个暑假,我在一家互联网初创公司实习了一个半月的时间,作为前端开发实习生,参与了公司团队的一款微信小程序的开发。公司同事数量二十不到,十人有余,在产品开发的过程中,大伙加班加点,在 APP 版本上线的那一晚,熬了个通宵。这一个月的开发经历让我这个初入互联网行业的小白“印象深刻”,我也很感激这一群“出生入死” 的战友们,虽然前端和后常常“亦敌亦友”,产品和开发总是“血海深仇”,但团队始终保持热情,...
微信小程序---仿今日头条
源码详见: git源码效果图: 效果图weixinddemo本demo主要调用了https://api.tianapi.com/social/的api接口,需要申请apikey,将其定义在app.js中,请求中的url格式为https://api.tianapi.com/social/?key=yourKey&num=10&currentPage=X //api读取数据数据loadDat
一键生成发布百度小程序、微信小程序、支付宝和今日头条小程序
一键生成百度、微信小程序。快人一步,助力企业企业高速发展。 双核智能小程序助力企业收割亿级流量 小程序的战场硝烟滚滚,具体战况扑朔迷离,谁都不能以胜利者的姿态袖手旁观。 App的争夺战基本结束,互联网下半场,超级app+小程序,成为巨头的新战场。 自2年多前,微信推出小程序之后,近几个月,巨头们都在力推小程序,而且都在加大投入。 在注意力日益分散、获客成本走高的情况下,小...
仿今日头条小程序样式和少部分功能。【新闻列表残缺版】
仿今日头条小程序样式和少部分功能。【新闻列表残缺版】等全写完了再上完整版……
小程序 仿今日头条 带滑动切换的文章列表
拿别人仿今日头条的代码做的改版, 首先感谢前辈。其次,这个代码虽然能用,但是js里还是存在一些BUG。希望后辈再做改版。 wxml: &amp;lt;!--今日头条 --&amp;gt; &amp;lt;view class=&quot;container&quot;&amp;gt; &amp;lt;scroll-view class=&quot;navbar&quot; scroll-x=&quot;true&quot; scroll-left=&quot;{{scrollNavbarLe.
微信小程序-仿今日头条客户端
欢迎访问我的微信小程序:该小程序github源码地址(喜欢就给个star呗) (本小程序是模仿新闻类的app做的一个小程序) 在此特别感谢: 有梦想的程序丶猿 提供的免费开放接口API (其博客地址:https://www.jianshu.com/p/e6f072839282) 本次发版主要实现功能如下:(2018年7月5日发布) (搭建小程序的开发环境等内容请参考:h...
仿今日头条微信小程序左右滑动客户端
仿今日头条的微信小程序,后端api可使用帝国cms或者织梦cms。免费提供相应的服务端api文件。
仿今日头条小程序
仿今日头条小程序,个人中心未完成,首页滑动切换,上滑加载
仿今日头条微信小程序
仿今日头条小程序实现导航栏滑动,底部标签栏,窗口二级内容显示。
微信小程序自定义组件TabLayout(类似于今日头条的滑动菜单)
有了安卓开发经验,自定义微信小程序组件简直易如反掌。 自定义微信小程序的步骤如下: 建立四个文件 分别是逻辑控制js,配置文件json,布局文件wxml,样式文件wxss。 配置文件.json的编写 component参数:说明这个文件夹是组件文件夹; usingComponents参数:说明该组件是依赖于什么组件的,这里是空的什么都不依赖。 .wxml文件 ...
基于织梦Cms5.7 utf-8版本的仿今日头条微信小程序模块插件的使用和安装
微信小程序端源码可根据自己的需求进行更改。直接上示例图: 下载织梦Cms小程序服务端模块后,在织梦后台,打开模块-》上传新模块 : 在左边的菜单栏就可以看到这个“微信小程序”的菜单项: 然后下载仿今日头条小程序的小程序端,修改一下里面的域名即可。 ...
精仿今日头条微擎小程序手工安装的方法
适用对象:已经安装微擎【精仿今日头条】公众号版的用户小程序源码百度网盘下载:https://pan.baidu.com/s/1i69MXz3你也可以加入QQ群,在群共享那里下载需要提前准备:1、通过上面的任何一个地址,下载小程序源码2、已经安装微擎精仿今日头条公众号版(小程序后台),如果没有安装,请去下载安装:http://s.we7.cc/module-4047.html3、服务器已经有SSL证...
用THINKPHP3.2.2写的一个文章发布系统 很好的一个入门小程序
用THINKPHP3.2.2写的一个文章发布系统 很好的一个入门小程序
如何开发新闻阅读器(新闻软件、今日头条)?让我们一起动手吧!
过了几天,博主又匿起来开发了一款新闻阅读器,新闻来源是百度APIStore里的免费API接口,开发的灵感和思路来自今日头条。     有的时候,模范别人应用其实就是一种开发的学习手段,因为如果自己去开发,没有UI没有交互流程,那样的话,可能会比较难下手,当有了别人的交互流程和一些资源,你就可以去自己考虑如何实现相关功能,如何达到类似效果。可能你的方法没那么完善,实现效果没原版的那么绚丽,可
今日头条小程序
新闻小程序,今日头条,一个新闻服务的小程序。。。。。
小程序多种今日头条顶部tab导航栏标签效果实现,带部分注释。
小程序多种今日头条顶部tab导航栏标签效果实现,带部分注释。实现导航栏左右滑动,页面内容滑动导航栏标签绑定选择。
今日头条去广告版APK
详细如下: 1.完美去掉启动广告 2.去掉视频后续广告 3.去掉图片集后续广告 4.qq一键登陆 5.视频更流畅
最新HTML5开发的微信小程序响应式企业网站源码 附带WAP手机版 全站自适应模板 非常的不错
最新HTML5开发的微信小程序响应式企业网站源码 附带WAP手机版 全站自适应模板 非常的不错
Android手撸一个今日头条视频下载器
转载请标明出处: http://www.weyye.me/detail/today-news-video/ 本文出自:【Wey Ye的博客】 前言今日头条是我最喜欢的app之一,当然喜欢并不是因为内容精彩,而是逗比的评论,而且看视频的没有广告,我这个人喜欢收藏,尤其是小视频(手动滑稽),可是却没有下载的按钮,之后在仿今日头条项目里也需要用到视频,进入网页右键另存为也比较麻烦,作为程序猿,这可不
帝国CMS内核仿今日头条自动下拉刷新全站模板
帝国CMS内核仿今日头条自动下拉刷新全站模板 下载后直接安装还原数据库生成即可 新测可用
类似网易、今日头条等不感兴趣的弹窗
在项目开发的过程中,产品提出了一个类似网易和今日头条不感兴趣的那种弹窗,感觉效果还不错,网上相关的例子又没找到,为了让小伙伴们少加点班特意封装了一下供给大家使用。那个小尖角用的是贝塞尔曲线,如有更好的实现方法,请留言===========================================================================================版...
今日头条H5移动端APP页面
今日头条H5移动端APP页面,开发的H5的移动应用提供便捷的前端
模仿今日头条客户端的界面及简单功能实现
模仿今日头条界面前不久边学习边试着模仿了一下今日头条的界面,完善了一些功能,最近整理了一下,放在在gitHub上了,地址gitHub传送门。 目前客户端主要完成了界面间的交互,首页和视频两个界面的主要内容获取,新闻内容的获取,及新闻搜索。 客户端主界面交互主要基于Fragment,Fragment内嵌TabLayout和ViewPager,用于展示具体内容页面。信息的获取及图片的加载采用Voll
微信小程序识别当前小程序的版本,开发版、体验版、线上版
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 envVersion: 'develop', //开发版 envVersion: 'trial', //体验版 envVersion: 'release', //正式版 console.log('envVersion',__wxConfig.envVersion);...
今日头条前台页面
自己为了练习项目,把今日头条的页面弄下来,只是些静态页面, 功能没有实现, 适合练手,提高自己的能力
微信小程序与微信网页开发
微信web开发只需要code值,但是小程序需要一个code值,一个encryptData,一个iv 首先先看图   箭头部分为微信给我们的,就是前端需要传过来的。 步骤为: 小程序客户端调用wx.login,回调里面包含js_code。 然后将js_code发送到服务器A(开发者服务器),服务器A向微信服务器发起请求附带js_code、appId、secretkey和grant_t...