├── template └── itemlist.wxml ├── .gitignore ├── pages ├── index │ ├── index.json │ ├── index.wxss │ ├── index.wxml │ └── index.js ├── detail │ ├── detail.json │ ├── detail.wxml │ ├── detail.wxss │ └── detail.js └── themes │ ├── themes.json │ ├── themes.wxml │ ├── themes.js │ └── themes.wxss ├── demo ├── demo.gif ├── QQ20161009-1@2x.png ├── QQ20161009-2@2x.png ├── QQ20161009-3@2x.png ├── QQ20161009-4@2x.png ├── QQ20161009-5@2x.png └── QQ20161009-6@2x.png ├── static ├── qq.png ├── 001.jpg ├── zan.png ├── loading.gif ├── pengyou.png ├── share.png ├── wechat.png ├── weibo.png ├── weixin.png ├── comments.png ├── wechatHL.png ├── arrowright.png └── loading.svg ├── config.js ├── app.js ├── app.wxss ├── app.json ├── LICENSE ├── README.md └── utils └── util.js /template/itemlist.wxml: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # 忽略 DS_store 文件 3 | .DS_Store 4 | 5 | -------------------------------------------------------------------------------- /pages/index/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "首页" 3 | } -------------------------------------------------------------------------------- /pages/detail/detail.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": " " 3 | } -------------------------------------------------------------------------------- /pages/themes/themes.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": " " 3 | } -------------------------------------------------------------------------------- /demo/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liucaihe/wechat-app-sample/HEAD/demo/demo.gif -------------------------------------------------------------------------------- /static/qq.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liucaihe/wechat-app-sample/HEAD/static/qq.png -------------------------------------------------------------------------------- /static/001.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liucaihe/wechat-app-sample/HEAD/static/001.jpg -------------------------------------------------------------------------------- /static/zan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liucaihe/wechat-app-sample/HEAD/static/zan.png -------------------------------------------------------------------------------- /static/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liucaihe/wechat-app-sample/HEAD/static/loading.gif -------------------------------------------------------------------------------- /static/pengyou.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liucaihe/wechat-app-sample/HEAD/static/pengyou.png -------------------------------------------------------------------------------- /static/share.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liucaihe/wechat-app-sample/HEAD/static/share.png -------------------------------------------------------------------------------- /static/wechat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liucaihe/wechat-app-sample/HEAD/static/wechat.png -------------------------------------------------------------------------------- /static/weibo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liucaihe/wechat-app-sample/HEAD/static/weibo.png -------------------------------------------------------------------------------- /static/weixin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liucaihe/wechat-app-sample/HEAD/static/weixin.png -------------------------------------------------------------------------------- /static/comments.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liucaihe/wechat-app-sample/HEAD/static/comments.png -------------------------------------------------------------------------------- /static/wechatHL.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liucaihe/wechat-app-sample/HEAD/static/wechatHL.png -------------------------------------------------------------------------------- /static/arrowright.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liucaihe/wechat-app-sample/HEAD/static/arrowright.png -------------------------------------------------------------------------------- /demo/QQ20161009-1@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liucaihe/wechat-app-sample/HEAD/demo/QQ20161009-1@2x.png -------------------------------------------------------------------------------- /demo/QQ20161009-2@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liucaihe/wechat-app-sample/HEAD/demo/QQ20161009-2@2x.png -------------------------------------------------------------------------------- /demo/QQ20161009-3@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liucaihe/wechat-app-sample/HEAD/demo/QQ20161009-3@2x.png -------------------------------------------------------------------------------- /demo/QQ20161009-4@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liucaihe/wechat-app-sample/HEAD/demo/QQ20161009-4@2x.png -------------------------------------------------------------------------------- /demo/QQ20161009-5@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liucaihe/wechat-app-sample/HEAD/demo/QQ20161009-5@2x.png -------------------------------------------------------------------------------- /demo/QQ20161009-6@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liucaihe/wechat-app-sample/HEAD/demo/QQ20161009-6@2x.png -------------------------------------------------------------------------------- /config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | 3 | // API 接口 4 | API_HOST : "http://news-at.zhihu.com/api/4/" 5 | 6 | } -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | App({ 2 | onLaunch: function() { 3 | // Do something initial when launch. 4 | }, 5 | onShow: function() { 6 | // Do something when show. 7 | }, 8 | onHide: function() { 9 | // Do something when hide. 10 | }, 11 | globalData: 'I am global data' 12 | }) -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | .container { 3 | height: 100%; 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | justify-content: space-between; 8 | padding: 200rpx 0; 9 | box-sizing: border-box; 10 | } 11 | 12 | page{ 13 | background: #F8F8F8; 14 | } -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/index/index", 4 | "pages/detail/detail", 5 | "pages/themes/themes" 6 | ], 7 | "window":{ 8 | "backgroundTextStyle":"white", 9 | "navigationBarBackgroundColor": "#48C23D", 10 | "navigationBarTitleText": "首页", 11 | "navigationBarTextStyle":"white", 12 | "backgroundColor" : "#FFF" 13 | }, 14 | "debug" : true 15 | } 16 | -------------------------------------------------------------------------------- /static/loading.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /pages/themes/themes.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{dataList.name}} 6 | {{dataList.description}} 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | {{items.title}} 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /pages/themes/themes.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | const util = require( '../../utils/util.js' ); 4 | 5 | Page( { 6 | data: { 7 | dataList : [] 8 | }, 9 | onLoad: function( options ) { 10 | // 页面初始化 options为页面跳转所带来的参数 11 | var that = this, id = options.id; 12 | 13 | // 请求精选数据 14 | util.AJAX( "theme/" + id, function( res ) { 15 | 16 | // 重新写入数据 17 | that.setData( { 18 | dataList: res.data, 19 | }); 20 | }); 21 | 22 | }, 23 | onReady: function() { 24 | // 页面渲染完成 25 | wx.setNavigationBarTitle( { 26 | title: this.data.dataList.name 27 | }) 28 | }, 29 | onShow: function() { 30 | // 页面显示 31 | }, 32 | onHide: function() { 33 | // 页面隐藏 34 | }, 35 | onUnload: function() { 36 | // 页面关闭 37 | } 38 | }) -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 LiuCaiHe 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /pages/themes/themes.wxss: -------------------------------------------------------------------------------- 1 | page{ background: #FFF; font-family: 'Helvetica Neue',Helvetica,Arial,Sans-serif; } 2 | .contain_detail_cnt { height: 100%; width: 100%; overflow: hidden; } 3 | 4 | .themes-box{ background-size: cover; height: 200px; width: 100%; } 5 | 6 | .hot-main{ height: 50px; background: url("../../static/001.jpg") #FFF no-repeat 0 50%; background-size: cover; padding: 30px 20px; position: relative; z-index: 1; } 7 | .hot-main::before{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ''; background-image: linear-gradient(180deg, rgba(0,0,0,0.05) 5%,rgba(0,0,0,0.5) 100%); } 8 | 9 | .hot-main-box{ position: relative; z-index: 2; } 10 | .hot-main-title{ color: #FFF; font-size: 34rpx; } 11 | .hot-main-subtitle{ color: #FFF; font-size: 26rpx; margin-top: 4px; } 12 | 13 | .hot-box-main{ display: block; overflow: hidden; margin-bottom: 20px; background: #FFF; } 14 | .list-box{ padding: 20px 20px 20px 40px; display: block; font-size: 30rpx; border-bottom: 1px solid #F6F6F6; position: relative;} 15 | .list-box::after{ display: block; content: ""; position: absolute; width: 6px; height: 6px; background: #ff6511; border-radius: 50%; top: 25px; left: 20px; } 16 | .list-box-title{ font-weight: 400; line-height: 42rpx; } 17 | .list-box-sub{ font-size: 24rpx; color: #666; padding-top: 6px; } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 微信小程序示例应用 - 知乎日报 2 | 3 | 小程序刚刚出来不就就火爆了整个前端圈, 咱也不干落后的研究了一下, 网上找了个”知乎日报API接口“做了个小项目练手, 基本上还算完整的实现了整个项目, 欢迎 star fork. 4 | 5 | 由于小程序对HTML的不支持, 详情页做了些**简单的过滤**, 基本上看着还行。 6 | 某些网络图片无法显示. 貌似是小程序的BUG。 7 | 8 | 由于小程序的局限性, 很多效果还是无法实现的. 不知道公测是否会开放(！@#￥%……&*（）... 呵呵) 9 | 10 | 没有内测资格, 只能 clone 到本地进行体验了 11 | 12 | 项目持续开发优化, 13 | 14 | ## 更新日志 15 | [fix] 首页无法显示的问题 (11/11)[感谢Di](https://github.com/icindy) 16 | 17 | ## 演示 18 | ![动态图](./demo/demo.gif) 19 | 20 | 21 | ## 目录结构 22 | ``` 23 | ├── app.js 24 | ├── app.json 25 | ├── app.wxss 26 | ├── config.js 27 | ├── pages 28 | │   ├── detail 29 | │   ├── index 30 | │   └── themes 31 | ├── static 32 | │   ├── 001.jpg 33 | │   ├── arrowright.png 34 | │   ├── comments.png 35 | │   ├── loading.gif 36 | │   ├── loading.svg 37 | │   ├── pengyou.png 38 | │   ├── qq.png 39 | │   ├── share.png 40 | │   ├── wechat.png 41 | │   ├── wechatHL.png 42 | │   ├── weibo.png 43 | │   ├── weixin.png 44 | │   └── zan.png 45 | ├── template 46 | │   └── itemlist.wxml 47 | └── utils 48 | └── util.js 49 | ``` 50 | 51 | ## 资源 52 | [知乎日报 API 分析](https://github.com/izzyleung/ZhihuDailyPurify/wiki/知乎日报-API-分析) 53 | 54 | [官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1475052055990) 55 | 56 | ## 项目地址 57 | 58 | [wechat-app-sample](https://github.com/LiuCaiHe/wechat-app-sample) 59 | 60 | 61 | ## 克隆 62 | ``` 63 | $ git clone https://github.com/LiuCaiHe/wechat-app-sample.git 64 | $ cd wechat-app-sample 65 | ``` 66 | 67 | ## 未完待续... 68 | 69 | 70 | ## 截图 71 | ![QQ20161009](./demo/QQ20161009-1@2x.png) 72 | ![QQ20161009](./demo/QQ20161009-2@2x.png) 73 | ![QQ20161009](./demo/QQ20161009-3@2x.png) 74 | ![QQ20161009](./demo/QQ20161009-4@2x.png) 75 | ![QQ20161009](./demo/QQ20161009-5@2x.png) 76 | ![QQ20161009](./demo/QQ20161009-6@2x.png) 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /pages/detail/detail.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{data.title}} 6 | 7 | 8 | 9 | 10 | 11 | 12 | {{item}} 13 | 14 | 15 | 16 | 17 | 18 | 最新评论 19 | 20 | 21 | 22 | 23 | 24 | {{item.likes}} 25 | {{item.author}} 26 | 27 | {{item.content}} 28 | {{item.times}} 29 | 30 | 31 | 32 | 33 | 暂时还没有评论喔! 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /utils/util.js: -------------------------------------------------------------------------------- 1 | 2 | // 加载配置文件 3 | const config = require( '../config.js' ); 4 | 5 | function formatTime( date ) { 6 | 7 | var year = date.getFullYear(); 8 | var month = date.getMonth() + 1; 9 | var day = date.getDate(); 10 | 11 | var hour = date.getHours(); 12 | var minute = date.getMinutes(); 13 | var second = date.getSeconds(); 14 | 15 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':'); 16 | } 17 | 18 | function formatNumber(n) { 19 | n = n.toString(); 20 | return n[1] ? n : '0' + n; 21 | } 22 | 23 | // 格式化时间戳 24 | function getTime( timestamp ) { 25 | var time = arguments[ 0 ] || 0; 26 | var t, y, m, d, h, i, s; 27 | t = time ? new Date( time * 1000 ) : new Date(); 28 | y = t.getFullYear(); // 年 29 | m = t.getMonth() + 1; // 月 30 | d = t.getDate(); // 日 31 | 32 | h = t.getHours(); // 时 33 | i = t.getMinutes(); // 分 34 | s = t.getSeconds(); // 秒 35 | 36 | return [ y, m, d ].map( formatNumber ).join('-') + ' ' + [ h, i, s ].map( formatNumber ).join(':'); 37 | 38 | } 39 | 40 | module.exports = { 41 | 42 | formatTime: formatTime, 43 | getTime : getTime, 44 | 45 | AJAX : function( data = '', fn, method = "get", header = {}){ 46 | wx.request({ 47 | url: config.API_HOST + data, 48 | method : method ? method : 'get', 49 | data: {}, 50 | header: header ? header : {"Content-Type":"application/json"}, 51 | success: function( res ) { 52 | fn( res ); 53 | } 54 | }); 55 | }, 56 | 57 | /** 58 | * 获取格式化日期 59 | * 20161002 60 | */ 61 | getFormatDate : function( str ) { 62 | 63 | // 拆分日期为年 月 日 64 | var YEAR = str.substring( 0, 4 ), 65 | MONTH = str.substring( 4, 6 ), 66 | DATE = str.slice( -2 ); 67 | 68 | // 拼接为 2016/10/02 可用于请求日期格式 69 | var dateDay = YEAR + "/" + MONTH + "/" + DATE; 70 | 71 | // 获取星期几 72 | var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'], 73 | day = new Date( dateDay ).getDay(); 74 | 75 | // 获取前一天日期 根据今天日期获取前一天的日期 76 | // var dateBefore = new Date( new Date( dateDay ) - 1000 * 60 * 60 * 24 ).toLocaleDateString(); 77 | // var dateBefore = dateBefore.split('/'); 78 | // if( dateBefore[1] < 10 ) { 79 | // dateBefore[1] = '0' + dateBefore[1]; 80 | // } 81 | // if( dateBefore[2] < 10 ) { 82 | // dateBefore[2] = '0' + dateBefore[2]; 83 | // } 84 | // dateBefore = dateBefore.join(''); 85 | 86 | return { 87 | "dateDay" : MONTH + "月" + DATE + "日 " + week[ day ] 88 | } 89 | 90 | }, 91 | 92 | } 93 | -------------------------------------------------------------------------------- /pages/detail/detail.wxss: -------------------------------------------------------------------------------- 1 | page{ background: #FFF; font-family: 'Helvetica Neue',Helvetica,Arial,Sans-serif; } 2 | .contain_detail_cnt { height: 100%; width: 100%; overflow: hidden; } 3 | 4 | .box-title{ padding: 25px 20px; background: #f9f9f9; } 5 | .title{ font-size: 18px; line-height: 25px; color: #000; font-weight: 600; } 6 | 7 | .content{ line-height: 1.8em; margin: 20px 0; font-size: 14px; color: #666; } 8 | .scrollLoading{ width: 100%; height: 220px; display: block; margin: 10px 0; } 9 | .contView{ padding: 0 20px 10px; } 10 | 11 | /* 评论 */ 12 | .content-comments{ margin-bottom: 20px; } 13 | .comments-title{ font-size: 14px; font-weight: bold; display: block; text-align: center; padding: 10px; } 14 | 15 | .comments-list{ margin-top: 10px; position: relative; padding: 10px; min-height: 40px;} 16 | .comments-avatar{ position: absolute; top: 10px; left: 10px; width: 40px; height: 40px; } 17 | .comments-avatar-img{ width: 40px; height: 40px; border-radius: 50%; border: 1px solid #F2F2F2; } 18 | .comments-main{ margin-left: 50px; font-size: 14px; } 19 | .comments-author{ margin-bottom: 6px; color: #999; font-weight: bold; height: 20px; line-height: 20px; } 20 | .comments-zan{ float: right; padding-left: 18px; position: relative; font-weight: normal; line-height: 20px; } 21 | .comments-zan::before{ content: ''; height: 14px; width: 14px; background: url("../../static/zan.png") #FFF no-repeat 50% 50%; background-size: cover; position: absolute; top: 2px; left: 0; } 22 | .comments-content{ color: #666; line-height: 20px; } 23 | .comments-data{ height: 18px; margin-top: 5px; line-height: 18px; font-size: 12px; color: #999; } 24 | 25 | .not-comments{ text-align: center; padding: 30px 20px; font-size: 14px; color: #999; } 26 | 27 | /* 浮动 */ 28 | .extra{ height: 40px; background: #FFF; border-top: 1px solid #F2F2F2; position: fixed; bottom: 0px; left: 0; right: 0px; width: 100%; box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1); } 29 | .extra-input{ width: 50%; height: 20px; margin: 10px; font-size: 13px; font-weight: 300; line-height: 20px; padding: 0 6px; border-left: 2px solid #48C23D; color: #444; } 30 | .extra-placeholder{ font-size: 13px; font-weight: 300; color: #999; } 31 | /* 点赞 评论 分享 */ 32 | .extra-share{ position: absolute; right: 5px; width: 50%; } 33 | .extra-share-img{ width: 20px; height: 20px; float: right; padding: 10px 15px; } 34 | 35 | /* 分享box */ 36 | .extra-share-box{ display: none; width: 100%; position: fixed; bottom: 0; left: 0; right: 0; top: 0; height: 100%; } 37 | .share-box-show{ position: absolute; left: 0; right: 0; bottom: -210px; z-index: 2; height: 200px; background: #FFF; } 38 | .share-box-img-box{ padding: 10px 20px; width: 240px; margin: 0 auto; display: block; overflow: hidden; } 39 | .share-box-img{ width: 40px; height: 40px; padding: 10px; margin: 5px 10px; float: left; } 40 | .share-box-opacity{ background: #000; opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } 41 | .share-box-close{ width: 100%; background: #F5F5F5; text-align: center; line-height: 40px; font-size: 14px; } -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | 2 | .swiper-tab{ height: 30px; line-height: 30px; background: #FFF; display: flex; position: relative; z-index: 2; border-bottom: 1px solid #F4F4F4; flex-direction:row; justify-content:center; align-items:center;} 3 | .swiper-tab-list{ margin: 0 20px; padding: 0 4px; font-size: 28rpx; font-family: Helvetica, Arial, "Hiragino Sans GB", "Source Han Sans CN", "PingFang SC", Roboto, "微软雅黑", "Heiti SC", "Microsoft Yahei", sans-serif } 4 | .on{ border-bottom: 1px solid #48C23D; color: #48C23D; } 5 | 6 | .swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; } 7 | 8 | .hot-box{ display: block; height: 100%; font-family: Helvetica, Arial, "Hiragino Sans GB", "Source Han Sans CN", "PingFang SC", Roboto, "微软雅黑", "Heiti SC", "Microsoft Yahei", sans-serif } 9 | .hot-box-main{ display: block; overflow: hidden; margin-bottom: 20px; background: #FFF; } 10 | 11 | .hot-main{ height: 50px; background: url("../../static/001.jpg") #FFF no-repeat 0 50%; background-size: cover; padding: 30px 20px; position: relative; z-index: 1; } 12 | .hot-main::before{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ''; background-image: linear-gradient(180deg, rgba(0,0,0,0.05) 5%,rgba(0,0,0,0.85) 100%); } 13 | 14 | .hot-main-box{ position: relative; z-index: 2; } 15 | .hot-main-title{ color: #FFF; font-size: 34rpx; } 16 | .hot-main-subtitle{ color: #FFF; font-size: 26rpx; margin-top: 4px; } 17 | 18 | .hot-box-top{ padding: 20px; border-bottom: 1px solid #F6F6F6; text-align: center; } 19 | .hot-box-title{ font-size: 32rpx; height: 30px; line-height: 32px; font-weight: 400; color: #444; padding: 5px 10px; border: 1px solid #444; } 20 | 21 | .list-box{ padding: 20px 20px 20px 40px; display: block; font-size: 30rpx; border-bottom: 1px solid #F6F6F6; position: relative;} 22 | .list-box::after{ display: block; content: ""; position: absolute; width: 6px; height: 6px; background: #ff6511; border-radius: 50%; top: 25px; left: 20px; } 23 | .list-box-title{ font-weight: 400; line-height: 42rpx; } 24 | .list-box-sub{ font-size: 24rpx; color: #666; padding-top: 6px; } 25 | 26 | .hot-box-more{ text-align: center; font-size: 22rpx; color: #999; margin-bottom: 30px; } 27 | .hot-box-more image{ width: 80px; height: 16px; display: block; margin: 0 auto;} 28 | 29 | 30 | /*幻灯片*/ 31 | .swiper-boxs { height: 200px; background: #F2F2F2; } 32 | .swiper-boxs-img { display: block; width: 100%; height: 200px; position: relative; } 33 | .swiper-boxs-img::before{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ''; background-image: linear-gradient(180deg, rgba(0,0,0,0.05) 5%,rgba(0,0,0,0.5) 100%);} 34 | 35 | /* 日报 */ 36 | .themes-box{ display: block; } 37 | .themes-box-top{ text-align: center; padding-bottom: 16px; padding-top: 16px; background: #F9F9F9; } 38 | .themes-box-title{ font-size: 16px; font-weight: 500; display: block; } 39 | .themes-box-subtitle{ font-size: 12px; color: #666; display: block; margin-top: 4px; } 40 | 41 | /* 日报列表 */ 42 | .themes-list{ background: #FFF; display: block; margin-bottom: 20px; } 43 | .themes-list-box{ display: block; position: relative; padding: 16px 20px; border-bottom: 1px solid #F2F2F2; } 44 | .themes-list-thumbnail{ position: absolute; left: 20px; top: 16px; height: 40px; width: 40px; } 45 | .themes-list-img{ width: 40px; height: 40px; border-radius: 4px; border: 1px solid #F2F2F2;} 46 | .themes-list-main{ margin-left: 50px; } 47 | .themes-list-name{ font-size: 14px; color: #444; height: 20px; line-height: 20px; overflow: hidden; } 48 | .themes-list-description{ font-size: 12px; color: #999; height: 20px; line-height: 20px; overflow: hidden; } 49 | -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | 日报 9 | 精选 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 19 | 20 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 专栏 46 | 你想要知道日报专栏 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | {{item.name}} 59 | {{item.description}} 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 74 | 75 | 76 | 精选 77 | 呈现最新的精选日报 78 | 79 | 80 | 81 | 82 | 83 | 84 | {{datalist[i].dateDay}} 85 | 86 | 87 | 88 | 89 | {{datalist[i].stories[j].title}} 90 | 知乎日报 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 106 | 107 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | 2 | const util = require('../../utils/util.js'); 3 | 4 | Page({ 5 | data: { 6 | /** 7 | * 页面配置 8 | */ 9 | winWidth: 0, 10 | winHeight: 0, 11 | 12 | // tab切换 13 | currentTab: 0, 14 | 15 | // 幻灯片数据 16 | topStories: [], 17 | // 精选数据 18 | datalist: [], 19 | // 日报数据 20 | dataThemes: [], 21 | 22 | dataListDateCurrent: 0, // 当前日期current 23 | dataListDateCount: 0, // 请求次数 24 | 25 | // 显示加载更多 loading 26 | hothidden: true, 27 | 28 | // loading 29 | hidden: true, 30 | 31 | /** 32 | * 滑动面板参数配置 33 | */ 34 | indicatorDots: false, // 是否显示面板指示点 35 | autoplay: false, // 是否自动切换 36 | interval: 5000, // 自动切换时间间隔 37 | duration: 1000, // 滑动动画时长 38 | 39 | }, 40 | 41 | /** 42 | * 页面初始化 43 | * options 为页面跳转所带来的参数 44 | */ 45 | onLoad: function (options) { 46 | var that = this; 47 | 48 | /** 49 | * 获取系统信息 50 | */ 51 | wx.getSystemInfo({ 52 | 53 | success: function (res) { 54 | that.setData({ 55 | winWidth: res.windowWidth, 56 | winHeight: res.windowHeight 57 | }); 58 | } 59 | 60 | }); 61 | 62 | 63 | /** 64 | * 显示 loading 65 | */ 66 | that.setData({ 67 | hidden: false 68 | }); 69 | 70 | // 请求精选数据 71 | util.AJAX("news/latest", function (res) { 72 | 73 | var arr = res.data; 74 | var format = util.getFormatDate(arr.date); 75 | 76 | // 格式化日期方便加载指定日期数据 77 | // 格式化日期获取星期几方便显示 78 | arr["dateDay"] = format.dateDay; 79 | // 获取当前现有数据进行保存 80 | var list = that.data.datalist; 81 | 82 | // 重新写入数据 83 | that.setData({ 84 | datalist: list.concat(arr), 85 | topStories: arr.top_stories, 86 | dataListDateCurrent: arr.date, // 当前日期 87 | dataListDateCount: 1 88 | }); 89 | }); 90 | 91 | // 请求日报数据 92 | util.AJAX("themes", function (res) { 93 | 94 | var arr = res.data.others; 95 | 96 | // 重新写入数据 97 | that.setData({ 98 | dataThemes: arr, 99 | }); 100 | }); 101 | 102 | }, 103 | onReady: function () { 104 | // 页面渲染完成 105 | var that = this; 106 | 107 | // 数据加载完成后 延迟隐藏loading 108 | setTimeout(function () { 109 | that.setData({ 110 | hidden: true 111 | }) 112 | }, 500); 113 | 114 | 115 | }, 116 | 117 | 118 | /** 119 | * 事件处理 120 | * scrolltolower 自动加载更多 121 | */ 122 | scrolltolower: function (e) { 123 | 124 | var that = this; 125 | 126 | // 加载更多 loading 127 | that.setData({ 128 | hothidden: true 129 | }) 130 | 131 | var currentDate = this.data.dataListDateCurrent; 132 | 133 | // 如果加载数据超过10条 134 | if (this.data.dataListDateCount >= 8) { 135 | 136 | // 加载更多 loading 137 | that.setData({ 138 | hothidden: false 139 | }); 140 | 141 | } else { 142 | 143 | /** 144 | * 发送请求数据 145 | */ 146 | util.AJAX("news/before/" + currentDate, function (res) { 147 | 148 | var arr = res.data; 149 | var format = util.getFormatDate(arr.date); 150 | 151 | // 格式化日期方便加载指定日期数据 152 | // 格式化日期获取星期几方便显示 153 | arr["dateDay"] = format.dateDay; 154 | 155 | // 获取当前数据进行保存 156 | var list = that.data.datalist; 157 | // 然后重新写入数据 158 | that.setData({ 159 | datalist: list.concat(arr), // 存储数据 160 | dataListDateCurrent: arr.date, 161 | dataListDateCount: that.data.dataListDateCount + 1 // 统计加载次数 162 | }); 163 | }); 164 | } 165 | }, 166 | /** 167 | * 滑动切换tab 168 | */ 169 | bindChange: function (e) { 170 | 171 | var that = this; 172 | that.setData({ currentTab: e.detail.current }); 173 | 174 | }, 175 | /** 176 | * 点击tab切换 177 | */ 178 | swichNav: function (e) { 179 | 180 | var that = this; 181 | 182 | if (this.data.currentTab === e.target.dataset.current) { 183 | return false; 184 | } else { 185 | that.setData({ 186 | currentTab: e.target.dataset.current 187 | }) 188 | } 189 | 190 | 191 | }, 192 | }) -------------------------------------------------------------------------------- /pages/detail/detail.js: -------------------------------------------------------------------------------- 1 | 2 | const util = require( '../../utils/util.js' ); 3 | 4 | Page( { 5 | data: { 6 | // text:"这是一个页面" 7 | data: [], 8 | databody: null, 9 | comments : [], // 评论 10 | 11 | winHeight: 0, // 设备高度 12 | 13 | // 弹窗 14 | modalHidden: true, 15 | modalValue: null, 16 | 17 | /** 18 | * 分享配置 19 | */ 20 | shareShow: 'none', 21 | shareOpacity: {}, 22 | shareBottom: {}, 23 | 24 | }, 25 | onLoad: function( options ) { 26 | // 页面初始化 options 为页面跳转所带来的参数 27 | var that = this 28 | var id = options.id; 29 | 30 | 31 | // 请求内容数据 32 | util.AJAX( "news/" + id, function( res ) { 33 | 34 | var arr = res.data; 35 | var body = arr.body; 36 | body = body.match( /

.*?<\/p>/g ); 37 | var ss = []; 38 | for( var i = 0, len = body.length; i < len;i++ ) { 39 | 40 | ss[ i ] = //.test( body[ i ] ); 41 | 42 | if( ss[ i ] ) { 43 | body[ i ] = body[ i ].match( /(http:|https:).*?\.(jpg|jpeg|gif|png)/ ); 44 | } else { 45 | body[ i ] = body[ i ].replace( /

/g, '' ) 46 | .replace( /<\/p>/g, '' ) 47 | .replace( //g, '' ) 48 | .replace( /<\/strong>/g, '' ) 49 | .replace( //g, '' ) 50 | .replace( / /g, ' ' ) 51 | .replace( /“/g, '"' ) 52 | .replace( /”/g, '"' ); 53 | } 54 | } 55 | 56 | // 重新写入数据 57 | that.setData( { 58 | data: arr, 59 | databody: body 60 | }); 61 | 62 | }); 63 | 64 | // 请求评论 65 | util.AJAX( "story/" + id + "/short-comments", function( res ) { 66 | 67 | var arr = res.data.comments; 68 | 69 | for ( var i = 0, len = arr.length; i < len; i++ ){ 70 | arr[i]['times'] = util.getTime( arr[i].time ); 71 | } 72 | 73 | // 重新写入数据 74 | that.setData( { 75 | comments: arr 76 | }); 77 | 78 | }); 79 | 80 | /** 81 | * 获取系统信息 82 | */ 83 | wx.getSystemInfo( { 84 | 85 | success: function( res ) { 86 | that.setData( { 87 | winWidth: res.windowWidth, 88 | winHeight: res.windowHeight 89 | }); 90 | } 91 | }); 92 | 93 | 94 | }, 95 | /** 96 | * 显示分享 97 | */ 98 | showShare: function( e ) { 99 | 100 | // 创建动画 101 | var animation = wx.createAnimation( { 102 | duration: 100, 103 | timingFunction: "ease", 104 | }) 105 | this.animation = animation; 106 | 107 | var that = this; 108 | that.setData( { 109 | shareShow: "block", 110 | }); 111 | 112 | setTimeout( function() { 113 | that.animation.bottom( 0 ).step(); 114 | that.setData( { 115 | shareBottom: animation.export() 116 | }); 117 | }.bind( this ), 400 ); 118 | 119 | // 遮罩层 120 | setTimeout( function() { 121 | that.animation.opacity( 0.3 ).step(); 122 | that.setData( { 123 | shareOpacity: animation.export() 124 | }); 125 | }.bind( this ), 400 ); 126 | 127 | }, 128 | 129 | /** 130 | * 关闭分享 131 | */ 132 | shareClose: function() { 133 | // 创建动画 134 | var animation = wx.createAnimation( { 135 | duration: 0, 136 | timingFunction: "ease" 137 | }) 138 | this.animation = animation; 139 | 140 | var that = this; 141 | 142 | setTimeout( function() { 143 | that.animation.bottom( -210 ).step(); 144 | that.setData( { 145 | shareBottom: animation.export() 146 | }); 147 | }.bind( this ), 500 ); 148 | 149 | setTimeout( function() { 150 | that.animation.opacity( 0 ).step(); 151 | that.setData( { 152 | shareOpacity: animation.export() 153 | }); 154 | }.bind( this ), 500 ); 155 | 156 | setTimeout( function() { 157 | that.setData( { 158 | shareShow: "none", 159 | }); 160 | }.bind( this ), 1500 ); 161 | }, 162 | 163 | /** 164 | * 点击分享图标弹出层 165 | */ 166 | modalTap: function( e ) { 167 | var that = this; 168 | that.setData( { 169 | modalHidden: false, 170 | modalValue: e.target.dataset.share 171 | }) 172 | }, 173 | 174 | /** 175 | * 关闭弹出层 176 | */ 177 | modalChange: function( e ) { 178 | var that = this; 179 | that.setData( { 180 | modalHidden: true 181 | }) 182 | }, 183 | 184 | onReady: function() { 185 | // 页面渲染完成 186 | // 修改页面标题 187 | wx.setNavigationBarTitle( { 188 | title: this.data.data.title 189 | }) 190 | 191 | 192 | }, 193 | onShow: function() { 194 | // 页面显示 195 | }, 196 | onHide: function() { 197 | // 页面隐藏 198 | }, 199 | onUnload: function() { 200 | // 页面关闭 201 | } 202 | }) --------------------------------------------------------------------------------