微信小程序知乎日报完整版源码

小程序刚刚出来不就就火爆了整个前端圈, 咱也不干落后的研究了一下, 网上找了个”知乎日报API接口“做了个小项目练手, 基本上还算完整的实现了整个项目, 欢迎 star fork,由于小程序对HTML的不支持, 详情页做了些简单的过滤, 基本上看着还行。 某些网络图片无法显示. 貌似是小程序的BUG。由于小程序的局限性, 很多效果还是无法实现的. 不知道公测是否会开放。由于没有内测资格, 只能 clone 到本地进行体验了,项目持续开发优化。

效果图

源码下载地址:

百度网盘:链接:   密码:kp24

目录结构

├── app.js

├── app.json

├── app.wxss

├── config.js

├── pages

│   ├── detail

│   ├── index

│   └── themes

├── static

│   ├── 001.jpg

│   ├── arrowright.png

│   ├── comments.png

│   ├── loading.gif

│   ├── loading.svg

│   ├── pengyou.png

│   ├── qq.png

│   ├── share.png

│   ├── wechat.png

│   ├── wechatHL.png

│   ├── weibo.png

│   ├── weixin.png

│   └── zan.png

├── template

│   └── itemlist.wxml

└── utils

    └── util.js

API 说明

知乎日报的消息以 JSON 格式输出

网址中 api 后数字代表 API 版本,过高或过低均会得到错误信息

较老的接口(启动界面图像获取,最新消息,过往消息)中将数字 2 替换为 1.2 获得效果相同,替换为 1.1 获得的是老版本 API 输出的 JSON 格式(替换为更低,如 1.0,或更高,如 1.3,将会获得错误消息)

以下所有 API 使用的 HTTP Method 均为 GET

API 分析

1. 启动界面图像获取

URL: http://news-at.zhihu.com/api/4/start-image/1080*1776

start-image 后为图像分辨率,接受任意的 number*number 格式, number 为任意非负整数,返回值均相同。

响应实例:

分析:

text : 供显示的图片版权信息

img : 图像的 URL

2. 软件版本查询

Android: http://news-at.zhihu.com/api/4/version/android/2.3.0

iOS: http://news-at.zhihu.com/api/4/version/ios/2.3.0

URL 最后部分的数字代表所安装『知乎日报』的版本

响应实例:

软件为最新版本时

软件为较老版本时

分析:

status : 0 代表软件为最新版本,1 代表软件需要升级

latest : 软件最新版本的版本号(数字的第二段会比最新的版本号低 1)

msg : 仅出现在软件需要升级的情形下,提示用户升级软件的对话框中显示的消息

3. 最新消息

URL: http://news-at.zhihu.com/api/4/news/latest

响应实例:

分析:

date : 日期

stories : 当日新闻

title : 新闻标题

images : 图像地址(官方 API 使用数组形式。目前暂未有使用多张图片的情形出现,曾见无 images 属性的情况,请在使用中注意 )

ga_prefix : 供 Google Analytics 使用

type : 作用未知

id : url 与 share_url 中最后的数字(应为内容的 id)

multipic : 消息是否包含多张图片(仅出现在包含多图的新闻中)

top_stories : 界面顶部 ViewPager 滚动显示的显示内容(子项格式同上)(请注意区分此处的 image 属性与 stories 中的 images 属性)

4. 消息内容获取与离线下载

URL: http://news-at.zhihu.com/api/4/news/3892357

使用在 最新消息 中获得的 id,拼接在 http://news-at.zhihu.com/api/4/news/ 后,得到对应消息 JSON 格式的内容

响应实例:

分析:

body : HTML 格式的新闻

image-source : 图片的内容提供方。为了避免被起诉非法使用图片,在显示图片时最好附上其版权信息。

title : 新闻标题

image : 获得的图片同 最新消息 获得的图片分辨率不同。这里获得的是在文章浏览界面中使用的大图。

share_url : 供在线查看内容与分享至 SNS 用的 URL

js : 供手机端的 WebView(UIWebView) 使用

recommenders : 这篇文章的推荐者

ga_prefix : 供 Google Analytics 使用

section : 栏目的信息

thumbnail : 栏目的缩略图

id : 该栏目的 id

name : 该栏目的名称

type : 新闻的类型

id : 新闻的 id

css : 供手机端的 WebView(UIWebView) 使用

可知,知乎日报的文章浏览界面利用 WebView(UIWebView) 实现

特别注意

在较为特殊的情况下,知乎日报可能将某个主题日报的站外文章推送至知乎日报首页。

响应实例:

此时返回的 JSON 数据缺少 body,image-source,image,js 属性。多出 theme_name,editor_name,theme_id 三个属性。type 由 0 变为 1。

5. 过往消息

URL: http://news.at.zhihu.com/api/4/news/before/20131119

若果需要查询 11 月 18 日的消息,before 后的数字应为 20131119

知乎日报的生日为 2013 年 5 月 19 日,若 before 后数字小于 20130520 ,只会接收到空消息

输入的今日之后的日期仍然获得今日内容,但是格式不同于最新消息的 JSON 格式

响应实例:

格式与前同,恕不再赘述

6. 新闻额外信息

URL: {id}

输入新闻的ID,获取对应新闻的额外信息,如评论数量,所获的『赞』的数量。

响应实例:

long_comments : 长评论总数

popularity : 点赞总数

short_comments : 短评论总数

comments : 评论总数

7. 新闻对应长评论查看

URL: http://news-at.zhihu.com/api/4/story/4232852/long-comments

使用在 最新消息 中获得的 id,在 {id}/long-comments 中将 id 替换为对应的 id,得到长评论 JSON 格式的内容

响应实例:

分析:

comments : 长评论列表,形式为数组(请注意,其长度可能为 0)

author : 评论作者

id : 评论者的唯一标识符

content : 评论的内容

likes : 评论所获『赞』的数量

time : 评论时间

avatar : 用户头像图片的地址

8. 新闻对应短评论查看

URL: http://news-at.zhihu.com/api/4/story/4232852/short-comments

使用在 最新消息 中获得的 id,在 {id}/short-comments 中将 id 替换为对应的 id,得到短评论 JSON 格式的内容

响应实例:

格式与前同,恕不再赘述

9. 主题日报列表查看

URL: http://news-at.zhihu.com/api/4/themes

响应实例:

limit : 返回数目之限制(仅为猜测)

subscribed : 已订阅条目

others : 其他条目

color : 颜色,作用未知

thumbnail : 供显示的图片地址

description : 主题日报的介绍

id : 该主题日报的编号

name : 供显示的主题日报名称

10. 主题日报内容查看

URL: http://news-at.zhihu.com/api/4/theme/11

使用在 主题日报列表查看 中获得需要查看的主题日报的 id,拼接在 http://news-at.zhihu.com/api/4/theme/ 后,得到对应主题日报 JSON 格式的内容

响应实例:

stories : 该主题日报中的文章列表

images : 图像地址(其类型为数组。请留意在代码中处理无该属性与数组长度为 0 的情况)

type : 类型,作用未知

title : 消息的标题

description : 该主题日报的介绍

background : 该主题日报的背景图片(大图)

color : 颜色,作用未知

name : 该主题日报的名称

image : 背景图片的小图版本

editors : 该主题日报的编辑(『用户推荐日报』中此项的指是一个空数组,在 App 中的主编栏显示为『许多人』,点击后访问该主题日报的介绍页面,请留意)

url : 主编的知乎用户主页

bio : 主编的个人简介

id : 数据库中的唯一表示符

avatar : 主编的头像

name : 主编的姓名

image_source : 图像的版权信息

11. 热门消息

请注意! 此 API 仍可访问,但是其内容未出现在最新的『知乎日报』 App 中。

URL: http://news-at.zhihu.com/api/3/news/hot

响应实例:

大体同前面介绍的 API 类似,唯一需要注意的是:欲获得图片地址,不再使用 image 而是 thumbnail 属性

url 属性可直接使用。请注意,url 中的 api 属性为 2,是较老版本。

12. 软件推广

请注意! 此 API 已无法访问,但是其内容曾出现于『知乎日报』 App 中。

Android: http://news-at.zhihu.com/api/3/promotion/android

iOS: http://news-at.zhihu.com/api/3/promotion/ios

13. 栏目总览

请注意! 此 API 仍可访问,但是其内容未出现在最新的『知乎日报』 App 中。

URL: http://news-at.zhihu.com/api/3/sections

响应实例:

同样,注意使用 thumbnail 获取图像的地址

14. 栏目具体消息查看

请注意! 此 API 仍可访问,但是其内容未出现在最新的『知乎日报』 App 中。

URL: http://news-at.zhihu.com/api/3/section/1

URL 最后的数字见『栏目总览』中相应栏目的 id 属性

响应实例:

往前:http://news-at.zhihu.com/api/3/section/1/before/1398780001

在 URL 最后加上一个时间戳,时间戳详见 JSON 数据末端的 timestamp 属性

15. 查看新闻的推荐者

URL: {id}/recommenders

将新闻id填入到#{id}的位置, 如 http://news-at.zhihu.com/api/4/story/7101963/recommenders

响应实例

16. 获取某个专栏之前的新闻

URL: {section id}/before/#{timestamp}

将专栏id填入到 #{section id}, 将时间戳填入到#{timestamp},如 http://news-at.zhihu.com/api/4/section/34/before/1465772400

注:新闻id要是属于该专栏,否则,返回结果为空

响应实例:

17. 查看editor的主页

iOS: {id}/profile-page/ios

Android: {id}/profile-page/android

如 http://news-at.zhihu.com/api/4/editor/79/profile-page/ios

github:https://github.com/LiuCaiHe/wechat-app-sample

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


判断H5页面环境在微信中还是小程序中 用小程序提供的wx.miniProgram.getEnv可以获取环境参数 <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.
wx.reLaunch和wx.navigateTo,wx.navigateTo的区别 2019-03-23 11:18:05 wx.navigateTo 用于保留当前页面、跳转到应用内的某个页面,使用 wx.navigateBack可以返回到原页面。对于页面不是特别多的小程序,通常推荐使用 wx.n
微信小程序如何从数组里取值_微信小程序 传值取值的几种方法总结 小程序里常见的取值有以下几种,一个完整的项目写下来,用到的概率几乎是100%。 列表index下标取值 页面传值 form表单取值 1. 列表index下标取值 实现方式是:data-index="{{index}}&quot
H5项目接入微信授权登录,通过 UA 区分微信还是普通浏览器: let ua = navigator.userAgent.toLowerCase(); let isWeixin = ua.indexOf('micromessenge
微信小程序获取data-xx=""属性的值,自定义属性设置和获取(data-) 微信小程序<view class="details-btn" data-taskId="111" bindtap='taskdetails&#39
小程序报错:TypeError: Cannot read property ‘addEventListener‘ of undefined 解决办法 将调试基础库由2.16.0(或者当前的) -> 2.14.1 解决问题
H5跳转微信小程序-成功案例(VUE)(踩坑无数) TuoMei 已于 2022-07-29 09:52:22 修改 准备工作 根据官方提供的资料需准备以下几点: 1、已认证的服务号 2、绑定JS接口安全域名 (在微信公众平台设置) 3、IP白名单 (在微信公众平台设置) 4、将小程序和H5公众号进
微信小程序 页面跳转和数据传递实例详解 这篇文章主要介绍了微信小程序 页面跳转和数据传递实例详解的相关资料,这里附有实例代码帮助到家学习理解,需要的朋友可以参考下 微信小程序 页面跳转和数据传递 1.先导 在Android中,我们Activity和Fragment都有栈的概念在里面,微信小程序页面也
情景1.拉取公司代码演示: 因为github有墙,这里我们以gitee(码云)为例作为演示 (其实就是国产github,也非常好用~) 步骤一:打开Git界面 先在一个空文件夹右击Git Bash Here,打开git界面 步骤二:输入克隆远程仓库指令 别人复制的链接在这里获取 拿到别人赋值的链接自
如何开发微信小程序? 作为一名10多年一直从事互联网平台开发的从业者,我来回答下这个问题吧。 微信小程序开发流程总体可以归纳为4个步骤, 老张带您捋一捋整个环节,小白用户可以收藏了。 好了废话不多说,开始! 一、开发前小程序需要准备的资料 我们在开发微信小程序前,需要准备下相关资料。这个资料主要是后
原生小程序开发优化方案 为了更好的制定优化方案,我们 有必要先了解下小程序的底层架构、以及与普通网页开发的差异 小程序最终渲染载体与当下一些热门的技术 Flutter、React Native等不同,依然是浏览器内核,而不是原生客户端。 而对于传统的网页来说,UI 渲染和 JS 脚本是在同一个线程中
1,不要下两倍尺寸的图片, 小程序本身自己就会对元素缩小两倍,设计图片的一杯就已经很清晰了。 2,图片压缩,(主要是压缩静态资源,ps 可以压缩,然后有一些在线压缩工具,保持600-800kb 的静态) 3,通用的代码组件化 4,是在工程量太大可以分包,分包现在最大支持20m(一般都不会去分包的)
文章浏览阅读189次。人工智能研究实验室OpenAI在2022年11月30日发布了自然语言生成模型ChatGPT,上线两个月就已经超过一亿用户,成为了人工智能界当之无愧的超级大网红。ChatGPT凭借着自身强大的拟人化及时应答能力迅速破圈,引起了各行各业的热烈讨论。简单来说ChatGPT就是可以基于用户文本输入自动生成回答的人工智能聊天机器人。那肯定会有人说这不就是Siri嘛,虽然都是交互机器人但是两者的差别可老大了。那么ChatGPT在人机交互时为什么会有这么出色的表现?它到底会不会取代搜索引擎?90%的人真的会因为ChatG
文章浏览阅读193次。8. 导航和路由管理:掌握小程序的导航方式,如使用wx.navigateTo跳转页面、使用wx.redirect重定向页面等,学会实现页面之间的跳转和传参。1. 小程序的基本概念和架构:了解小程序的定义、特点以及与传统APP的区别,掌握小程序的运行环境、组件和API等基本概念。10. 支付功能:学习小程序的支付方式,如微信支付、支付宝支付等,了解支付流程和注意事项,学会实现小程序的支付功能。9. 用户授权和登录:了解小程序的用户授权机制,如获取用户信息、调用微信API等,学会实现用户的登录和注册功能。_微信小程序开发知识点总结
文章浏览阅读4.8k次,点赞7次,收藏18次。一、准备工作1. 安装微信开发者工具,并登录微信小程序账号;2. 准备斗地主游戏的图片资源;3. 准备斗地主游戏的音效资源;二、创建小程序1. 打开微信开发者工具,点击“新建小程序”,输入小程序名称,选择小程序的项目目录,点击“创建”;2. 在小程序的项目目录中,新建文件夹“images”,将准备好的斗地主游戏的图片资源放入“images”文件夹中;3. 在小程序的项目目录中,新建文件夹“sounds”,将准备好的斗地主游戏的音效资源放入“sounds”文件夹中;三、编写代码1. 在小程_扑克牌微信小程序代码
文章浏览阅读3.9k次,点赞3次,收藏7次。一、准备工作:1. 安装微信开发者工具,创建小程序项目;2. 准备游戏角色图片;3. 准备游戏背景音乐;二、实现步骤:1. 创建游戏页面,添加游戏角色图片,添加游戏背景音乐;2. 创建游戏角色类,定义游戏角色属性,如角色名称、角色图片、角色能力等;3. 创建游戏类,定义游戏属性,如游戏人数、游戏角色、游戏规则等;4. 创建游戏控制类,定义游戏流程,如游戏开始、游戏结束、游戏角色分配等;5. 创建游戏界面,实现游戏流程,如游戏开始、游戏结束、游戏角色分配等;6. 创建游戏结果页面,显示游戏_微信小程序游戏代码
文章浏览阅读1.7k次。1. 创建小程序项目:使用微信开发者工具创建一个小程序项目,并在项目中添加一个页面,用于模拟聊天。 2. 定义数据结构:定义一个数据结构,用于存储聊天记录,包括发送者、接收者、消息内容等信息。 3. 实现聊天功能:实现聊天功能,包括发送消息、接收消息、显示消息等功能。 4. 实现界面:使用微信小程序的界面框架,实现聊天界面,包括聊天记录列表、输入框等。代码示例:// 定义数据结构var chatData = { sender: '', receiver: '', message: '' };_制作聊天对话小程序代码
文章浏览阅读2.1k次。1、创建小程序项目:使用微信开发者工具,新建一个小程序项目,输入项目名称,选择项目目录,点击“创建”按钮,即可创建小程序项目。2、添加页面:在小程序项目中,可以添加多个页面,每个页面都有自己的页面文件,比如首页、分类页、购物车页、我的页面等。3、添加组件:在小程序项目中,可以添加多个组件,比如商品列表组件、购物车组件、订单组件等,用于在页面中显示商品信息、购物车信息、订单信息等。4、添加接口:在小程序项目中,可以添加多个接口,用于获取商品信息、购物车信息、订单信息等,以便在页面中显示。5、_微信开发者工具做一个我的商城
文章浏览阅读515次。首先在配置页面index.json 添加以下代码。然后在index.jx页面配置下拉刷新。_小程序云开发上拉刷新