├── app.js
├── pages
├── details
│ ├── details.json
│ ├── details.wxml
│ ├── details.wxss
│ └── details.js
└── index
│ ├── index.wxml
│ ├── index.wxss
│ └── index.js
├── app.wxss
├── images
└── default.png
├── app.json
├── project.config.json
└── README.md
/app.js:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/pages/details/details.json:
--------------------------------------------------------------------------------
1 | {}
--------------------------------------------------------------------------------
/app.wxss:
--------------------------------------------------------------------------------
1 | /**app.wxss**/
2 |
3 |
--------------------------------------------------------------------------------
/images/default.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stefan-rz/newspaper-cn/HEAD/images/default.png
--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "pages": [
3 | "pages/index/index",
4 | "pages/details/details"
5 | ],
6 | "window": {
7 | "backgroundTextStyle": "dark",
8 | "navigationBarBackgroundColor": "#399DDB",
9 | "navigationBarTitleText": "快读 - 资讯",
10 | "navigationBarTextStyle": "white",
11 | "enablePullDownRefresh": true
12 | }
13 | }
--------------------------------------------------------------------------------
/project.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "description": "项目配置文件。",
3 | "packOptions": {
4 | "ignore": []
5 | },
6 | "setting": {
7 | "urlCheck": true,
8 | "es6": true,
9 | "postcss": true,
10 | "minified": true,
11 | "newFeature": true
12 | },
13 | "compileType": "miniprogram",
14 | "libVersion": "1.9.98",
15 | "appid": "wx29a4e0992a87926d",
16 | "projectname": "newspaper",
17 | "isGameTourist": false,
18 | "condition": {
19 | "search": {
20 | "current": -1,
21 | "list": []
22 | },
23 | "conversation": {
24 | "current": -1,
25 | "list": []
26 | },
27 | "game": {
28 | "currentL": -1,
29 | "list": []
30 | },
31 | "miniprogram": {
32 | "current": -1,
33 | "list": []
34 | }
35 | }
36 | }
--------------------------------------------------------------------------------
/pages/details/details.wxml:
--------------------------------------------------------------------------------
1 |
2 |
11 |
12 |
13 |
14 | {{item.text}}
15 |
16 |
17 |
18 |
19 |
20 | {{item.text}}
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/pages/details/details.wxss:
--------------------------------------------------------------------------------
1 | /* pages/details/details.wxss */
2 |
3 | .news-header-box {
4 | padding-top: 40rpx;
5 | padding-left: 20rpx;
6 | padding-right: 20rpx;
7 | font: bold;
8 | }
9 |
10 | .news-title {
11 | font-size: 50rpx;
12 | font: bold;
13 | }
14 |
15 | .news-source {
16 | padding-right: 20rpx;
17 | }
18 |
19 | .read-text {
20 | padding-left: 450rpx;
21 | }
22 |
23 | .read-counts {
24 | display: flex;
25 | font-size: 20rpx;
26 | padding-left:10rpx;
27 | }
28 | .info-box{
29 | display: flex;
30 | font-size: 20rpx;
31 | padding-top: 10rpx;
32 | color: #A7ABA8;
33 | }
34 |
35 | .images {
36 | width: 650rpx;
37 | height: 400rpx;
38 | margin-left: 25rpx;
39 | }
40 |
41 | .strong-text {
42 | padding: 10rpx;
43 | }
44 |
45 | .news-container {
46 | display: flex;
47 | flex-direction: column;
48 | justify-content: center;
49 | align-content: center;
50 | font-size: 28rpx;
51 | line-height: 40rpx;
52 | }
53 |
54 | .images {
55 | padding-top: 8rpx;
56 | padding-left: 18rpx;
57 | padding-bottom: 6rpx;
58 | }
59 |
60 | .paragraphs {
61 | margin-top: 8rpx;
62 | margin-left: 16rpx;
63 | margin-right: 16rpx;
64 | }
65 |
66 |
67 |
--------------------------------------------------------------------------------
/pages/details/details.js:
--------------------------------------------------------------------------------
1 | // pages/details/details.js
2 | Page({
3 | data: {
4 | id: 0,
5 | title: '',
6 | source: '',
7 | time: '',
8 | readCount: '',
9 | contents: '',
10 | defaultImage: '/images/default.png'
11 | },
12 |
13 | onLoad(options) {
14 | this.setData({
15 | id: options.id
16 | })
17 | this.getNews()
18 | },
19 |
20 | getNews() {
21 | wx.request({
22 | url: 'https://test-miniprogram.com/api/news/detail',
23 | data: {
24 | id: this.data.id
25 | },
26 | success: res => {
27 | this.setNewsDetails(res)
28 | }
29 | })
30 | },
31 |
32 | setNewsDetails(res) {
33 | let result = res.data.result
34 | let arr = result.content
35 | let newsTime = new Date(result.date)
36 | let hour = newsTime.getHours()
37 | let minutes = newsTime.getMinutes()
38 | hour = hour < 10 ? '0' + hour : hour
39 | minutes = minutes < 10 ? '0' + minutes : minutes
40 | this.setData({
41 | title: result.title,
42 | source: result.source == '' ? '来源不明' : result.source,
43 | time: hour + ':' + minutes,
44 | readCount: result.readCount,
45 | contents: arr
46 | })
47 | }
48 | })
--------------------------------------------------------------------------------
/pages/index/index.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | {{item}}
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | {{hotNewsTitle}}
15 |
16 | {{hotNewsResource}}
17 | {{hotNewsTime}}
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | {{item.title}}
28 |
29 | {{item.source}}
30 | {{item.time}}
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/pages/index/index.wxss:
--------------------------------------------------------------------------------
1 | /* pages/index/index.wxss */
2 |
3 | .news-categories {
4 | display:flex;
5 | background-color: #399DDB;
6 | }
7 |
8 | .category {
9 | display: flex;
10 | width: 107rpx;
11 | flex-shrink: 0;
12 | flex-direction: column;
13 | align-items: center;
14 | color: #C4E0F3;
15 | }
16 |
17 |
18 | .news-image-wrapper {
19 | position: relative;
20 | padding-top: 10rpx;
21 | padding-bottom: 10rpx;
22 | }
23 |
24 | .news-image {
25 | width: 650rpx;
26 | height: 400rpx;
27 | margin-left: 50rpx;
28 | z-index: -1;
29 | }
30 |
31 | .text-pos-wrapper {
32 | position: absolute;
33 | left: 54rpx;
34 | width: 640rpx;
35 | bottom: 20rpx;
36 | color: white;
37 | background: rgba(0, 0, 0, 0.75);
38 | }
39 |
40 | .title-info-box {
41 | display: flex;
42 | flex-direction: column;
43 | }
44 |
45 | .news-lists {
46 | display: flex;
47 | flex-direction: row;
48 | align-items: flex-start;
49 | justify-content: space-between;
50 | padding: 20rpx;
51 | }
52 |
53 | .news-title {
54 | flex-shrink: 2;
55 | padding: 20rpx;
56 | font-size: 30rpx;
57 | }
58 |
59 | .news-small-image {
60 | display: flex;
61 | flex-shrink: 0;
62 | width: 220rpx;
63 | height: 150rpx;
64 | padding: 10rpx;
65 | }
66 |
67 | .info-box {
68 | display: flex;
69 | font-size: 25rpx;
70 | color: darkgrey;
71 | padding-left: 20rpx;
72 | }
73 |
74 | .news-source {
75 | padding-right: 10rpx;
76 | }
77 |
78 | .active-tag {
79 | color: white;
80 | }
81 |
82 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Wechat mini program China News
2 | 项目 新闻小程序
3 | =====
4 | ## My Final Project Pages 我的最终项目成果展示
5 | 
6 | 
7 | 
8 |
9 |
10 | 项目概述
11 | ----
12 |
13 | 在这个项目中, 你将会从数据库中获取新闻，并以列表方式呈现。你完成的这个小程序，可以显示不同门类的热点新闻列表，也可以点击访问具体的新闻内容。你可以使用[我们准备好的 API](https://github.com/udacity/cn-wechat-weather/blob/default-1-1/news_project/news_api.md)，也可以使用真实的新闻数据。
14 |
15 | 这个项目不会提供任何代码，你需要新建自己的小程序。
16 |
17 | **当然，即使你还没有全部完成，也可以提交项目来获取一些建议和反馈。**
18 |
19 | 下图为小程序样式参考
20 |
21 | 
22 | 
23 |
24 | 图1.小程序“国内新闻”列表页 图2.小程序“国际新闻”详情页
25 |
26 |
27 |
28 | 你将会学到什么？
29 | ----
30 |
31 | 完成项目后，你将可以：
32 |
33 | * 设计并编写小程序，完成显示任务
34 |
35 | * 开发自己的小程序
36 |
37 | * 学会小程序中列表、分类图文显示的功能
38 |
39 |
40 | 项目提交
41 | -----
42 | 在提交之前，根据项目评审标准检查你的项目。Udacity 的项目评审员会根据这个标准对你的项目给予反馈，并对你的代码给出有用的指导。
43 |
44 | ### 布局
45 | | 标准 | 符合要求 |
46 | | :--------: | :----------------------------------------------------------- |
47 | | 主界面 | 应用包含一个主界面，来展示不同分类下的新闻列表。小程序必须包含图标及题目。 |
48 | | 列表项内容 | 主界面的每个列表项都显示有关该新闻的标题，作者以及发布时间。如果可以获取的
话，图片也应包括在内。请注意，并非所有的响应都包含图片数据，但如果有此数据
，则需要将其包含在内。否则使用一张默认图片来代替。 |
49 | | 详情界面 | 详情界面应包含有关该新闻的标题，作者，发布时间，阅读数以及正文。如相关新闻
含有图片信息，则显示图片，如图片有图名及来源，则显示在图片下方。 |
50 |
51 | ### 功能
52 | | 标准 | 符合要求 |
53 | | :--------------------: | :------------------------------------------- |
54 | | 执行请求与
获取数据 | 请求执行并且取得需要的数据。 |
55 | | 错误 | 代码运行没有错误。 |
56 | | 跳转到详情页 | 可以从主界面的列表项跳转到对应新闻的详情页。 |
57 | | 返回到主界面 | 可以从新闻详情页返回到主界面。 |
58 | | 手势刷新 | 下拉手势激活刷新功能。 |
59 |
60 | ### 代码
61 | | 标准 | 符合要求 |
62 | | :------: | :---------------------------------------------------------- |
63 | | 可读性 | 代码应该易于阅读，方便其它开发者在阅读代码时更容易的理解它们的含义和功能。|
64 | | 代码规范 | 代码应该有规范的格式，即没有多余空行、没有未使用的变量或方法、没有未注释的
代码。 |
65 | | 注释 | 含有注释，以有效说明很长的代码流程。 |
66 | | 编码 | 使用 `wx:for` 动态的显示新闻分类部分（`国内`，`国际`，`财经`，`娱乐`，`军事`，`体育` 和 `其他`）。 |
67 |
68 |
69 |
--------------------------------------------------------------------------------
/pages/index/index.js:
--------------------------------------------------------------------------------
1 | //index.js
2 | const categoryMap = {
3 | '国内': 'gn',
4 | '国际': 'gj',
5 | '财经': 'cj',
6 | '娱乐': 'yl',
7 | '军事': 'js',
8 | '体育': 'ty',
9 | '其他': 'other'
10 | }
11 | Page({
12 | data: {
13 | newsCategories: ['国内','国际','财经','娱乐','军事','体育','其他'],
14 | lgId: 0,
15 | lgImage: '',
16 | hotNewsTitle: '',
17 | hotNewsResource: '',
18 | hotNewsTime: '',
19 | defaultImage: '/images/default.png',
20 | id: 0,
21 | title: '',
22 | smImage: '',
23 | source: '',
24 | time: '',
25 | type: '',
26 | currentItem: '',
27 | currentCategory: '',
28 | newsList: []
29 | },
30 | onLoad() {
31 | this.setData({
32 | type: 'gn'
33 | })
34 | this.getNews()
35 | },
36 | getNews(callback) {
37 | wx.request({
38 | url: 'https://test-miniprogram.com/api/news/list',
39 | data: {
40 | type: this.data.type
41 | },
42 | success: res => {
43 | this.setNewsList(res)
44 | },
45 | complete: () => {
46 | callback && callback()
47 | }
48 | })
49 | },
50 |
51 | onPullDownRefresh() {
52 | this.getNews(() => {
53 | wx.stopPullDownRefresh()
54 | })
55 | },
56 |
57 | setNewsList(res) {
58 | let newsList = []
59 | let result = res.data.result
60 | for (let i = 0; i < result.length; i++) {
61 | let newsTime = new Date(result[i].date)
62 | let hour = newsTime.getHours()
63 | let minutes = newsTime.getMinutes()
64 | hour = hour < 10 ? '0' + hour : hour
65 | minutes = minutes < 10 ? '0' + minutes : minutes
66 | i == 0 ? this.setData({
67 | lgId: result[i].id,
68 | lgImage: (result[i].firstImage == '' || result[i].source == undefined) ? this.data.defaultImage : result[i].firstImage,
69 | hotNewsTitle: result[i].title,
70 | hotNewsResource: (result[i].source == '' || result[i].source == undefined) ? '来源不明' : result[i].source,
71 | hotNewsTime: hour + ':' + minutes
72 | }) : newsList.push({
73 | id: result[i].id,
74 | title: result[i].title,
75 | smImage: (result[i].firstImage == '' || result[i].source == undefined) ? this.data.defaultImage : result[i].firstImage,
76 | source: (result[i].source == '' || result[i].source == undefined) ? '来源不明' : result[i].source,
77 | time: hour + ':' + minutes
78 | })
79 | }
80 |
81 | this.setData({
82 | newsList: newsList
83 | })
84 | },
85 |
86 | onTapCategory(e) {
87 | let category = e.currentTarget.dataset.category
88 | this.setData({
89 | type: categoryMap[category],
90 | currentCategory: category
91 | }),
92 | this.getNews()
93 | },
94 |
95 | onTapNews(e) {
96 | let id = e.currentTarget.dataset.id
97 | wx.navigateTo({
98 | url: '/pages/details/details?id=' + id,
99 | })
100 | }
101 | })
102 |
--------------------------------------------------------------------------------