小程序-demo:知乎日报
ylbtech-小程序-demo:知乎日报 |
1.返回顶部 |
![]() |
![]() |
- //app.js
- App({
- onLaunch: function () {
- //调用API从本地缓存中获取数据
- var logs = wx.getStorageSync('logs') || []
- logs.unshift(Date.now())
- wx.setStorageSync('logs', logs)
- },
- getUserInfo:function(cb){
- var that = this
- if(this.globalData.userInfo){
- typeof cb == "function" && cb(this.globalData.userInfo)
- }else{
- //调用登录接口
- wx.login({
- success: function () {
- wx.getUserInfo({
- success: function (res) {
- that.globalData.userInfo = res.userInfo
- typeof cb == "function" && cb(that.globalData.userInfo)
- }
- })
- }
- })
- }
- },
- globalData:{
- userInfo:null
- }
- })
- {
- "pages":[
- "pages/index/index",
- "pages/theme/theme",
- "pages/detail/detail",
- "pages/list/list"
- ],
- "window":{
- "backgroundTextStyle":"light",
- "navigationBarBackgroundColor": "#00a2ea",
- "navigationBarTitleText": "知乎日报",
- "navigationBarTextStyle": "white"
- },
- "tabBar": {
- "color": "#353535",
- "selectedColor": "#3cc51f",
- "borderStyle": "white",
- "backgroundColor": "#ffffff",
- "list": [{
- "pagePath": "pages/index/index",
- "iconPath": "images/icon_API.png",
- "selectedIconPath": "images/icon_API_HL.png",
- "text": "主页"
- }, {
- "pagePath": "pages/theme/theme",
- "iconPath": "images/icon_component.png",
- "selectedIconPath": "images/icon_component_HL.png",
- "text": "主题日报"
- }]
- },
- "networkTimeout": {
- "request": 120000,
- "downloadFile": 120000
- }
- }
- /**app.wxss**/
- .container {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: flex-start;
- box-sizing: border-box;
- background-color: #f2f2f2;
- }
- {
- "description": "项目配置文件。",
- "packOptions": {
- "ignore": []
- },
- "setting": {
- "urlCheck": false,
- "es6": true,
- "postcss": true,
- "minified": true,
- "newFeature": true
- },
- "compileType": "miniprogram",
- "libVersion": "2.2.3",
- "appid": "wx7d22ab7088f2db6a",
- "projectname": "zhihuApp",
- "isGameTourist": false,
- "condition": {
- "search": {
- "current": -1,
- "list": []
- },
- "conversation": {
- "current": -1,
- "list": []
- },
- "game": {
- "currentL": -1,
- "list": []
- },
- "miniprogram": {
- "current": -1,
- "list": []
- }
- }
- }
- function formatTime(date) {
- var year = date.getFullYear()
- var month = date.getMonth() + 1
- var day = date.getDate()
- var hour = date.getHours()
- var minute = date.getMinutes()
- var second = date.getSeconds()
- return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
- }
- function formatDate(date, split) {
- var year = date.getFullYear()
- var month = date.getMonth() + 1
- var day = date.getDate()
- return [year, month, day].map(formatNumber).join(split || '')
- }
- function formatNumber(n) {
- n = n.toString()
- return n[1] ? n : '0' + n
- }
- module.exports = {
- formatTime: formatTime,
- formatDate: formatDate
- }
2. pages返回顶部 |
- Page({
- data: {
- art: {},
- },
- onReady () {
- wx.setNavigationBarTitle({
- title: '详情页面'
- })
- },
- onLoad (options) {
- var that = this
- wx.request({
- url: 'http://news-at.zhihu.com/api/4/news/' + options.id,
- headers: {
- 'Content-Type': 'application/json'
- },
- success (res) {
- if (res.data.body) {
- var body = res.data.body;
- body = body.match( /<p>.*?<\/p>/g );
- var ss = [];
- if (body) {
- for( var i = 0, len = body.length; i < len;i++ ) {
- ss[ i ] = /<img.*?>/.test( body[ i ] );
- if( ss[ i ] ) {
- body[ i ] = body[ i ].match( /(http:|https:).*?\.(jpg|jpeg|gif|png)/ );
- } else {
- body[ i ] = body[ i ].replace( /<p>/g, '' )
- .replace( /<\/p>/g, '' )
- .replace( /<strong>/g, '' )
- .replace( /<\/strong>/g, '' )
- .replace( /<a.*?\/a>/g, '' )
- .replace( / /g, ' ' )
- .replace( /“/g, '"' )
- .replace( /”/g, '"' );
- }
- }
- }
- res.data.body = body
- }
- that.setData({
- art: res.data
- })
- }
- })
- }
- })
- <!--detail.wxml-->
- <view class="container">
- <view class="art-header">
- <image src="{{art.image}}" class="art-img"/>
- <view class="art-title">{{art.title}}</view>
- <view class="art-source">{{art.image_source}}</view>
- </view>
- <view class="art-content">
- {{art.body}}
- </view>
- </view>
- .art-header{
- position: relative;
- width: 100%;
- height: 219px;
- color: #FFF;
- }
- .art-img{
- width: 100%;
- height: 219px;
- }
- .art-title{
- position: absolute;
- bottom: 36px;
- left: 8px;
- font-size: 16px;
- }
- .art-source {
- position: absolute;
- bottom: 8px;
- font-size: 14px;
- right: 8px;
- }
- .art-content{
- font-size: 14px;
- color: #616466;
- padding-left: 16px;
- padding-right: 16px;
- padding-top: 10px;
- background-color: #FFF;
- line-height: 1.5;
- }
- //index.js
- //获取应用实例
- var app = getApp()
- var utils = require('../../utils/util.js')
- Page({
- data: {
- list: [],
- duration: 2000,
- indicatorDots: true,
- autoplay: true,
- interval: 3000,
- loading: false,
- plain: false
- },
- //事件处理函数
- bindViewTap(e) {
- wx.navigateTo({
- url: '../detail/detail?id=' + e.target.dataset.id
- })
- },
- loadMore (e) {
- if (this.data.list.length === 0) return
- var date = this.getNextDate()
- var that = this
- that.setData({ loading: true })
- wx.request({
- url: 'http://news.at.zhihu.com/api/4/news/before/' + (Number(utils.formatDate(date)) + 1),
- headers: {
- 'Content-Type': 'application/json'
- },
- success (res) {
- that.setData({
- loading: false,
- list: that.data.list.concat([{ header: utils.formatDate(date, '-') }]).concat(res.data.stories)
- })
- }
- })
- },
- getNextDate (){
- const now = new Date()
- now.setDate(now.getDate() - this.index++)
- return now
- },
- onLoad () {
- let that = this
- wx.request({
- url: 'http://news-at.zhihu.com/api/4/news/latest',
- headers: {
- 'Content-Type': 'application/json'
- },
- success (res) {
- that.setData({
- banner: res.data.top_stories,
- list: [{ header: '今日热闻' }].concat(res.data.stories)
- })
- }
- })
- this.index = 1
- //调用应用实例的方法获取全局数据
- // app.getUserInfo(function(userInfo){
- // //更新数据
- // that.setData({
- // userInfo:userInfo
- // })
- // })
- }
- })
- <!--index.wxml-->
- <view class="container">
- <swiper indicator-dots="{{indicatorDots}}"
- autoplay="{{autoplay}}" class="banners" interval="{{interval}}" duration="{{duration}}">
- <block wx:for="{{banner}}">
- <swiper-item class="banner" >
- <image src="{{item.image}}" data-id="{{item.id}}" bindtap="bindViewTap" class="banner-image" width="100%" height="100%"/>
- <text class="banner-title">{{item.title}}</text>
- </swiper-item>
- </block>
- </swiper>
- <view class="news-item-container">
- <block wx:for="{{list}}" wx:for-index="id">
- <text wx:if="{{item.header}}" class="sub-title">{{item.header}}</text>
- <navigator wx:else url="../detail/detail?id={{item.id}}">
- <view class="news-item" >
- <view class="news-item-left">
- <text class="news-item-title">{{item.title}}</text>
- </view>
- <view class="news-item-right">
- <image src="{{item.images[0]}}" class="news-image"/>
- </view>
- </view>
- </navigator>
- </block>
- <button type="primary" class="load-btn" loading="{{loading}}" plain="{{plain}}" bindtap="loadMore"> 更多 </button>
- </view>
- </view>
- /**index.wxss**/
- .banners {
- width: 100%;
- height: 200px;
- }
- .banner{
- position: relative;
- }
- .banner-image{
- width: 100%;
- height: 100%;
- }
- .banner-title{
- color: #FFF;
- position: absolute;
- width: 100%;
- padding-left: 16px;
- padding-right: 16px;
- bottom: 30px;
- font-size: 16px;
- left:;
- }
- .sub-title{
- color: #76787e;
- height: 36px;
- line-height: 36px;
- padding: 0 16px;
- width: 100%;
- font-size: 14px;
- padding-left: 16px;
- padding-right: 16px;
- }
- .news-item-container {
- background-color: #f2f2f2;
- width: 100%;
- padding-left: 8px;
- padding-right: 8px;
- }
- .news-item {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- padding-left: 8px;
- padding-top: 8px;
- padding-right: 8px;
- padding-bottom: 8px;
- margin-left: 8px;
- margin-right: 8px;
- margin-top: 8px;
- background-color: #fff;
- border: 1px solid #eaeaea;
- border-bottom: 1px solid #d0d0d0;
- border-radius: 5px;
- }
- .news-item-right{
- width: 80px;
- height: 80px;
- }
- .news-image{
- width: 80px;
- height: 80px;
- }
- .news-item-title{
- font-size: 16px;
- }
- .load-btn{
- margin-left: 8px;
- margin-right: 8px;
- margin-top: 16px;
- margin-bottom: 16px;
- display: block;
- line-height: 2.3;
- font-size: 13px;
- padding: 0 1.34em;
- }
- Page({
- data: {
- list: {}
- },
- onReady: function () {
- wx.setNavigationBarTitle({
- title: this.title
- })
- },
- onLoad: function (options) {
- var that = this
- this.title = options.title
- wx.request({
- url: 'http://news-at.zhihu.com/api/4/theme/' + options.id,
- headers: {
- 'Content-Type': 'application/json'
- },
- success: function (res) {
- that.setData({
- list: res.data.stories
- })
- console.log(res.data)
- }
- })
- }
- })
- <!--list.wxml-->
- <view class="container">
- <view class="news-item-container">
- <navigator url="../detail/detail?id={{item.id}}" wx:for="{{list}}" wx:for-index="id">
- <view class="news-item" >
- <view class="news-item-left">
- <text class="news-item-title">{{item.title}}</text>
- </view>
- <view class="news-item-right">
- <image src="{{item.images[0]}}" class="news-image"/>
- </view>
- </view>
- </navigator>
- </view>
- </view>
- .news-item-container {
- background-color: #f2f2f2;
- width: 100%;
- padding-left: 8px;
- padding-right: 8px;
- }
- .news-item {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- padding-left: 8px;
- padding-top: 8px;
- padding-right: 8px;
- padding-bottom: 8px;
- margin-left: 8px;
- margin-right: 8px;
- margin-top: 8px;
- background-color: #fff;
- border: 1px solid #eaeaea;
- border-bottom: 1px solid #d0d0d0;
- border-radius: 5px;
- }
- .news-item-right{
- width: 80px;
- height: 80px;
- }
- .news-image{
- width: 80px;
- height: 80px;
- }
- .news-item-title{
- font-size: 16px;
- }
- Page({
- data: {
- list: []
- },
- onLoad: function () {
- var that = this
- wx.request({
- url: 'http://news-at.zhihu.com/api/4/themes',
- headers: {
- 'Content-Type': 'application/json'
- },
- success: function (res) {
- that.setData({
- list: res.data.others
- })
- }
- })
- }
- })
- <!--theme.wxml-->
- <view class="container">
- <navigator class="card" url="../list/list?id={{item.id}}&title={{item.name}}" wx:for="{{list}}">
- <image src="{{item.thumbnail}}" class="card-image"></image>
- <view class="card-content">
- <view>
- <text class="card-title">{{item.name}}</text>
- </view>
- <view>
- <text class="card-desc">{{item.description}}</text>
- </view>
- </view>
- </navigator>
- </view>
- .card {
- width: 100%;
- margin-top: 8px;
- margin-bottom: 8px;
- background-color: #FFF;
- }
- .card-image{
- width: 100%;
- height: 168px;
- }
- .card-content{
- padding-left: 16px;
- padding-right: 16px;
- padding-bottom: 10px;
- }
- .card-title{
- font-size: 16px;
- line-height: 1.6;
- }
- .card-desc {
- font-size: 14px;
- }
3.返回顶部 |
4. 资源Json返回顶部 |
|
|
|
|
|
5.返回顶部 |
6.返回顶部 |
![]() |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
小程序-demo:知乎日报的更多相关文章
- 微信小程序之知乎日报
上一次的<微信小程序之小豆瓣图书>制作了一个图书的查询功能,只是简单地应用到了网络请求,其他大多数小程序应有的知识.而本次的示例是知乎日报,功能点比较多,页面也比上次复杂了许多.在我编写这 ...
- 近期热门微信小程序demo源码下载汇总
近期微信小程序demo源码下载汇总,乃小程序学习分析必备素材!点击标题即可下载: 即速应用首发!原创!电商商场Demo 优质微信小程序推荐 -秀人美女图 图片下载.滑动翻页 微信小程序 - 新词 GE ...
- 微信小程序DEMO初体验
小程序虽然被炒的很热,但是绝大部分人却从未亲自体验过,在2017年的上班第一天,献上一个小程序DEMO,您可以体验! 注意:由于微信限制,只能使用扫一扫来体验下方小程序DEMO. DEMO首页截图如下 ...
- 微信小程序demo
微信小程序demo github地址 去年小程序刚发布时特别火,赶潮流做了个demo.感觉小程序开发还是比较简单的,主要是官方文档写得比较好,遗憾的是很多API需要微信认证才能使用. 由于小程序包大小 ...
- 微信小程序demo-环球小镇
微信小程序-环球小镇说明:实现了环球小镇(huanqiuxiaozhen.com)移动端商城客户端部分功能,包括首页,分类,购物车,帐户,品牌列表,商品详情等功能. 项目下载:http://bb ...
- 微信小程序必知相关知识
微信小程序必知相关知识 1 请谈谈微信小程序主要目录和文件的作用? project.config.json 项目配置文件,用得最多的就是配置是否开启https校验: App.js 设置一些全局的基础数 ...
- 番外篇!全球首个微信应用号开发教程!小程序 DEMO 视频奉上!
大家好,我是博卡君.经过国庆节的七天假期,相信很多朋友都已经研究出自己的小程序 demo 了吧?我最近也利用休息时间关注了一下网上关于小程序开发的讨论,今天就利用这个番外篇谈谈自己对小程序的一些想法吧 ...
- 基于olami开放语义平台的微信小程序遥知之源码实现
概述 实现一个智能生活信息查询的小秘书功能,支持查天气.新闻.日历.汇率.笑话.故事.百科.诗词.邮编.区号.菜谱.股票.节目预告,还支持闲聊.算24点.数学计算.单位换算.购物.搜索等功能. 使用方 ...
- 微信小程序-阅读小程序demo
今天和朋友聊天说到小程序,然后看在看书,然后我们就弄了个小读书的demo,然后现在分享一下. 一.先来上图: 二.然后下面是详细的说明 首先先说下边的tabBar,项目采用json格式的数据配置,不 ...
随机推荐
- 洛谷P2814 家谱(gen)
题目背景 现代的人对于本家族血统越来越感兴趣. 题目描述 给出充足的父子关系,请你编写程序找到某个人的最早的祖先. 输入输出格式 输入格式: 输入由多行组成,首先是一系列有关父子关系的描述,其中每一组 ...
- 【POJ3264】Balanced Lineup(RMQ)
题意:每天,农夫 John 的N(1 <= N <= 50,000)头牛总是按同一序列排队. 有一天, John 决定让一些牛们玩一场飞盘比赛. 他准备找一群在对列中为置连续的牛来进行比赛 ...
- UVAlive 3026 KMP 最小循环节
KMP算法: 一:next数组:next[i]就是前面长度为i的字符串前缀和后缀相等的最大长度,也即索引为i的字符失配时的前缀函数. 二:KMP模板 /* pku3461(Oulipo), hdu17 ...
- OSGI是什么
OSGI(Open Services Gateway Initiative),或者通俗点说JAVA动态模块系统,定义了一套模块应用开发的框架.OSGI容器实现方案如Knopflerfish, Equi ...
- weblogic线程阻塞性能调优(图解)
转自:http://blog.csdn.net/z69183787/article/details/12647539 声明:出现这个问题有程序方面.网络方面.weblogic设置方面等等原因,此文章主 ...
- Bag-of-words模型、TF-IDF模型
Bag-of-words model (BoW model) 最早出现在NLP和IR(information retrieval)领域. 该模型忽略掉文本的语法和语序, 用一组无序的单词(words) ...
- 【stl学习笔记】set、multiset
set和multiset会根据特定的排序准则,自动将元素排序.两者不同处在于multiset允许元素重复而set不允许 在使用set或multiset之前,必须先加入头文件<set> se ...
- [经典面试题]在O(1)时间删除链表结点
[题目] 给定链表的头指针和一个结点指针.在O(1)时间删除该结点.链表结点的定义例如以下: struct ListNode { int value; struct ListNode* ...
- asp.net mvc3的静态化实现
静态化处理,可以大大提高客户的访问浏览速度,提高用户体验,同时也降低了服务器本身的压力.在asp.net mvc3中,可以相对容易地处理静态化问题,不用过多考虑静态网页的同步,生成等等问题.我提供这个 ...
- 《The Swift Programming Language》的笔记-第28页
页 本页里的主要内容是: 1 介绍swift语言里的各类数制,或者说某一整数的不同表示形式. 1)十进制,无前缀 的序列 3)八进制,以0o开头.后边是若干0~7的序列 进制,以0x开头.后是0~9. ...