├── pages
├── post
│ ├── post.json
│ ├── post-comment
│ │ ├── post-comment.json
│ │ ├── post-comment.wxml
│ │ ├── post-comment.js
│ │ └── post-comment.wxss
│ ├── post-detail
│ │ ├── post-detail.json
│ │ ├── post-detail.wxml
│ │ ├── post-detail.wxss
│ │ └── post-detail.js
│ ├── post.wxss
│ ├── post-item
│ │ ├── post-item-tpl.wxml
│ │ └── post-item-tpl.wxss
│ ├── post.wxml
│ └── post.js
├── movie
│ ├── movie.json
│ ├── more-movie
│ │ ├── more-movie.wxss
│ │ ├── more-movie.json
│ │ ├── more-movie.wxml
│ │ └── more-movie.js
│ ├── movie.wxss
│ ├── movie-grid
│ │ ├── movie-grid-tpl.wxss
│ │ └── movie-grid-tpl.wxml
│ ├── single-movie
│ │ ├── movie-tpl.wxss
│ │ └── movie-tpl.wxml
│ ├── stars
│ │ ├── stars-tpl.wxss
│ │ └── stars-tpl.wxml
│ ├── movie.wxml
│ ├── movie-list
│ │ ├── movie-list-tpl.wxss
│ │ └── movie-list-tpl.wxml
│ └── movie.js
├── orange
│ ├── orange.json
│ ├── orange.wxss
│ ├── orange.wxml
│ └── orange.js
└── welcome
│ ├── welcome.wxss
│ ├── welcome.json
│ ├── welcome.wxml
│ └── welcome.js
├── mina-lifecycle.png
├── images
├── post
│ ├── post-1.jpg
│ ├── post-2.jpg
│ ├── post-3.jpg
│ ├── post-4.jpg
│ ├── post-5.jpg
│ ├── post-1@text.jpg
│ ├── post-2@text.jpg
│ └── post-3@text.jpg
├── avatar
│ ├── avatar-1.png
│ ├── avatar-2.png
│ ├── avatar-3.png
│ ├── avatar-4.png
│ └── avatar-5.png
├── comment
│ ├── train-1.jpg
│ ├── train-2.jpg
│ ├── train-3.jpg
│ └── train-4.jpg
└── icon
│ ├── wx_app_add.png
│ ├── wx_app_exl.png
│ ├── wx_app_pdf.png
│ ├── wx_app_ppt.png
│ ├── wx_app_xx.png
│ ├── wx_app_clear.png
│ ├── wx_app_like.png
│ ├── wx_app_liked.png
│ ├── wx_app_list.png
│ ├── wx_app_movie.png
│ ├── wx_app_news.png
│ ├── wx_app_scan.png
│ ├── wx_app_shake.png
│ ├── wx_app_speak.png
│ ├── wx_app_star.png
│ ├── wx_app_view.png
│ ├── wx_app_voice.png
│ ├── wx_app_word.png
│ ├── wx_app_camera.png
│ ├── wx_app_collect.png
│ ├── wx_app_compass.png
│ ├── wx_app_keyboard.png
│ ├── wx_app_location.png
│ ├── wx_app_lonlat.png
│ ├── wx_app_message.png
│ ├── wx_app_movie@HL.png
│ ├── wx_app_network.png
│ ├── wx_app_news@HL.png
│ ├── wx_app_setting.png
│ ├── wx_app_cellphone.png
│ ├── wx_app_collected.png
│ ├── wx_app_music_stop.png
│ ├── wx_app_scan_code.png
│ ├── wx_app_setting@HL.png
│ ├── wx_app_star@half.png
│ ├── wx_app_star@none.png
│ ├── wx_app_arrow_right.png
│ ├── wx_app_local_files.png
│ ├── wx_app_music_start.png
│ └── wx_app_upload_image.png
├── app.wxss
├── project.config.json
├── app.json
├── LICENSE
├── .gitignore
├── app.js
├── db
└── DBPost.js
├── util
└── util.js
├── data
└── data.js
└── README.md
/pages/post/post.json:
--------------------------------------------------------------------------------
1 | {}
--------------------------------------------------------------------------------
/pages/movie/movie.json:
--------------------------------------------------------------------------------
1 | {}
--------------------------------------------------------------------------------
/pages/orange/orange.json:
--------------------------------------------------------------------------------
1 | {}
--------------------------------------------------------------------------------
/pages/welcome/welcome.wxss:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/pages/post/post-comment/post-comment.json:
--------------------------------------------------------------------------------
1 | {}
--------------------------------------------------------------------------------
/pages/post/post-detail/post-detail.json:
--------------------------------------------------------------------------------
1 | {}
--------------------------------------------------------------------------------
/pages/orange/orange.wxss:
--------------------------------------------------------------------------------
1 | /* pages/orange/orange.wxss */
--------------------------------------------------------------------------------
/pages/movie/more-movie/more-movie.wxss:
--------------------------------------------------------------------------------
1 | @import "../movie-grid/movie-grid-tpl.wxss";
--------------------------------------------------------------------------------
/pages/welcome/welcome.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarBackgroundColor": "#ecc0a8"
3 | }
--------------------------------------------------------------------------------
/mina-lifecycle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/mina-lifecycle.png
--------------------------------------------------------------------------------
/pages/orange/orange.wxml:
--------------------------------------------------------------------------------
1 |
2 | pages/orange/orange.wxml
3 |
--------------------------------------------------------------------------------
/images/post/post-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/post/post-1.jpg
--------------------------------------------------------------------------------
/images/post/post-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/post/post-2.jpg
--------------------------------------------------------------------------------
/images/post/post-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/post/post-3.jpg
--------------------------------------------------------------------------------
/images/post/post-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/post/post-4.jpg
--------------------------------------------------------------------------------
/images/post/post-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/post/post-5.jpg
--------------------------------------------------------------------------------
/images/avatar/avatar-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/avatar/avatar-1.png
--------------------------------------------------------------------------------
/images/avatar/avatar-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/avatar/avatar-2.png
--------------------------------------------------------------------------------
/images/avatar/avatar-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/avatar/avatar-3.png
--------------------------------------------------------------------------------
/images/avatar/avatar-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/avatar/avatar-4.png
--------------------------------------------------------------------------------
/images/avatar/avatar-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/avatar/avatar-5.png
--------------------------------------------------------------------------------
/images/comment/train-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/comment/train-1.jpg
--------------------------------------------------------------------------------
/images/comment/train-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/comment/train-2.jpg
--------------------------------------------------------------------------------
/images/comment/train-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/comment/train-3.jpg
--------------------------------------------------------------------------------
/images/comment/train-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/comment/train-4.jpg
--------------------------------------------------------------------------------
/images/icon/wx_app_add.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_add.png
--------------------------------------------------------------------------------
/images/icon/wx_app_exl.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_exl.png
--------------------------------------------------------------------------------
/images/icon/wx_app_pdf.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_pdf.png
--------------------------------------------------------------------------------
/images/icon/wx_app_ppt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_ppt.png
--------------------------------------------------------------------------------
/images/icon/wx_app_xx.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_xx.png
--------------------------------------------------------------------------------
/pages/movie/more-movie/more-movie.json:
--------------------------------------------------------------------------------
1 | {
2 | "enablePullDownRefresh": true,
3 | "backgroundTextStyle": "dark"
4 | }
--------------------------------------------------------------------------------
/images/icon/wx_app_clear.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_clear.png
--------------------------------------------------------------------------------
/images/icon/wx_app_like.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_like.png
--------------------------------------------------------------------------------
/images/icon/wx_app_liked.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_liked.png
--------------------------------------------------------------------------------
/images/icon/wx_app_list.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_list.png
--------------------------------------------------------------------------------
/images/icon/wx_app_movie.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_movie.png
--------------------------------------------------------------------------------
/images/icon/wx_app_news.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_news.png
--------------------------------------------------------------------------------
/images/icon/wx_app_scan.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_scan.png
--------------------------------------------------------------------------------
/images/icon/wx_app_shake.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_shake.png
--------------------------------------------------------------------------------
/images/icon/wx_app_speak.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_speak.png
--------------------------------------------------------------------------------
/images/icon/wx_app_star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_star.png
--------------------------------------------------------------------------------
/images/icon/wx_app_view.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_view.png
--------------------------------------------------------------------------------
/images/icon/wx_app_voice.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_voice.png
--------------------------------------------------------------------------------
/images/icon/wx_app_word.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_word.png
--------------------------------------------------------------------------------
/images/post/post-1@text.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/post/post-1@text.jpg
--------------------------------------------------------------------------------
/images/post/post-2@text.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/post/post-2@text.jpg
--------------------------------------------------------------------------------
/images/post/post-3@text.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/post/post-3@text.jpg
--------------------------------------------------------------------------------
/images/icon/wx_app_camera.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_camera.png
--------------------------------------------------------------------------------
/images/icon/wx_app_collect.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_collect.png
--------------------------------------------------------------------------------
/images/icon/wx_app_compass.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_compass.png
--------------------------------------------------------------------------------
/images/icon/wx_app_keyboard.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_keyboard.png
--------------------------------------------------------------------------------
/images/icon/wx_app_location.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_location.png
--------------------------------------------------------------------------------
/images/icon/wx_app_lonlat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_lonlat.png
--------------------------------------------------------------------------------
/images/icon/wx_app_message.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_message.png
--------------------------------------------------------------------------------
/images/icon/wx_app_movie@HL.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_movie@HL.png
--------------------------------------------------------------------------------
/images/icon/wx_app_network.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_network.png
--------------------------------------------------------------------------------
/images/icon/wx_app_news@HL.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_news@HL.png
--------------------------------------------------------------------------------
/images/icon/wx_app_setting.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_setting.png
--------------------------------------------------------------------------------
/images/icon/wx_app_cellphone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_cellphone.png
--------------------------------------------------------------------------------
/images/icon/wx_app_collected.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_collected.png
--------------------------------------------------------------------------------
/images/icon/wx_app_music_stop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_music_stop.png
--------------------------------------------------------------------------------
/images/icon/wx_app_scan_code.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_scan_code.png
--------------------------------------------------------------------------------
/images/icon/wx_app_setting@HL.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_setting@HL.png
--------------------------------------------------------------------------------
/images/icon/wx_app_star@half.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_star@half.png
--------------------------------------------------------------------------------
/images/icon/wx_app_star@none.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_star@none.png
--------------------------------------------------------------------------------
/images/icon/wx_app_arrow_right.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_arrow_right.png
--------------------------------------------------------------------------------
/images/icon/wx_app_local_files.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_local_files.png
--------------------------------------------------------------------------------
/images/icon/wx_app_music_start.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_music_start.png
--------------------------------------------------------------------------------
/images/icon/wx_app_upload_image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeyu/orange-can-step-by-step/HEAD/images/icon/wx_app_upload_image.png
--------------------------------------------------------------------------------
/pages/movie/more-movie/more-movie.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/pages/movie/movie.wxss:
--------------------------------------------------------------------------------
1 | /* pages/movie/movie.wxss */
2 | @import "movie-list/movie-list-tpl.wxss";
3 |
4 | .container {
5 | background-color: #f2f2f2;
6 | }
7 |
8 | .movies-template {
9 | margin-bottom: 30rpx;
10 | }
--------------------------------------------------------------------------------
/pages/post/post.wxss:
--------------------------------------------------------------------------------
1 | /* pages/post/post.wxss */
2 | @import "post-item/post-item-tpl.wxss";
3 | swiper{
4 | width: 100%;
5 | height: 600rpx;
6 | }
7 | swiper image{
8 | width: 100%;
9 | height: 600rpx;
10 | }
11 |
--------------------------------------------------------------------------------
/pages/movie/movie-grid/movie-grid-tpl.wxss:
--------------------------------------------------------------------------------
1 | @import "../single-movie/movie-tpl.wxss";
2 |
3 | .single-view-container{
4 | float:left;
5 | margin-bottom: 40rpx;
6 | }
7 |
8 | .grid-container{
9 | height: 1300rpx;
10 | margin:40rpx 0 40rpx 6rpx;
11 | }
--------------------------------------------------------------------------------
/pages/welcome/welcome.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | Hello, 桔子罐头
4 |
5 | 开启小程序之旅
6 |
7 |
--------------------------------------------------------------------------------
/pages/movie/single-movie/movie-tpl.wxss:
--------------------------------------------------------------------------------
1 | @import "../stars/stars-tpl.wxss";
2 |
3 | .movie-container{
4 | display:flex;
5 | flex-direction:column;
6 | padding:0 22rpx;
7 | }
8 | .movie-img{
9 | width:200rpx;
10 | height:270rpx;
11 | padding-bottom:20rpx;
12 | }
13 | .movie-title{
14 | margin-bottom:16rpx;
15 | font-size:24rpx;
16 | }
--------------------------------------------------------------------------------
/pages/movie/stars/stars-tpl.wxss:
--------------------------------------------------------------------------------
1 | .stars-container{
2 | display:flex;
3 | flex-direction:row;
4 | }
5 | .stars{
6 | display:flex;
7 | flex-direction:row;
8 | height:17rpx;
9 | margin-right:24rpx;
10 | margin-top:6rpx;
11 | }
12 | .stars image{
13 | padding-left:3rpx;
14 | height:17rpx;
15 | width:17rpx;
16 | }
17 | .star-score{
18 | color:#4a6141;
19 | }
--------------------------------------------------------------------------------
/pages/movie/movie-grid/movie-grid-tpl.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/pages/movie/single-movie/movie-tpl.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | {{title}}
6 |
7 |
8 |
--------------------------------------------------------------------------------
/pages/movie/movie.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/pages/movie/stars/stars-tpl.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | {{score}}
11 |
12 |
--------------------------------------------------------------------------------
/pages/movie/movie-list/movie-list-tpl.wxss:
--------------------------------------------------------------------------------
1 | @import "../single-movie/movie-tpl.wxss";
2 |
3 | .movie-list-container {
4 | background-color: #fff;
5 | display: flex;
6 | flex-direction: column;
7 | }
8 |
9 | .inner-container{
10 | margin: 0 auto 20rpx;
11 | }
12 |
13 | .movie-head {
14 | padding: 30rpx 20rpx 22rpx;
15 | }
16 |
17 | .slogan {
18 | font-size: 24rpx;
19 | }
20 |
21 | .more {
22 | float: right;
23 | }
24 |
25 | .more-text {
26 | vertical-align: middle;
27 | margin-right: 10rpx;
28 | color: #4A6141;
29 | }
30 |
31 | .more-img {
32 | width: 9rpx;
33 | height: 16rpx;
34 | vertical-align: middle;
35 | }
36 |
37 | .movies-container{
38 | display:flex;
39 | flex-direction: row;
40 | }
41 |
--------------------------------------------------------------------------------
/pages/welcome/welcome.js:
--------------------------------------------------------------------------------
1 | Page({
2 | onTapJump: function (event) {
3 | wx.switchTab({
4 | url: '../post/post',
5 | success: function () {
6 | console.log("jump success");
7 | },
8 | fail: function () {
9 | console.log("jump fail");
10 | },
11 | complete: function () {
12 | console.log("jump complete");
13 | }
14 | })
15 | },
16 | /**
17 | * 生命周期函数--监听页面隐藏
18 | */
19 | onHide: function () {
20 | console.log("onHide: 隐藏");
21 | },
22 |
23 | /**
24 | * 生命周期函数--监听页面卸载
25 | */
26 | onUnload: function () {
27 | console.log("onUnload: 卸载");
28 | },
29 | /**
30 | * 用户点击右上角分享
31 | */
32 | onShareAppMessage: function () {
33 |
34 | }
35 | })
--------------------------------------------------------------------------------
/app.wxss:
--------------------------------------------------------------------------------
1 | .container{
2 | display: flex;
3 | flex-direction: column;
4 | align-items: center;
5 | }
6 | .avatar{
7 | width: 200rpx;
8 | height: 200rpx;
9 | margin-top: 160rpx;
10 | }
11 | .motto{
12 | margin-top: 100rpx;
13 | font-size: 32rpx;
14 | font-weight: bold;
15 | color: #9f4311;
16 | }
17 | .journey-container{
18 | margin-top: 200rpx;
19 | border: 1px solid #ea5a3c;
20 | width: 200rpx;
21 | height: 80rpx;
22 | border-radius: 5px;
23 | text-align: center;
24 | }
25 | .journey{
26 | font-size: 22rpx;
27 | font-weight: bold;
28 | line-height: 80rpx;
29 | color: #ea5a3c;
30 | }
31 | text{
32 | font-family: Microsoft YaHei;
33 | font-size: 24rpx;
34 | color: #666;
35 | }
36 | page{
37 | background-color: #ecc0a8;
38 | }
--------------------------------------------------------------------------------
/pages/post/post-item/post-item-tpl.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | {{date}}
6 |
7 | {{title}}
8 |
9 | {{content}}
10 |
11 |
12 | {{collectionNum}}
13 |
14 | {{readingNum}}
15 |
16 | {{commentNum}}
17 |
18 |
19 |
--------------------------------------------------------------------------------
/pages/post/post.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/project.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "description": "项目配置文件。",
3 | "setting": {
4 | "urlCheck": false,
5 | "es6": true,
6 | "postcss": true,
7 | "minified": true,
8 | "newFeature": true
9 | },
10 | "compileType": "miniprogram",
11 | "libVersion": "1.9.94",
12 | "appid": "touristappid",
13 | "projectname": "OrangeCan",
14 | "condition": {
15 | "search": {
16 | "current": -1,
17 | "list": []
18 | },
19 | "conversation": {
20 | "current": -1,
21 | "list": []
22 | },
23 | "plugin": {
24 | "current": -1,
25 | "list": []
26 | },
27 | "game": {
28 | "currentL": -1,
29 | "list": []
30 | },
31 | "miniprogram": {
32 | "current": -1,
33 | "list": [
34 | {
35 | "id": -1,
36 | "name": "启动post-detail",
37 | "pathName": "pages/post/post-detail/post-detail",
38 | "query": "id=2"
39 | }
40 | ]
41 | }
42 | }
43 | }
--------------------------------------------------------------------------------
/pages/movie/movie-list/movie-list-tpl.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | {{categoryTitle}}
7 |
8 | 更多
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/pages/orange/orange.js:
--------------------------------------------------------------------------------
1 | // pages/orange/orange.js
2 | Page({
3 |
4 | /**
5 | * 页面的初始数据
6 | */
7 | data: {
8 |
9 | },
10 |
11 | /**
12 | * 生命周期函数--监听页面加载
13 | */
14 | onLoad: function (options) {
15 |
16 | },
17 |
18 | /**
19 | * 生命周期函数--监听页面初次渲染完成
20 | */
21 | onReady: function () {
22 |
23 | },
24 |
25 | /**
26 | * 生命周期函数--监听页面显示
27 | */
28 | onShow: function () {
29 |
30 | },
31 |
32 | /**
33 | * 生命周期函数--监听页面隐藏
34 | */
35 | onHide: function () {
36 |
37 | },
38 |
39 | /**
40 | * 生命周期函数--监听页面卸载
41 | */
42 | onUnload: function () {
43 |
44 | },
45 |
46 | /**
47 | * 页面相关事件处理函数--监听用户下拉动作
48 | */
49 | onPullDownRefresh: function () {
50 |
51 | },
52 |
53 | /**
54 | * 页面上拉触底事件的处理函数
55 | */
56 | onReachBottom: function () {
57 |
58 | },
59 |
60 | /**
61 | * 用户点击右上角分享
62 | */
63 | onShareAppMessage: function () {
64 |
65 | }
66 | })
--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "pages": [
3 | "pages/welcome/welcome",
4 | "pages/post/post",
5 | "pages/post/post-detail/post-detail",
6 | "pages/post/post-comment/post-comment",
7 | "pages/movie/movie",
8 | "pages/movie/more-movie/more-movie",
9 | "pages/orange/orange"
10 | ],
11 | "window": {
12 | "navigationBarBackgroundColor": "#4a6141"
13 | },
14 | "tabBar": {
15 | "borderStyle": "white",
16 | "selectedColor": "#4A6141",
17 | "color": "#333",
18 | "backgroundColor": "#fff",
19 | "position": "bottom",
20 | "list": [
21 | {
22 | "pagePath": "pages/post/post",
23 | "text": "文字",
24 | "iconPath": "images/icon/wx_app_news.png",
25 | "selectedIconPath": "images/icon/wx_app_news@HL.png"
26 | },
27 | {
28 | "pagePath": "pages/movie/movie",
29 | "text": "光影",
30 | "iconPath": "images/icon/wx_app_movie.png",
31 | "selectedIconPath": "images/icon/wx_app_movie@HL.png"
32 | }
33 | ]
34 | },
35 | "networkTimeout": {
36 | "request": 30000
37 | }
38 | }
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 zhu yu
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 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 |
39 | # Typescript v1 declaration files
40 | typings/
41 |
42 | # Optional npm cache directory
43 | .npm
44 |
45 | # Optional eslint cache
46 | .eslintcache
47 |
48 | # Optional REPL history
49 | .node_repl_history
50 |
51 | # Output of 'npm pack'
52 | *.tgz
53 |
54 | # Yarn Integrity file
55 | .yarn-integrity
56 |
57 | # dotenv environment variables file
58 | .env
59 |
60 |
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 |
2 | App({
3 |
4 | /**
5 | * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
6 | */
7 | onLaunch: function () {
8 | var key = "postList";
9 | var storageData = wx.getStorageSync(key)
10 | if (!storageData) {
11 | var dataObj = require("data/data.js")
12 | wx.clearStorageSync();
13 | wx.setStorage({
14 | key: key,
15 | data: dataObj.postList,
16 | success: function () {
17 | //success
18 | },
19 | fail: function () {
20 | //fail
21 | },
22 | complete: function () {
23 | //complete
24 | }
25 | })
26 | }
27 |
28 | },
29 | globalData:{
30 | g_isPlayingMusic:false,
31 | g_currentMusicPostId:null,
32 | doubanBase:"https://douban.uieee.com"
33 |
34 | },
35 | /**
36 | * 当小程序启动，或从后台进入前台显示，会触发 onShow
37 | */
38 | onShow: function (options) {
39 |
40 | },
41 |
42 | /**
43 | * 当小程序从前台进入后台，会触发 onHide
44 | */
45 | onHide: function () {
46 |
47 | },
48 |
49 | /**
50 | * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
51 | */
52 | onError: function (msg) {
53 | console.log(msg);
54 | }
55 | })
56 |
--------------------------------------------------------------------------------
/pages/post/post-item/post-item-tpl.wxss:
--------------------------------------------------------------------------------
1 | .post-container{
2 | flex-direction:column;
3 | display:flex;
4 | margin:20rpx 0 40rpx;
5 | background-color:#fff;
6 | border-bottom: 1px solid #ededed;
7 | border-top: 1px solid #ededed;
8 | padding-bottom: 5px;
9 | }
10 |
11 | .post-author-date{
12 | margin: 10rpx 0 20rpx 10px;
13 | display:flex;
14 | flex-direction: row;
15 | align-items: center;
16 | }
17 |
18 | .post-author-date image{
19 | width:60rpx;
20 | height:60rpx;
21 | }
22 | .post-author-date text{
23 | margin-left: 20px;
24 | }
25 |
26 | .post-image{
27 | width:100%;
28 | height:340rpx;
29 | margin-bottom: 15px;
30 | }
31 |
32 | .post-date{
33 | font-size:26rpx;
34 | margin-bottom: 10px;
35 | }
36 | .post-title{
37 | font-size:16px;
38 | font-weight: 600;
39 | color:#333;
40 | margin-bottom: 10px;
41 | margin-left: 10px;
42 | }
43 | .post-content{
44 | color:#666;
45 | font-size:26rpx;
46 | margin-bottom:20rpx;
47 | margin-left: 20rpx;
48 | letter-spacing:2rpx;
49 | line-height: 40rpx;
50 | }
51 | .post-like{
52 | display:flex;
53 | flex-direction: row;
54 | font-size:13px;
55 | line-height: 16px;
56 | margin-left: 10px;
57 | align-items: center;
58 | }
59 |
60 | .post-like image{
61 | height:16px;
62 | width:16px;
63 | margin-right: 8px;
64 | }
65 |
66 | .post-like text{
67 | margin-right: 20px;
68 | }
--------------------------------------------------------------------------------
/pages/post/post-detail/post-detail.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | {{post.title}}
6 |
7 |
8 |
9 | {{post.author}}
10 |
11 | {{post.dateTime}}
12 |
13 | {{post.detail}}
14 |
15 |
16 |
17 |
18 |
19 | {{post.upNum}}
20 |
21 |
25 |
26 |
27 |
28 | {{post.collectionNum}}
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/pages/post/post-detail/post-detail.wxss:
--------------------------------------------------------------------------------
1 | /* pages/post/post-detail/post-detail.wxss */
2 | .post-detail-container {
3 | display: flex;
4 | flex-direction: column;
5 | }
6 |
7 | .head-image {
8 | width: 750rpx;
9 | height: 460rpx;
10 | }
11 |
12 | .title {
13 | float:left;
14 | font-size: 20px;
15 | margin: 30rpx;
16 | letter-spacing: 2px;
17 | color: #4b556c;
18 | }
19 |
20 | .author-date {
21 | display: flex;
22 | flex-direction: row;
23 | margin-top: 15rpx;
24 | margin-left: 30rpx;
25 | align-items: center;
26 | justify-content: space-between;
27 | font-size:13px;
28 | }
29 |
30 | .author-box {
31 | display:flex;
32 | flex-direction: row;
33 | align-items: center;
34 | }
35 |
36 | .post-detail-avatar {
37 | height: 50rpx;
38 | width: 50rpx;
39 | }
40 |
41 | .author {
42 | font-weight: 300;
43 | margin-left: 20rpx;
44 | color: #666;
45 | }
46 |
47 | .date {
48 | color: #919191;
49 | margin-right: 38rpx;
50 | }
51 |
52 |
53 |
54 | .detail {
55 | color: #666;
56 | margin: 40rpx 22rpx 0;
57 | line-height: 44rpx;
58 | letter-spacing: 1px;
59 | font-size:14px;
60 | }
61 | .tool{
62 | height:64rpx;
63 | text-align:center;
64 | line-height:64rpx;
65 | margin:20rpx 28rpx 20rpx 0
66 | }
67 | .tool-item{
68 | display:inline-block;
69 | vertical-align:top;
70 | margin-right:30rpx;
71 | }
72 | .tool-item image{
73 | height:30rpx;
74 | width:30rpx;
75 | vertical-align:-3px;
76 | margin-right:10rpx;
77 | }
78 | .comment image{
79 | transform:scale(.85);
80 | }
81 | .music{
82 | width: 110rpx;
83 | height: 110rpx;
84 | position: absolute;
85 | left: 50%;
86 | margin-left: -51rpx;
87 | top: 180rpx;
88 | opacity: 0.9
89 | }
--------------------------------------------------------------------------------
/pages/post/post.js:
--------------------------------------------------------------------------------
1 | // pages/post/post.js
2 | import {DBPost} from "../../db/DBPost.js";
3 | Page({
4 |
5 | /**
6 | * 页面的初始数据
7 | */
8 | data: {
9 | //date: "Mar 31 2018",
10 | //title: "看哈根达斯如何成为最贵最成功的冰淇凌",
11 | //postImg: "/images/post/post-4.jpg",
12 | //avatar: "/images/avatar/avatar-3.png",
13 | //content: "身在冰淇淋行业中，没有人是不知道哈根达斯的。在冰淇淋行业中，哈根达斯就堪比香奈儿、爱马仕这样的奢侈品品牌，女孩子们也对其情有//独钟。要知道，哈根达斯冰淇淋的价格是普通冰淇淋的5-10倍，但是 ...",
14 | //readingNum: 900,
15 | //collectionNum: { array: [101] },
16 | //commentNum: 4
17 | },
18 |
19 | /**
20 | * 生命周期函数--监听页面加载
21 | */
22 | onLoad: function (options) {
23 | var dbPost = new DBPost();
24 | this.setData({
25 | postList: dbPost.getAllPostData()
26 | })
27 | console.log("onLoad: 加载");
28 | },
29 | onTapToDetail:function(event){
30 | var postId = event.currentTarget.dataset.postId;
31 | console.log(postId);
32 | wx.navigateTo({
33 | url: 'post-detail/post-detail?id=' + postId,
34 | })
35 | },
36 |
37 | /**
38 | * 生命周期函数--监听页面初次渲染完成
39 | */
40 | onReady: function () {
41 | console.log("onReady: 渲染");
42 | },
43 |
44 | /**
45 | * 生命周期函数--监听页面显示
46 | */
47 | onShow: function () {
48 | console.log("onShow: 显示");
49 | },
50 |
51 | /**
52 | * 生命周期函数--监听页面隐藏
53 | */
54 | onHide: function () {
55 | console.log("onHide: 隐藏");
56 | },
57 |
58 | /**
59 | * 生命周期函数--监听页面卸载
60 | */
61 | onUnload: function () {
62 | console.log("onUnload: 卸载");
63 | },
64 |
65 | /**
66 | * 页面相关事件处理函数--监听用户下拉动作
67 | */
68 | onPullDownRefresh: function () {
69 |
70 | },
71 |
72 | /**
73 | * 页面上拉触底事件的处理函数
74 | */
75 | onReachBottom: function () {
76 |
77 | },
78 |
79 | /**
80 | * 用户点击右上角分享
81 | */
82 | onShareAppMessage: function () {
83 |
84 | },
85 | onSwiperTap:function(event){
86 | var postId = event.target.dataset.postId;
87 | wx.navigateTo({
88 | url: 'post-detail/post-detail?id='+postId,
89 | });
90 | }
91 | })
--------------------------------------------------------------------------------
/pages/movie/more-movie/more-movie.js:
--------------------------------------------------------------------------------
1 | var app = getApp()
2 | var util = require('../../../util/util.js')
3 | Page({
4 | data: {
5 | movies: []
6 | },
7 | onLoad: function (options) {
8 | var category = options.category;
9 | this.data.navigateTitle = category;
10 | var dataUrl = "";
11 | switch (category) {
12 | case "正在热映":
13 | dataUrl = app.globalData.doubanBase +
14 | "/v2/movie/in_theaters";
15 | break;
16 | case "即将上映":
17 | dataUrl = app.globalData.doubanBase +
18 | "/v2/movie/coming_soon";
19 | break;
20 | case "豆瓣Top250":
21 | dataUrl = app.globalData.doubanBase + "/v2/movie/top250";
22 | break;
23 | }
24 | this.data.requestUrl = dataUrl;
25 | util.http(dataUrl, this.processDoubanData)
26 | wx.showNavigationBarLoading();
27 | },
28 |
29 | onReady: function () {
30 | wx.setNavigationBarTitle({
31 | title: this.data.navigateTitle
32 | });
33 | wx.showNavigationBarLoading()
34 | },
35 |
36 | processDoubanData: function (moviesDouban) {
37 | var movies = [];
38 | for (var idx in moviesDouban.subjects) {
39 | var subject = moviesDouban.subjects[idx];
40 | var title = subject.title;
41 | if (title.length >= 6) {
42 | title = title.substring(0, 6) + "...";
43 | }
44 | var temp = {
45 | stars: util.convertToStarsArray(subject.rating.stars),
46 | title: title,
47 | average: subject.rating.average,
48 | coverageUrl: subject.images.large,
49 | movieId: subject.id
50 | }
51 | movies.push(temp)
52 | }
53 | var totalMovies = []
54 | totalMovies = this.data.movies.concat(movies);
55 | this.setData({
56 | movies: totalMovies
57 | });
58 | wx.stopPullDownRefresh();
59 | //隐藏loading状态
60 | wx.hideNavigationBarLoading();
61 | },
62 | onPullDownRefresh: function (event) {
63 | var refreshUrl = this.data.requestUrl + "?star=0&count=20";
64 | this.data.movies = [];
65 | util.http(refreshUrl, this.processDoubanData);
66 | wx.showNavigationBarLoading();
67 | },
68 | onReachBottom:function(event){
69 | var totalCount = this.data.movies.length;
70 | var nextUrl = this.data.requestUrl + "?start=" + totalCount + "&count=20";
71 | util.http(nextUrl, this.processDoubanData);
72 | wx.showNavigationBarLoading();
73 | }
74 | });
--------------------------------------------------------------------------------
/db/DBPost.js:
--------------------------------------------------------------------------------
1 | var util = require('../util/util.js')
2 | class DBPost {
3 | constructor(postId) {
4 | this.storageKeyName = "postList";
5 | this.postId = postId;
6 | }
7 |
8 | getAllPostData() {
9 | var res = wx.getStorageSync(this.storageKeyName);
10 | if (!res) {
11 | res = require("../data/data.js").postList;
12 | this.execSetStorageSync(res);
13 | }
14 | return res;
15 | }
16 | execSetStorageSync(data) {
17 | wx.setStorageSync(this.storageKeyName, data);
18 | }
19 | getPostItemById() {
20 | var postsData = this.getAllPostData();
21 | var len = postsData.length;
22 | for (var i = 0; i < len; i++) {
23 | if (postsData[i].postId == this.postId) {
24 | return {
25 | index: i,
26 | data: postsData[i]
27 | }
28 | }
29 | }
30 | }
31 | updatePostData(action, newComment) {
32 | const itemData = this.getPostItemById();
33 | let postData = itemData.data;
34 | let allPostData = this.getAllPostData();
35 | switch (action) {
36 | case "collect":
37 | if (!postData.collectionStatus) {
38 | postData.collectionStatus = true;
39 | postData.collectionNum++;
40 | } else {
41 | postData.collectionStatus = false;
42 | postData.collectionNum--;
43 | }
44 | break;
45 | case "up":
46 | if (!postData.upStatus) {
47 | postData.upStatus = true;
48 | postData.upNum++;
49 | } else {
50 | postData.upStatus = false;
51 | postData.upNum--;
52 | }
53 | break;
54 | case "comment":
55 | postData.comments.push(newComment);
56 | postData.commentNum++;
57 | break;
58 | case "reading":
59 | postData.readingNum++;
60 | break;
61 | default:
62 | break;
63 | }
64 | allPostData[itemData.index] = postData;
65 | this.execSetStorageSync(allPostData);
66 | return postData;
67 | }
68 | collect() {
69 | return this.updatePostData('collect');
70 | }
71 | up() {
72 | return this.updatePostData('up');
73 | }
74 | getCommentData() {
75 | var itemData = this.getPostItemById().data;
76 | itemData.comments.sort(this.compareWithTime);
77 | var len = itemData.comments.length, comment;
78 | for (var i = 0; i < len; i++) {
79 | comment = itemData.comments[i];
80 | comment.create_time = util.getDiffTime(comment.create_time, true);
81 | }
82 | return itemData.comments;
83 | }
84 | newComment(newComment){
85 | this.updatePostData('comment', newComment);
86 | }
87 | addReadingTimes(){
88 | this.updatePostData("reading");
89 | }
90 | compareWithTime(value1, value2) {
91 | var flag = parseFloat(value1.create_time) - parseFloat(value2.create_time);
92 | if (flag < 0) {
93 | return 1;
94 | } else if (flag > 0) {
95 | return -1
96 | } else {
97 | return 0;
98 | }
99 | }
100 | };
101 | export { DBPost }
--------------------------------------------------------------------------------
/pages/movie/movie.js:
--------------------------------------------------------------------------------
1 | // pages/movie/movie.js
2 | var util = require('../../util/util.js');
3 | var app = getApp();
4 | Page({
5 |
6 | /**
7 | * 页面的初始数据
8 | */
9 | data: {
10 | inTheaters: {},
11 | comingSoon: {},
12 | top250: {}
13 | },
14 |
15 | /**
16 | * 生命周期函数--监听页面加载
17 | */
18 | onLoad: function (options) {
19 | var inTheatersUrl = app.globalData.doubanBase +
20 | "/v2/movie/in_theaters" + "?start=0&count=3";
21 | var comingSoonUrl = app.globalData.doubanBase +
22 | "/v2/movie/coming_soon" + "?start=0&count=3";
23 | var top250Url = app.globalData.doubanBase +
24 | "/v2/movie/top250" + "?start=0&count=3";
25 |
26 | this.getMovieListData(inTheatersUrl, "inTheaters", "正在热映");
27 | this.getMovieListData(comingSoonUrl, "comingSoon", "即将上映");
28 | this.getMovieListData(top250Url, "top250", "豆瓣Top250");
29 | },
30 | getMovieListData: function (url, settedKey, categoryTitle) {
31 | var that = this;
32 | wx.request({
33 | url: url,
34 | method: 'GET',
35 | header: {
36 | "content-type": "json"
37 | },
38 | success: function (res) {
39 | that.processDoubanData(res.data, settedKey, categoryTitle);
40 | },
41 | fail: function (error) {
42 | console.log(error);
43 | }
44 | })
45 | },
46 | processDoubanData: function (moviesDouban, settedKey, categoryTitle) {
47 | var movies = [];
48 | for (var idx in moviesDouban.subjects) {
49 | var subject = moviesDouban.subjects[idx];
50 | var title = subject.title;
51 | if (title.length > 6) {
52 | title = title.substring(0, 6) + "...";
53 | }
54 | var temp = {
55 | stars: util.convertToStarsArray(subject.rating.stars),
56 | title: title,
57 | average: subject.rating.average,
58 | coverageUrl: subject.images.large,
59 | movieId: subject.id
60 | }
61 | movies.push(temp);
62 | }
63 | var readyData = {};
64 | readyData[settedKey] = {
65 | categoryTitle: categoryTitle,
66 | movies: movies
67 | }
68 | this.setData(readyData);
69 | },
70 | onMoreTap: function (event) {
71 | var category = event.currentTarget.dataset.category;
72 | wx.navigateTo({
73 | url: 'more-movie/more-movie?category=' + category,
74 | })
75 | },
76 | /**
77 | * 生命周期函数--监听页面初次渲染完成
78 | */
79 | onReady: function () {
80 |
81 | },
82 |
83 | /**
84 | * 生命周期函数--监听页面显示
85 | */
86 | onShow: function () {
87 |
88 | },
89 |
90 | /**
91 | * 生命周期函数--监听页面隐藏
92 | */
93 | onHide: function () {
94 |
95 | },
96 |
97 | /**
98 | * 生命周期函数--监听页面卸载
99 | */
100 | onUnload: function () {
101 |
102 | },
103 |
104 | /**
105 | * 页面相关事件处理函数--监听用户下拉动作
106 | */
107 | onPullDownRefresh: function () {
108 |
109 | },
110 |
111 | /**
112 | * 页面上拉触底事件的处理函数
113 | */
114 | onReachBottom: function () {
115 |
116 | },
117 |
118 | /**
119 | * 用户点击右上角分享
120 | */
121 | onShareAppMessage: function () {
122 |
123 | }
124 | })
--------------------------------------------------------------------------------
/pages/post/post-comment/post-comment.wxml:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/util/util.js:
--------------------------------------------------------------------------------
1 | /*
2 | *根据客户端的时间信息得到发表评论的时间格式
3 | *多少分钟前，多少小时前，然后是昨天，然后再是月日
4 | * Para :
5 | * recordTime - {float} 时间戳
6 | * yearsFlag -{bool} 是否要年份
7 | */
8 | function getDiffTime(recordTime,yearsFlag) {
9 | if (recordTime) {
10 | recordTime=new Date(parseFloat(recordTime)*1000);
11 | var minute = 1000 * 60,
12 | hour = minute * 60,
13 | day = hour * 24,
14 | now=new Date(),
15 | diff = now -recordTime;
16 | var result = '';
17 | if (diff < 0) {
18 | return result;
19 | }
20 | var weekR = diff / (7 * day);
21 | var dayC = diff / day;
22 | var hourC = diff / hour;
23 | var minC = diff / minute;
24 | if (weekR >= 1) {
25 | var formate='MM-dd hh:mm';
26 | if(yearsFlag){
27 | formate='yyyy-MM-dd hh:mm';
28 | }
29 | return recordTime.format(formate);
30 | }
31 | else if (dayC == 1 ||(hourC <24 && recordTime.getDate()!=now.getDate())) {
32 | result = '昨天'+recordTime.format('hh:mm');
33 | return result;
34 | }
35 | else if (dayC > 1) {
36 | var formate='MM-dd hh:mm';
37 | if(yearsFlag){
38 | formate='yyyy-MM-dd hh:mm';
39 | }
40 | return recordTime.format(formate);
41 | }
42 | else if (hourC >= 1) {
43 | result = parseInt(hourC) + '小时前';
44 | return result;
45 | }
46 | else if (minC >= 1) {
47 | result = parseInt(minC) + '分钟前';
48 | return result;
49 | } else {
50 | result = '刚刚';
51 | return result;
52 | }
53 | }
54 | return '';
55 | }
56 |
57 | /*
58 | *拓展Date方法。得到格式化的日期形式
59 | *date.format('yyyy-MM-dd')，date.format('yyyy/MM/dd'),date.format('yyyy.MM.dd')
60 | *date.format('dd.MM.yy'), date.format('yyyy.dd.MM'), date.format('yyyy-MM-dd HH:mm')
61 | *使用方法 如下：
62 | * var date = new Date();
63 | * var todayFormat = date.format('yyyy-MM-dd'); //结果为2015-2-3
64 | *Parameters:
65 | *format - {string} 目标格式 类似('yyyy-MM-dd')
66 | *Returns - {string} 格式化后的日期 2015-2-3
67 | *
68 | */
69 | (function initTimeFormat(){
70 | Date.prototype.format = function (format) {
71 | var o = {
72 | "M+": this.getMonth() + 1, //month
73 | "d+": this.getDate(), //day
74 | "h+": this.getHours(), //hour
75 | "m+": this.getMinutes(), //minute
76 | "s+": this.getSeconds(), //second
77 | "q+": Math.floor((this.getMonth() + 3) / 3), //quarter
78 | "S": this.getMilliseconds() //millisecond
79 | }
80 | if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
81 | (this.getFullYear() + "").substr(4 - RegExp.$1.length));
82 | for (var k in o) if (new RegExp("(" + k + ")").test(format))
83 | format = format.replace(RegExp.$1,
84 | RegExp.$1.length == 1 ? o[k] :
85 | ("00" + o[k]).substr(("" + o[k]).length));
86 | return format;
87 | };
88 | })()
89 |
90 | //将50、35、00等形式转化成[1,1,1,1,1]的形式
91 | function convertToStarsArray(stars) {
92 | var num = stars / 10;
93 | var array = [];
94 | for (var i = 1; i <= 5; i++) {
95 | if (i <= num) {
96 | array.push(1);
97 | }
98 | else {
99 | if((i-num) === 0.5){
100 | array.push(0.5)
101 | }
102 | else{
103 | array.push(0);
104 | }
105 | }
106 | }
107 | return array;
108 | }
109 |
110 | function http(url, callBack) {
111 | wx.request({
112 | url: url,
113 | method: 'GET',
114 | header: {
115 | "content-type": "json"
116 | },
117 | success: function (res) {
118 | callBack(res.data);
119 | },
120 | fail: function (error) {
121 | console.log(error)
122 | }
123 | })
124 | }
125 |
126 | //将数组转换为以 / 分隔的字符串
127 | function convertToCastString(casts) {
128 | var castsjoin = "";
129 | for (var idx in casts) {
130 | castsjoin = castsjoin + casts[idx].name + " / ";
131 | }
132 | return castsjoin.substring(0, castsjoin.length - 2);
133 | }
134 |
135 | function convertToCastInfos(casts) {
136 | var castsArray = []
137 | for (var idx in casts) {
138 | var cast = {
139 | img: casts[idx].avatars ? casts[idx].avatars.large : "",
140 | name: casts[idx].name
141 | }
142 | castsArray.push(cast);
143 | }
144 | return castsArray;
145 | }
146 |
147 |
148 | module.exports = {
149 | getDiffTime: getDiffTime,
150 | convertToStarsArray:convertToStarsArray,
151 | http:http,
152 | convertToCastString:convertToCastString,
153 | convertToCastInfos:convertToCastInfos
154 | }
155 |
--------------------------------------------------------------------------------
/data/data.js:
--------------------------------------------------------------------------------
1 | var postList = [{
2 | postId: 1,
3 | date: "Feb 10 2018",
4 | title: "看哈根达斯如何成为最贵最成功的冰淇凌",
5 | postImg: "/images/post/post-4.jpg",
6 | avatar: "/images/avatar/avatar-3.png",
7 | content: "身在冰淇淋行业中，没有人是不知道哈根达斯的。在冰淇淋行业中，哈根达斯就堪比香奈儿、爱马仕这样的奢侈品品牌，女孩子们也对其情有独钟。要知道，哈根达斯冰淇淋的价格是普通冰淇淋的5-10倍，但是 ...",
8 | readingNum: 900,
9 | collectionNum: 101,
10 | collectionStatus:true,
11 | commentNum: 4,
12 | upNum: 55,
13 | upStatus: false,
14 | author: "林白衣",
15 | dateTime: "24小时前",
16 | detail: "年少时，有几样东西，是春节里必不可少的：烟花、新衣、凉菜、压岁钱、饺子。年分大小年，有的地方是腊月二十三过小年，而有的地方是腊月二十四。童年的春节都是在小县城里度过，那时候的冬天还很冷，池塘的水会结冰，房屋上总是倒挂着一条条的冰棱，菜地里的白菜被厚厚的积雪覆盖着，只露出一小撮白绿相间的菜头，而茎部，竟然像是没有了一般...",
17 | comments:[]
18 | }, {
19 | postId: 2,
20 | date: "Oct 08 2017",
21 | title: "记忆里的春节",
22 | postImg: "/images/post/post-1.jpg",
23 | avatar: "/images/avatar/avatar-1.png",
24 | content: "记忆里的春节小的时候，特别盼望过年。有好吃的，有好玩的，有热闹可以看，还有新衣服可以穿。在乡下，每到腊月，家家户户开始陆续地杀猪。 ...",
25 | readingNum: 723,
26 | collectionNum: 12,
27 | collectionStatus: true,
28 | commentNum: 9,
29 | upNum: 55,
30 | upStatus: false,
31 | author: "林白衣",
32 | dateTime: "24小时前",
33 | detail: "年少时，有几样东西，是春节里必不可少的：烟花、新衣、凉菜、压岁钱、饺子。年分大小年，有的地方是腊月二十三过小年，而有的地方是腊月二十四。童年的春节都是在小县城里度过，那时候的冬天还很冷，池塘的水会结冰，房屋上总是倒挂着一条条的冰棱，菜地里的白菜被厚厚的积雪覆盖着，只露出一小撮白绿相间的菜头，而茎部，竟然像是没有了一般...",
34 | comments: [{
35 | username: '青石',
36 | avatar: '/images/avatar/avatar-3.png',
37 | create_time: '1484723344',
38 | content: {
39 | txt: ' 那一年的毕业季，我们挥挥手，来不及说再见，就踏上了远行的火车。',
40 | img: ["/images/comment/train-1.jpg", "/images/comment/train-2.jpg", "/images/comment/train-3.jpg"],
41 | audio: null
42 | }
43 | }, {
44 | username: '水清',
45 | avatar: '/images/avatar/avatar-2.png',
46 | create_time: '1481018319',
47 | content: {
48 | txt: '夏日的蝉鸣与夜晚的火车，时长会在未来无数的日子里不断的在我耳边响起，难以忘怀',
49 | img: [],
50 | audio: null,
51 | }
52 | },
53 | {
54 | username: '赤墨',
55 | avatar: '/images/avatar/avatar-1.png',
56 | create_time: '1484496000',
57 | content: {
58 | txt: '时光的湮染，自然的吞噬，让太多的老火车站也消失得无影无踪',
59 | img: ["/images/comment/train-4.jpg",],
60 | audio: null,
61 | }
62 | },
63 | {
64 | username: '林白',
65 | avatar: '/images/avatar/avatar-4.png',
66 | create_time: '1484582400',
67 | content: {
68 | txt: '',
69 | img: [],
70 | audio: { url: "http://123", timeLen: 8 },
71 | }
72 | }],
73 | music: {
74 | url: "http://ws.stream.qqmusic.qq.com/C100003XYcCu3IZKLc.m4a?fromtag=38",
75 | title: "老狼 虎口脱险",
76 | coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000002sNbWp3royJG.jpg?max_age=2592000"
77 | }
78 | }, {
79 | postId: 3,
80 | date: "Jun 20 2017",
81 | title: "村旁那飞驰而过的列车",
82 | postImg: "/images/post/post-5.jpg",
83 | avatar: "/images/avatar/avatar-2.png",
84 | content: "自打我小时候记事到如今，村旁那铁路和飞驰的列车，虽经多次变迁，但总是从我的家乡杜家堡村旁经过。那些呼啸而过的列车，给我的童年和老年人生，留下了很多有趣的记忆和诸多的故事。 ...",
85 | readingNum: 1057,
86 | collectionNum: 401,
87 | collectionStatus: true,
88 | commentNum: 32,
89 | upNum: 55,
90 | upStatus:false,
91 | author: "林白衣",
92 | dateTime: "24小时前",
93 | detail: "年少时，有几样东西，是春节里必不可少的：烟花、新衣、凉菜、压岁钱、饺子。年分大小年，有的地方是腊月二十三过小年，而有的地方是腊月二十四。童年的春节都是在小县城里度过，那时候的冬天还很冷，池塘的水会结冰，房屋上总是倒挂着一条条的冰棱，菜地里的白菜被厚厚的积雪覆盖着，只露出一小撮白绿相间的菜头，而茎部，竟然像是没有了一般...",
94 | comments: []
95 | }, {
96 | postId: 4,
97 | date: "Jun 20 2016",
98 | title: "微信公开课Pro",
99 | postImg: "/images/post/post-3.jpg",
100 | avatar: "/images/avatar/avatar-4.png",
101 | content: "在今天举行的2017微信公开课PRO版上，微信事业群总裁张小龙宣布，微信“小程序”将于1月9日正式上线。 ...",
102 | readingNum: 1057,
103 | collectionNum: 401,
104 | collectionStatus: true,
105 | commentNum: 32,
106 | upNum: 55,
107 | upStatus: false,
108 | author: "林白衣",
109 | dateTime: "24小时前",
110 | detail: "年少时，有几样东西，是春节里必不可少的：烟花、新衣、凉菜、压岁钱、饺子。年分大小年，有的地方是腊月二十三过小年，而有的地方是腊月二十四。童年的春节都是在小县城里度过，那时候的冬天还很冷，池塘的水会结冰，房屋上总是倒挂着一条条的冰棱，菜地里的白菜被厚厚的积雪覆盖着，只露出一小撮白绿相间的菜头，而茎部，竟然像是没有了一般...",
111 | comments: []
112 | }, {
113 | postId:5,
114 | date: "Jun 20 2015",
115 | title: "换个角度看微信小程序",
116 | postImg: "/images/post/post-2.jpg",
117 | avatar: "/images/avatar/avatar-5.png",
118 | content: "我们先举个例子来直观感受下小程序和APP有什么不同。大家都用过支付宝，在其内部包含着很多小的服务：手机充值、城市服务、生活缴费、信用卡还款、加油服务，吧啦吧啦一大堆服务。这些细小的、功能单一的服务放在支付宝这个超级App里，你并不觉得有什么问题，而且用起来也很方便。那如果这些小的应用都单独拿出来，成为一个独立的App ...",
119 | readingNum: 1057,
120 | collectionNum: 401,
121 | collectionStatus: true,
122 | commentNum: 32,
123 | upNum: 55,
124 | upStatus: false,
125 | author: "林白衣",
126 | dateTime: "24小时前",
127 | detail: "年少时，有几样东西，是春节里必不可少的：烟花、新衣、凉菜、压岁钱、饺子。年分大小年，有的地方是腊月二十三过小年，而有的地方是腊月二十四。童年的春节都是在小县城里度过，那时候的冬天还很冷，池塘的水会结冰，房屋上总是倒挂着一条条的冰棱，菜地里的白菜被厚厚的积雪覆盖着，只露出一小撮白绿相间的菜头，而茎部，竟然像是没有了一般...",
128 | comments: []
129 | }];
130 | module.exports={
131 | postList:postList
132 | }
--------------------------------------------------------------------------------
/pages/post/post-detail/post-detail.js:
--------------------------------------------------------------------------------
1 | // pages/post/post-detail/post-detail.js
2 | import { DBPost } from "../../../db/DBPost.js";
3 | var app = getApp();
4 | Page({
5 |
6 | /**
7 | * 页面的初始数据
8 | */
9 | data: {
10 | isPlayingMusic:false
11 | },
12 |
13 | /**
14 | * 生命周期函数--监听页面加载
15 | */
16 | onLoad: function (options) {
17 | var postId = options.id;
18 | this.dbPost = new DBPost(postId);
19 | this.postData = this.dbPost.getPostItemById().data;
20 | this.setData({
21 | post: this.postData
22 | });
23 | this.addReadingTimes();
24 | this.setMusicMonitor();
25 | this.initMusicStatus();
26 | this.setAnimation();
27 | },
28 |
29 | /**
30 | * 生命周期函数--监听页面初次渲染完成
31 | */
32 | onReady: function () {
33 | wx.setNavigationBarTitle({
34 | title: this.postData.title,
35 | })
36 | },
37 |
38 | /**
39 | * 生命周期函数--监听页面显示
40 | */
41 | onShow: function () {
42 |
43 | },
44 |
45 | /**
46 | * 生命周期函数--监听页面隐藏
47 | */
48 | onHide: function () {
49 |
50 | },
51 |
52 | /**
53 | * 生命周期函数--监听页面卸载
54 | */
55 | onUnload: function () {
56 | //wx.stopBackgroundAudio();
57 | //this.setData({
58 | // isPlayingMusic:false
59 | //})
60 | },
61 |
62 | /**
63 | * 页面相关事件处理函数--监听用户下拉动作
64 | */
65 | onPullDownRefresh: function () {
66 |
67 | },
68 |
69 | /**
70 | * 页面上拉触底事件的处理函数
71 | */
72 | onReachBottom: function () {
73 |
74 | },
75 |
76 | /**
77 | * 用户点击右上角分享
78 | */
79 | onShareAppMessage: function () {
80 | return {
81 | title:this.postData.title,
82 | desc:this.postData.content,
83 | path:"/pages/post/post-detail/post-detail"
84 | }
85 | },
86 |
87 | onCollectionTap: function (event) {
88 | var newData = this.dbPost.collect();
89 | this.setData({
90 | 'post.collectionStatus': newData.collectionStatus,
91 | 'post.collectionNum': newData.collectionNum
92 | });
93 | wx.showToast({
94 | title: newData.collectionStatus?'收藏成功':'取消收藏',
95 | duration:1000,
96 | icon:"success",
97 | mask:true
98 | })
99 | },
100 | onUpTap: function (event) {
101 | var newData = this.dbPost.up();
102 | this.setData({
103 | 'post.upStatus': newData.upStatus,
104 | 'post.upNum': newData.upNum
105 | });
106 | this.animationUp.scale(2).step();
107 | this.setData({
108 | animationUp: this.animationUp.export()
109 | })
110 | setTimeout(function () {
111 | this.animationUp.scale(1).step();
112 | this.setData({
113 | animationUp: this.animationUp.export()
114 | })
115 | }.bind(this), 300);
116 | },
117 | onCommentTap:function(event){
118 | var id = event.currentTarget.dataset.postId;
119 | wx.navigateTo({
120 | url: '../post-comment/post-comment?id='+id,
121 | })
122 | },
123 | addReadingTimes:function(){
124 | this.dbPost.addReadingTimes();
125 | },
126 | onMusicTap:function(event){
127 | if (this.data.isPlayingMusic) {
128 | wx.pauseBackgroundAudio();
129 | this.setData({
130 | isPlayingMusic: false
131 | });
132 | app.globalData.g_isPlayingMusic = false;
133 | }
134 | else {
135 | wx.playBackgroundAudio({
136 | dataUrl: this.postData.music.url,
137 | title: this.postData.music.title,
138 | coverImgUrl: this.postData.music.coverImg
139 | })
140 | this.setData({
141 | isPlayingMusic: true
142 | });
143 | app.globalData.g_isPlayingMusic = true;
144 | app.globalData.g_currentMusicPostId = this.postData.postId;
145 | }
146 | },
147 | setMusicMonitor: function () {
148 | var that = this;
149 | wx.onBackgroundAudioStop(function () {
150 | that.setData({
151 | isPlayingMusic: false
152 | });
153 | app.globalData.g_isPlayingMusic = false;
154 | });
155 | wx.onBackgroundAudioPlay(function (event) {
156 | // 只处理当前页面的音乐播放。
157 | if (app.globalData.g_currentMusicPostId === that.postData.postId) {
158 | that.setData({
159 | isPlayingMusic: true
160 | })
161 | }
162 | app.globalData.g_isPlayingMusic = true;
163 | });
164 |
165 | wx.onBackgroundAudioPause(function () {
166 | // 只处理当前页面的音乐暂停。
167 | if (app.globalData.g_currentMusicPostId == that.postData.postId) {
168 | that.setData({
169 | isPlayingMusic: false
170 | })
171 | }
172 | app.globalData.g_isPlayingMusic = false;
173 | });
174 | },
175 | initMusicStatus: function () {
176 | var currentPostId = this.postData.postId;
177 | if (app.globalData.g_isPlayingMusic && app.globalData.g_currentMusicPostId === currentPostId){
178 | this.setData({
179 | isPlayingMusic: true
180 | })
181 | }
182 | else{
183 | this.setData({
184 | isPlayingMusic: false
185 | })
186 | }
187 |
188 | },
189 | setAnimation:function(){
190 | var animationUp = wx.createAnimation({
191 | timingFunction:'ease-in-out'
192 | });
193 | this.animationUp = animationUp;
194 | }
195 | })
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # orange-can-step-by-step
2 |
3 | 说明：鉴于小程序的版本更新，我会加入新的内容作为学习笔记。
4 |
5 | ## 第一章和第二章
6 | 快速阅读，同时把官方教程快速过一遍，从第三章开始实践。
7 |
8 | 小程序官方教程：
9 | * [简易教程](https://developers.weixin.qq.com/miniprogram/dev/)
10 | * [框架](https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html)
11 | * [组件](https://developers.weixin.qq.com/miniprogram/dev/component/)
12 | * [API](https://developers.weixin.qq.com/miniprogram/dev/api/)
13 | * [工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)
14 |
15 | ## 第三章
16 |
17 | 知识点
18 | 1. 使用弹性布局：`display:flex`
19 | 2. 对于需要随着屏幕尺寸变化而变化的元素，使用自适应单位：`rpx`
20 | 3. 建议： 以 iPhone6 的宽度 750 个物理像素作为标准得到：`1物理像素=1rpx=0.5px`
21 | 4. 顶部导航栏 `window` 的配置项在 `app.json` 中配置，对各个页面的个性化配置则在各个页面的 `json` 文件中，如 welcome 页面在 `welcome.json` 配置。
22 |
23 | ## 第四章
24 |
25 | 知识点
26 | 1. Boolean值的陷阱：元素属性的值是字符串，需要使用`{{}}`数据绑定语法才能把值变为`bool`型
27 | 2. css 样式可以使页面化腐朽为神奇，应熟练掌握，使用。学习地址：[css](http://www.w3school.com.cn/css/), [css3](http://www.w3school.com.cn/css3/index.asp), [Flex 布局教程：语法篇](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html), [Flex 布局教程：实例篇](http://www.ruanyifeng.com/blog/2015/07/flex-examples.html), [Grid 布局指南（上）](https://zhuanlan.zhihu.com/p/33030746), [Grid 布局指南（下）](https://zhuanlan.zhihu.com/p/33031255)
28 | 3. image组件的4种缩放模式和9种裁剪模式
29 | * scaleToFill
30 | * aspectFit
31 | * aspectFill
32 | * widthFix
33 | * top
34 | * bottom right
35 | * ... ([详见文档](https://developers.weixin.qq.com/miniprogram/dev/component/image.html))
36 | 4. 页面生命周期
37 | * onLoad: 加载，一个页面只会调用一次
38 | * onShow: 显示，每次打开页面都会调用
39 | * onReady: 渲染，一个页面只会调用一次
40 | * onHide: 隐藏，如执行 `navigateTo` 方法，或使用tab栏切换页面
41 | * onUnload: 卸载，如执行 `redirectTo` 方法，或 `navigateBack` 方法
42 | 5. 页面的特定事件处理函数
43 | * onPullDownPrefresh: 监听用户下拉页面事件处理函数
44 | * onReachBottom: 监听页面上拉触底事件处理函数
45 | * onShareAppMessage: 用户点击右上角分享
46 | * onPageScroll: 页面滚动触发事件的处理函数
47 | * onTabItemTap: 当前是 tab 页时，点击 tab 时触发
48 | 6. 设置页面数据，会使页面 `Rerender`（会触发 `onShow` ）,见下图：
49 | 
50 | 7. 小程序使用 Mustache 语法双大括号 `{{}}` 在 wxml 组件里进行数据绑定。页面数据绑定的两种方式：
51 | * 初始化数据绑定，数据写在 `Page(Object)` 方法 Object 对象参数的 `data:{}` 属性里。
52 | * 使用 `setData(Object)` 方法做数据绑定，这样的数据更新会引起页面 Rerender（重新渲染），参考上图。
53 | 8. 注意复杂对象绑定时，页面引用的数据结构的方式。
54 | 9. `setData(Object)` 方法的对象参数的 `key` 很灵活，如 `"collectionNum.array[0]":"111"`。数据绑定出问题目前没有任何异常提示，请通过调试面板里的 `AppData` tab页查看排除。
55 | 10. 用 `` 标签进行列表渲染，属性 `wx:for` 值为要绑定的数据(数组)，属性 `wx:for-item` 值为要遍历的变量名，属性 `wx:for-index` 的值为索引变量。
56 | 11. `redirectTo(Object)` 方法会触发卸载(onUnload)事件，`navigateTo(Object)` 方法会触发隐藏(onHide)事件，跳转后右上角有返回图标。使用 `navigateTo(Object)` 方法跳转建议不要超过3层。`redirectTo(Object)` 和 `navigateTo(Object)` 只能打开非 tabBar 页面。
57 | 12. `switchTab(Object)` 方法只能用在 tabbar 选型卡的跳转。`reLaunch(Object)` 可以打开任意页面。
58 | 13. 常见冒泡事件：
59 | * `touchstart` 手指触摸动作开始
60 | * `touchmove` 手指触摸后移动
61 | * `touchcancel` 手指触摸动作被打断，如来电，弹窗等
62 | * `touchend` 手指触摸动作结束
63 | * `tap` 手指触摸后马上离开
64 | * `longtap` 手指触摸后，超过350ms再离开
65 | 14. 页面元素绑定事件时，需要在事件名称前面添加 `catch` 或 `bind` 前缀,如 `catchtap`。区别：
66 | * `catch`前缀将阻止事件继续向父节点传播
67 | * `bind`前缀不会阻止
68 | 15. 除以上6种事件外，其他基本都是非冒泡事件，如 ` 的 submit` 事件，` 中的 input` 事件，` 的 scroll` 事件等。
69 |
70 | ## 第五章 模块，模版与缓存
71 | 知识点
72 |
73 | 1. 小程序开发代码组织架构调整，依照软件设计原则：低耦合，分层，模块化，MVVM等。
74 | 2. 小程序的模版目前只能封装wxml和wxss，不能封装js。模版中使用的js需要在父页面中引用。
75 | 3. 消除template模版对外部变量名的依赖，使用扩展运算符：`{{...变量名}}`
76 | 4. 引入模版的方式有import和include。区别：
77 | * include页面渲染时只是简单的替换。模版文件需去掉 `` 标签
78 | * import可以使用 data 属性传输数据
79 | 5. 在 `app.js` 文件中使用 `App(object)` 注册小程序，并在object中指定小程序的生命周期函数等。应用程序的生命周期：
80 | * onLaunch 全局只触发一次
81 | * onShow
82 | * onHide
83 | * onError
84 | 6. 使用 ES6 语法写程序。
85 | 7. 小程序的缓存没有过期时间，就是一个本地数据库。当数据有变化时，要注意更新缓存。
86 |
87 | ## 第六章
88 | 知识点
89 |
90 | 1. 事件只能在组件上绑定。标签如 `block`，`template` 不能绑定事件。
91 | 2. 页面间传递参数，一般用 url 的 `query参数` 传递。另外还可以通过 `全局变量`，`缓存`传递。
92 | 3. 接收别的页面传递过来的 `query参数` 的方式是通过本页面的生命周期函数 `onLoad` 里的 `options` 参数来获取。
93 | 4. `event` 事件对象中，有一个 `currentTarget` 代表事件绑定的当前组件。
94 | 5. `event.currentTarget.dataset` 对象包含当前组件中所有属性名以 `data-` 开头的属性值.
95 | 6. 组件的自定义属性规则如下：
96 | * 必须以 `data-` 开头
97 | * 多个单词用连字符 `-` 连接
98 | * 单词中最好不要有大写字母，若有，除单词第一个字母外，其余大写字母将被转成小写
99 | * 在js中获取自定义属性时，多个单词将被转化为驼峰命名，如 `data-pOST-ID` 将转为 `dataset.postId`, `data-postId` 将转为 `dataset.postid`
100 | * 通过 `dataset` 获取属性值需要把 `data-` 前缀去掉。如 `data-pOST-ID` 为 `dataset.postId`, `data-postId` 为 `dataset.postid`
101 |
102 | ## 第七章
103 | 知识点
104 |
105 | 1. 组件条件渲染 `wx:if`, `wx:elif` 和 `wx:else`，其中 `wx:if` 和 `wx:elif` 的值为条件变量，`wx:else` 不需要设置值。根据条件值是否为 true 判断应该显示哪个组件。
106 | 2. 交互式反馈API：
107 | * wx.showToast
108 | * wx.hideToast
109 | * wx.showModal
110 | * wx.showActionSheet
111 | 3. 善用本地缓存。
112 | 4. 控制UI元素的显示与隐藏的另一种方式是使用 `hidden` 属性。它的值也是bool类型的变量。和 `wx:if` 用法比较：
113 | * 在需要频繁切换的情景用 `hidden` 更好
114 | * 在运行时条件不大可能改变时用 `wx:if` 更好
115 | 5. input 组件的用法。官方教程：[input组件](https://developers.weixin.qq.com/miniprogram/dev/component/input.html)。
116 | 6. 敏感操作需要获得用户主动授权。一定要处理用户拒绝授权的场景。
117 |
118 | ## 第八章
119 | 知识点
120 |
121 | 1. 全局变量的使用。一般在 `app.js` 中设置一个全局变量对象。如 `globalData:{}`。各页面使用的方式是在顶部声明： `var app = getApp();`
122 |
123 | ## 第九章
124 | 知识点
125 |
126 | 1. 事件冒泡机制的运用，在父级元素定义冒泡事件，当操作子元素时，事件会冒泡上升传递到父元素，从而被父级元素事件捕获。
127 | 2. currentTarget 和 target 的区别：
128 | * target 指的是事件最开始被触发的元素
129 | * currentTarget 指的是捕获事件的元素
130 | 3. 小程序动画效果的实践。几个概念了解下：
131 | * 动画实例 animation = wx.createAnimation(object)
132 | * 动画组 animation.scale(2).rotate(45).step().translate(30).step()
133 | * 动画方法 scale(2).rotate(45)
134 | * 动画队列 动画组以 `step()` 方法分隔 每个队列
135 | * 导出后需绑定到要实现动画的元素上。 `animation.export()` `{}.bind(this)`
136 |
137 | ## 第十章
138 | 知识点
139 | 1. tabBar控件和嵌套模版的使用
140 | * `tabBar` 在 `app.json` 里设置
141 | * 跳转到带 `tabBar` 的页面，需要用 `wx.switchTab` 方法
142 | 2. 利用 `wx.request` 和后端服务交互
--------------------------------------------------------------------------------
/pages/post/post-comment/post-comment.js:
--------------------------------------------------------------------------------
1 | // pages/post/post-comment/post-comment.js
2 | import {DBPost} from '../../../db/DBPost.js';
3 | Page({
4 |
5 | /**
6 | * 页面的初始数据
7 | */
8 | data: {
9 | useKeyboardFlag:true,
10 | keyboardInputValue:"",
11 | chooseFiles: [],
12 | sendMoreMsgFlag:false,
13 | deleteIndex:-1,
14 | currentAudio:''
15 | },
16 |
17 | /**
18 | * 生命周期函数--监听页面加载
19 | */
20 | onLoad: function (options) {
21 | var postId = options.id;
22 | this.dbPost = new DBPost(postId);
23 | var comments = this.dbPost.getCommentData();
24 | this.setData({
25 | comments:comments
26 | });
27 | },
28 |
29 | /**
30 | * 生命周期函数--监听页面初次渲染完成
31 | */
32 | onReady: function () {
33 |
34 | },
35 |
36 | /**
37 | * 生命周期函数--监听页面显示
38 | */
39 | onShow: function () {
40 |
41 | },
42 |
43 | /**
44 | * 生命周期函数--监听页面隐藏
45 | */
46 | onHide: function () {
47 |
48 | },
49 |
50 | /**
51 | * 生命周期函数--监听页面卸载
52 | */
53 | onUnload: function () {
54 |
55 | },
56 |
57 | /**
58 | * 页面相关事件处理函数--监听用户下拉动作
59 | */
60 | onPullDownRefresh: function () {
61 |
62 | },
63 |
64 | /**
65 | * 页面上拉触底事件的处理函数
66 | */
67 | onReachBottom: function () {
68 |
69 | },
70 |
71 | /**
72 | * 用户点击右上角分享
73 | */
74 | onShareAppMessage: function () {
75 |
76 | },
77 |
78 | previewImg:function(event){
79 | var commentIdx = event.currentTarget.dataset.commentIdx,
80 | imgIdx = event.currentTarget.dataset.imgIdx,
81 | imgs = this.data.comments[commentIdx].content.img;
82 | wx.previewImage({
83 | urls: imgs,
84 | current:imgs[imgIdx]
85 | })
86 | },
87 | switchInputType:function(event){
88 | this.setData({
89 | useKeyboardFlag:!this.data.useKeyboardFlag
90 | })
91 | },
92 | bindCommentInput:function(event){
93 | var val = event.detail.value;
94 | console.log(val);
95 | this.data.keyboardInputValue = val;
96 | },
97 | submitComment:function(event){
98 | var imgs = this.data.chooseFiles;
99 | var newData = {
100 | username: "青石",
101 | avatar: "/images/avatar/avatar-3.png",
102 | create_time: new Date().getTime() / 1000,
103 | content: {
104 | txt: this.data.keyboardInputValue,
105 | img: imgs
106 | },
107 | };
108 | if (!newData.content.txt && imgs.length === 0) {
109 | return;
110 | }
111 | //保存新评论到缓存数据库中
112 | this.dbPost.newComment(newData);
113 |
114 | //显示操作结果
115 | this.showCommitSuccessToast();
116 | //重新渲染并绑定所有评论
117 | this.bindCommentData();
118 | //恢复初始状态
119 | this.resetAllDefaultStatus();
120 | },
121 | showCommitSuccessToast:function(){
122 | wx.showToast({
123 | title: '评论成功',
124 | duration:1000,
125 | icon:"success"
126 | });
127 | },
128 | bindCommentData:function(){
129 | var comments = this.dbPost.getCommentData();
130 | this.setData({
131 | comments:comments
132 | });
133 | },
134 | resetAllDefaultStatus:function(){
135 | this.setData({
136 | keyboardInputValue:'',
137 | chooseFiles:[],
138 | sendMoreMsgFlag:false
139 | });
140 | },
141 | sendMoreMsg:function(){
142 | this.setData({
143 | sendMoreMsgFlag:!this.data.sendMoreMsgFlag
144 | })
145 | },
146 | chooseImage:function(event){
147 | var imgArr = this.data.chooseFiles;
148 | var leftCount = 3 - imgArr.length;
149 | if(leftCount <=0){
150 | return;
151 | }
152 | var sourceType = [event.currentTarget.dataset.category],
153 | that = this;
154 | wx.chooseImage({
155 | count:leftCount,
156 | sourceType:sourceType,
157 | success: function(res) {
158 | that.setData({
159 | chooseFiles:imgArr.concat(res.tempFilePaths)
160 | })
161 | },
162 | })
163 | },
164 | deleteImage:function(event){
165 | var index = event.currentTarget.dataset.idx,
166 | that = this;
167 | that.setData({
168 | deleteIndex:index
169 | });
170 | that.data.chooseFiles.splice(index, 1);
171 | setTimeout(function(){
172 | that.setData({
173 | deleteIndex:-1,
174 | chooseFiles: that.data.chooseFiles
175 | });
176 | }, 500);
177 | },
178 | recordStart:function(){
179 | var that = this;
180 | this.setData({
181 | recodingClass:'recoding'
182 | });
183 | this.startTime = new Date();
184 | wx.startRecord({
185 | success:function(res){
186 | var diff = (that.endTime - that.startTime) / 1000;
187 | diff = Math.ceil(diff);
188 | that.submitVoiceComment({url:res.tempFilePath,timeLen:diff});
189 | },
190 | fail:function(res){
191 | console.log(res);
192 | },
193 | complete:function(res){
194 | console.log(res);
195 | }
196 | });
197 | },
198 | recordEnd:function(){
199 | this.setData({
200 | recordingClass:''
201 | });
202 | this.endTime = new Date();
203 | wx.stopRecord();
204 | },
205 | submitVoiceComment:function(audio){
206 | var newData = {
207 | username: "青石",
208 | avatar: "/images/avatar/avatar-3.png",
209 | create_time: new Date().getTime() / 1000,
210 | content: {
211 | txt: '',
212 | img: [],
213 | audio: audio
214 | },
215 | };
216 |
217 | //保存新评论到缓存数据库中
218 | this.dbPost.newComment(newData);
219 |
220 | //显示操作结果
221 | this.showCommitSuccessToast();
222 |
223 | //重新渲染并绑定所有评论
224 | this.bindCommentData();
225 | },
226 | playAudio:function(event){
227 | var url = event.currentTarget.dataset.url,
228 | that = this;
229 | if(url == this.data.currentAudio){
230 | wx.pauseVoice();
231 | this.data.currentAudio = '';
232 | }
233 | else{
234 | this.data.currentAudio = url;
235 | wx.playVoice({
236 | filePath: url,
237 | complete:function(){
238 | that.data.currentAudio = '';
239 | }
240 | });
241 | }
242 | }
243 | })
--------------------------------------------------------------------------------
/pages/post/post-comment/post-comment.wxss:
--------------------------------------------------------------------------------
1 | /* pages/post/post-comment/post-comment.wxss */
2 | .comment-detail-box {
3 | position: absolute;
4 | top: 0;
5 | left: 0;
6 | bottom: 0;
7 | right: 0;
8 | overflow-y: hidden;
9 | }
10 |
11 | .comment-main-box {
12 | position: absolute;
13 | top: 0;
14 | left: 0;
15 | bottom: 100rpx;
16 | right: 0;
17 | overflow-y: auto;
18 | -webkit-overflow-scrolling:touch;
19 | }
20 |
21 | .comment-item {
22 | margin: 20rpx 0 20rpx 24rpx;
23 | padding: 24rpx 24rpx 24rpx 0;
24 | border-bottom: 1rpx solid #f2e7e1;
25 | }
26 |
27 | .comment-item:last-child {
28 | border-bottom: none;
29 | }
30 |
31 | .comment-title {
32 | height: 60rpx;
33 | line-height: 60rpx;
34 | font-size: 28rpx;
35 | color: #212121;
36 | border-bottom: 1px solid #ccc;
37 | margin-left: 24rpx;
38 | padding: 8rpx 0;
39 | font-family: Microsoft YaHei;
40 | }
41 |
42 | .comment-item-header {
43 | display: flex;
44 | flex-direction: row;
45 | align-items: center;
46 | }
47 |
48 | .comment-item-header .left-img image {
49 | height: 80rpx;
50 | width: 80rpx;
51 | }
52 |
53 | .comment-item-header .right-user {
54 | margin-left: 30rpx;
55 | line-height: 80rpx;
56 | }
57 |
58 | .comment-item-header .right-user text {
59 | font-size: 26rpx;
60 | color: #212121;
61 | }
62 |
63 | .comment-body {
64 | font-size: 26rpx;
65 | line-height: 26rpx;
66 | color: #666;
67 | padding: 10rpx 0;
68 | }
69 |
70 | .comment-txt text {
71 | line-height: 50rpx;
72 | }
73 |
74 | .comment-img {
75 | margin: 10rpx 0;
76 | }
77 |
78 | .comment-img image {
79 | max-width: 32%;
80 | margin-right: 10rpx;
81 | height: 220rpx;
82 | width: 220rpx;
83 | }
84 |
85 | .comment-voice-item {
86 | display: flex;
87 | flex-direction: row;
88 | align-items: center;
89 | width: 200rpx;
90 | height: 64rpx;
91 | border: 1px solid #ccc;
92 | background-color: #fff;
93 | border-radius: 6rpx;
94 | }
95 |
96 | .comment-voice-item .voice-play {
97 | height: 64rpx;
98 | width: 64rpx;
99 | }
100 |
101 |
102 | .comment-voice-item text {
103 | margin-left: 60rpx;
104 | color: #212121;
105 | font-size: 22rpx;
106 | }
107 |
108 | .comment-time {
109 | display:inline-block;
110 | margin-top: 10rpx;
111 | color: #666;
112 | background-color: #ccc;
113 | font-size: 24rpx;
114 | }
115 |
116 | /*******************评论框**********************/
117 | .input-box{
118 | position: absolute;
119 | bottom: 0;
120 | left:0;
121 | right: 0;
122 | background-color: #EAE8E8;
123 | border-top:1rpx solid #D5D5D5;
124 | min-height: 100rpx;
125 | z-index: 1000;
126 | }
127 | .input-box .send-msg-box{
128 | width: 100%;
129 | height: 100%;
130 | display: flex;
131 | padding: 20rpx 0;
132 | }
133 | .input-box .send-more-box{
134 | margin: 20rpx 35rpx 35rpx 35rpx;
135 | }
136 | .input-box .input-item{
137 | margin:0 5rpx;
138 | flex:1;
139 | width: 0%;
140 | position: relative;
141 | }
142 | .input-box .input-item .comment-icon{
143 | position: absolute;
144 | left:5rpx;
145 | top:6rpx;
146 | }
147 |
148 | .input-box .input-item .input{
149 | border: 1rpx solid #D5D5D5;
150 | background-color: #fff;
151 | border-radius: 3px;
152 | line-height: 65rpx;
153 | margin:5rpx 0 5rpx 75rpx ;
154 | font-size: 24rpx;
155 | color: #838383;
156 | padding: 0 2%;
157 | }
158 |
159 | .input-box .input-item .keyboard-input{
160 | width: auto;
161 | max-height: 500rpx;
162 | height: 65rpx;
163 | word-break:break-all;
164 | overflow:auto;
165 | }
166 | .input-box .input-item .speak-input{
167 | text-align: center;
168 | color: #212121;
169 | height: 65rpx;
170 | }
171 |
172 | .input-box .input-item .recoding{
173 | background-color: #ccc;
174 | }
175 |
176 | .input-box .input-item .comment-icon.speak-icon{
177 | height: 62rpx;
178 | width: 62rpx;
179 | }
180 | .input-box .input-item .comment-icon.keyboard-icon{
181 | height: 60rpx;
182 | width: 60rpx;
183 | left:6rpx;
184 | }
185 | .input-box .add-icon{
186 | margin:0 5rpx;
187 | height: 65rpx;
188 | width: 65rpx;
189 | transform: scale(0.9);
190 | margin-top: 2px;
191 | }
192 | .input-box .submit-btn{
193 | font-size: 24rpx;
194 | margin-top: 5rpx;
195 | margin-right: 8rpx;
196 | line-height: 60rpx;
197 | width: 120rpx;
198 | height: 60rpx;
199 | background-color: #4A6141;
200 | border-radius:5rpx;
201 | color: #fff;
202 | text-align: center;
203 | font-family:Microsoft Yahei;
204 | }
205 |
206 |
207 | .send-more-box .more-btn-item{
208 | display: inline-block;
209 | width: 110rpx;
210 | height: 145rpx;
211 | margin-right: 35rpx;
212 | text-align: center;
213 | }
214 |
215 | .more-btn-main{
216 | width: 100%;
217 | height:60rpx;
218 | text-align: center;
219 | border:1px solid #D5D5D5;
220 | border-radius: 10rpx;
221 | background-color: #fbfbfc;
222 | margin: 0 auto;
223 | padding:25rpx 0
224 | }
225 | .more-btn-main image{
226 | width: 60rpx;
227 | height: 60rpx;
228 | }
229 | .send-more-box .more-btn-item .btn-txt{
230 | color: #888888;
231 | font-size: 24rpx;
232 | margin:10rpx 0;
233 | }
234 |
235 | .send-more-result-main{
236 | margin-top: 30rpx;
237 | }
238 | .send-more-result-main .file-box{
239 | margin-right: 14rpx;
240 | height: 160rpx;
241 | width: 160rpx;
242 | position: relative;
243 | display: inline-block;
244 | }
245 |
246 | .send-more-result-main .file-box.deleting{
247 | animation:deleting 0.5s ease;
248 | animation-fill-mode: forwards;
249 | }
250 |
251 | @keyframes deleting {
252 | 0%{
253 | transform: scale(1);
254 | }
255 | 100%{
256 | transform: scale(0);
257 | }
258 | }
259 |
260 | .send-more-result-main image{
261 | height: 100%;
262 | width: 100%;
263 | }
264 | .send-more-result-main .remove-icon{
265 | position: absolute;
266 | right: 5rpx;
267 | top: 5rpx;
268 | }
269 |
270 | .send-more-result-main .file-box .img-box {
271 | height: 100%;
272 | width: 100%;
273 | }
274 |
--------------------------------------------------------------------------------