├── .gitignore
├── image
└── wechat.png
├── page
└── API
│ ├── zhihu
│ ├── zhihu.json
│ ├── zhihu.wxss
│ ├── zhihu.js
│ └── zhihu.wxml
│ ├── generate.sh
│ ├── douban
│ ├── douban.json
│ ├── douban.wxss
│ ├── douban.js
│ └── douban.wxml
│ └── douban-detail
│ ├── douban-detail.js
│ ├── douban-detail.wxss
│ └── douban-detail.wxml
├── resources
└── wechat.png
├── .idea
├── vcs.xml
├── modules.xml
├── demo.iml
└── workspace.xml
├── app.js
├── README.md
├── app.json
└── app.wxss
/.gitignore:
--------------------------------------------------------------------------------
1 | *swp
2 |
--------------------------------------------------------------------------------
/image/wechat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wutongke/wechat-app-film/master/image/wechat.png
--------------------------------------------------------------------------------
/page/API/zhihu/zhihu.json:
--------------------------------------------------------------------------------
1 | {
2 | "window": {
3 | "navigationBarTitleText": "知乎日报"
4 | }
5 | }
--------------------------------------------------------------------------------
/resources/wechat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wutongke/wechat-app-film/master/resources/wechat.png
--------------------------------------------------------------------------------
/page/API/generate.sh:
--------------------------------------------------------------------------------
1 | mkdir $1
2 | touch $1/$1.js
3 | touch $1/$1.wxss
4 | touch $1/$1.wxml
5 | touch $1/$1.json
6 |
--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/page/API/douban/douban.json:
--------------------------------------------------------------------------------
1 | {
2 | "window": {
3 | "navigationBarTitleText": "豆瓣电影",
4 | "navigationBarTextStyle": "black",
5 | "navigationBarBackgroundColor": "#fbf9fe",
6 | "backgroundColor": "#fbf9fe"
7 | }
8 | }
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | App({
2 | onLaunch: function () {
3 | console.log('App Launch')
4 | },
5 | onShow: function () {
6 | console.log('App Show')
7 | },
8 | onHide: function () {
9 | console.log('App Hide')
10 | },
11 | globalData: {
12 | hasLogin: false
13 | }
14 | })
15 |
--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/.idea/demo.iml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/page/API/douban-detail/douban-detail.js:
--------------------------------------------------------------------------------
1 | Page({
2 | data: {
3 | film: {}
4 | },
5 | onLoad: function (options) {
6 | var that = this
7 | var id = options.id
8 |
9 | wx.setNavigationBarTitle({
10 | title: options.title
11 | })
12 |
13 | fetch('https://api.douban.com/v2/movie/subject/' + id).then(function(response){
14 | if(response.status !== 200){
15 | console.log("error:"+ response.status);
16 | return;
17 | }
18 | response.json().then(function(data){
19 | that.setData({
20 | film: data
21 | })
22 | });
23 | })
24 | }
25 | })
26 |
--------------------------------------------------------------------------------
/page/API/douban-detail/douban-detail.wxss:
--------------------------------------------------------------------------------
1 | .summary .title{
2 | font-size: 16px;
3 | margin: 15px 0;
4 | }
5 | .summary .content{
6 | text-indent: 2em;
7 | }
8 | .film-item{
9 | width: 100%;
10 | padding: 10px;
11 | display: flex;
12 | }
13 | .film-image{
14 | width: 120px;
15 | }
16 | .film-image image{
17 | width: 100%;
18 | height: 180px;
19 | }
20 | .film-info{
21 | padding-left: 10px;
22 | flex: 1;
23 | }
24 | .film-info view{
25 | margin-bottom: 10px;
26 | }
27 | .film-info .label{
28 | margin-right: 5px;
29 | }
30 | .film-info .rating{
31 | color: #e09015;
32 | }
33 | .film-title{
34 | font-size: 18px;
35 | margin-right: 10px;
36 | }
37 | .film-year{
38 | font-size: 16px;
39 | color: #999;
40 | }
41 | .person{
42 | margin-right: 5px;
43 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # wechat-app-film
2 | 微信小程序
3 | 微信推出了**小程序**,利用豆瓣电影api实践了一下,效果如图,嗯,界面比较丑。
4 |
5 | 
6 |
7 | 
8 |
9 | 
10 |
11 | wiki:[blog](http://www.jianshu.com/p/6be20a757fd8)
12 |
13 | 非常感谢:
14 |
15 | **[weapp-douban-film](https://github.com/hingsir/weapp-douban-film)**
16 |
17 | **[weapp-ide-crack](https://github.com/gavinkwoe/weapp-ide-crack)**
18 |
19 | Link:
20 | **[awesome-wechat-weapp](https://github.com/justjavac/awesome-wechat-weapp)**
21 |
--------------------------------------------------------------------------------
/page/API/zhihu/zhihu.wxss:
--------------------------------------------------------------------------------
1 | .header {
2 | padding: 40px;
3 | }
4 | .title {
5 | font-size: 30px;
6 | }
7 | .desc {
8 | margin-top: 5px;
9 | color: #888888;
10 | font-size: 14px;
11 | line-height: 1.4;
12 | }
13 | .menu-list {
14 | display: flex;
15 | flex-direction: column;
16 | background-color: #fbf9fe;
17 | }
18 | .menu-item {
19 | color: #000000;
20 | display: flex;
21 | background-color: #fff;
22 | margin: 10rpx 40rpx;
23 | flex-direction: column;
24 | }
25 | .menu-item-main {
26 | display: flex;
27 | height: 100rpx;
28 | padding: 20rpx;
29 | border-radius: 10rpx;
30 | align-items: center;
31 | font-size: 32rpx;
32 | justify-content: space-between;
33 | }
34 | .menu-item-arrow {
35 | width: 50rpx;
36 | height: 50rpx;
37 | transition: 400ms;
38 | }
39 | .swiper-item{
40 | display: block;
41 | height: 150px;
42 | }
43 |
--------------------------------------------------------------------------------
/page/API/douban/douban.wxss:
--------------------------------------------------------------------------------
1 | .header {
2 | padding: 40px;
3 | }
4 | .title {
5 | font-size: 30px;
6 | }
7 | .desc {
8 | margin-top: 5px;
9 | color: #888888;
10 | font-size: 14px;
11 | line-height: 1.4;
12 | }
13 | .menu-list {
14 | display: flex;
15 | flex-direction: column;
16 | background-color: #fbf9fe;
17 | }
18 | .menu-item {
19 | color: #000000;
20 | display: flex;
21 | background-color: #fff;
22 | margin: 10rpx 40rpx;
23 | flex-direction: column;
24 | }
25 | .menu-item-main {
26 | display: flex;
27 | height: 100rpx;
28 | padding: 20rpx;
29 | border-radius: 10rpx;
30 | align-items: center;
31 | font-size: 32rpx;
32 | justify-content: space-between;
33 | }
34 | .menu-item-arrow {
35 | width: 50rpx;
36 | height: 50rpx;
37 | transition: 400ms;
38 | }
39 | .swiper-item{
40 | display: block;
41 | height: 150px;
42 | }
43 |
--------------------------------------------------------------------------------
/page/API/zhihu/zhihu.js:
--------------------------------------------------------------------------------
1 | Page({
2 | data: {
3 | moveList: [],
4 | banners: [],
5 | indicatorDots: true,
6 | vertical: false,
7 | autoplay: false,
8 | interval: 3000,
9 | duration: 1000
10 | },
11 | tapMenuItem: function (e) {
12 | var params = e.currentTarget.dataset;
13 | var target = '../douban-detail/douban-detail?id='+params.id+'&title='+params.title;
14 | wx.navigateTo({
15 | url: target
16 | });
17 | },
18 | onLoad: function () {
19 | this.getData();
20 | },
21 |
22 | getData: function () {
23 | var that = this;
24 | wx.request({
25 | url: "http://news-at.zhihu.com/api/4/news/latest",
26 | header:{
27 | "Content-Type":"application/json"
28 | },
29 | success: function(res) {
30 | const data = res.data;
31 | that.setData({
32 | banners: data.top_stories,
33 | moveList: data.stories
34 | });
35 | }
36 | });
37 | }
38 |
39 | })
40 |
--------------------------------------------------------------------------------
/page/API/douban/douban.js:
--------------------------------------------------------------------------------
1 | Page({
2 | data: {
3 | moveList: [],
4 | banners: [],
5 | indicatorDots: true,
6 | vertical: false,
7 | autoplay: false,
8 | interval: 3000,
9 | duration: 1000
10 | },
11 | tapMenuItem: function (e) {
12 | var params = e.currentTarget.dataset;
13 | var target = '../douban-detail/douban-detail?id='+params.id+'&title='+params.title;
14 | wx.navigateTo({
15 | url: target
16 | });
17 | },
18 | onLoad: function () {
19 | this.getData();
20 | },
21 |
22 | getData: function () {
23 | var that = this;
24 | wx.request({
25 | url: "https://api.douban.com/v2/movie/in_theaters?city=beijing",
26 | header:{
27 | "Content-Type":"application/json"
28 | },
29 | success: function(res) {
30 | const data = res.data.subjects;
31 | that.setData({
32 | banners: data.slice(0,3),
33 | moveList: data.slice(3)
34 | });
35 | }
36 | });
37 | }
38 |
39 | })
40 |
--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "pages": [
3 | "page/API/douban/douban",
4 | "page/API/zhihu/zhihu",
5 | "page/API/douban-detail/douban-detail"
6 | ],
7 | "window": {
8 | "navigationBarTextStyle": "black",
9 | "navigationBarBackgroundColor": "#fbf9fe",
10 | "backgroundColor": "#fbf9fe"
11 | },
12 | "tabBar": {
13 | "color": "#000000",
14 | "selectedColor": "#3cc51f",
15 | "borderStyle": "#f6f6f6",
16 | "backgroundColor": "#ffffff",
17 | "list": [
18 | {
19 | "pagePath": "page/API/douban/douban",
20 | "iconPath": "image/wechat.png",
21 | "selectedIconPath": "image/wechat.png",
22 | "text": "豆瓣电影"
23 | },
24 | {
25 | "pagePath": "page/API/zhihu/zhihu",
26 | "iconPath": "image/wechat.png",
27 | "selectedIconPath": "image/wechat.png",
28 | "text": "知乎日报"
29 | }
30 | ]
31 | },
32 | "networkTimeout": {
33 | "request": 10000,
34 | "connectSocket": 10000,
35 | "uploadFile": 10000,
36 | "downloadFile": 10000
37 | },
38 | "debug": true
39 | }
40 |
--------------------------------------------------------------------------------
/page/API/zhihu/zhihu.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
7 |
8 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
29 |
30 |
--------------------------------------------------------------------------------
/page/API/douban/douban.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
7 |
8 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
29 |
30 |
--------------------------------------------------------------------------------
/page/API/douban-detail/douban-detail.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | {{film.title}}
9 | {{film.year}}
10 |
11 |
12 |
13 | 评分
14 | {{film.rating.average}}
15 |
16 |
17 | 暂无评分
18 |
19 |
20 |
21 | 导演
22 |
23 | {{director.name}}
24 |
25 |
26 |
27 | 主演
28 |
29 | {{cast.name}}
30 |
31 |
32 |
33 |
34 |
35 | 剧情简介
36 |
37 | {{film.summary}}
38 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/app.wxss:
--------------------------------------------------------------------------------
1 | page {
2 | background-color: #fbf9fe;
3 | height: 100%;
4 | }
5 | .container {
6 | display: flex;
7 | flex-direction: column;
8 | min-height: 100%;
9 | justify-content: space-between;
10 | }
11 | .page-header {
12 | display: flex;
13 | font-size: 32rpx;
14 | color: #aaa;
15 | justify-content: center;
16 | margin-top: 50rpx;
17 | }
18 | .page-header-text {
19 | padding: 20rpx 40rpx;
20 | border-bottom: 1px solid #ccc;
21 | }
22 |
23 | .page-body {
24 | width: 100%;
25 | display: flex;
26 | flex-direction: column;
27 | align-items: center;
28 | flex-grow: 1;
29 | overflow-x: hidden;
30 | }
31 | .page-body-wrapper {
32 | margin-top: 100rpx;
33 | display: flex;
34 | flex-direction: column;
35 | align-items: center;
36 | width: 100%;
37 | }
38 | .page-body-wrapper form {
39 | width: 100%;
40 | }
41 | .page-body-wording {
42 | text-align: center;
43 | padding: 200rpx 100rpx;
44 | }
45 | .page-body-info {
46 | display: flex;
47 | flex-direction: column;
48 | align-items: center;
49 | background-color: #fff;
50 | margin-bottom: 50rpx;
51 | width: 100%;
52 | padding: 50rpx 0 150rpx 0;
53 | }
54 | .page-body-title {
55 | margin-bottom: 100rpx;
56 | font-size: 32rpx;
57 | }
58 | .page-body-text {
59 | font-size: 30rpx;
60 | line-height: 26px;
61 | color: #ccc;
62 | }
63 | .page-body-text-small {
64 | font-size: 24rpx;
65 | color: #000;
66 | margin-bottom: 100rpx;
67 | }
68 | .page-body-form {
69 | width: 100%;
70 | background-color: #fff;
71 | display: flex;
72 | flex-direction: column;
73 | width: 100%;
74 | border: 1px solid #eee;
75 | }
76 | .page-body-form-item {
77 | display: flex;
78 | align-items: center;
79 | margin-left: 10rpx;
80 | border-bottom: 1px solid #eee;
81 | height: 80rpx;
82 | }
83 | .page-body-form-key {
84 | width: 180rpx;
85 | }
86 | .page-body-form-value {
87 | flex-grow: 1;
88 | }
89 |
90 | .page-body-form-picker {
91 | display: flex;
92 | justify-content: space-between;
93 | height: 100rpx;
94 | align-items: center;
95 | font-size: 36rpx;
96 | margin-left: 20rpx;
97 | padding-right: 20rpx;
98 | border-bottom: 1px solid #eee;
99 | }
100 | .page-body-form-picker-value {
101 | color: #ccc;
102 | }
103 |
104 | .page-body-buttons {
105 | width: 100%;
106 | }
107 | .page-body-button {
108 | margin: 25rpx;
109 | }
110 | .page-body-button image {
111 | width: 150rpx;
112 | height: 150rpx;
113 | }
114 | .page-footer {
115 | text-align: center;
116 | color: #1aad19;
117 | font-size: 24rpx;
118 | margin: 20rpx 0;
119 | }
120 |
121 | .green{
122 | color: #09BB07;
123 | }
124 | .red{
125 | color: #F76260;
126 | }
127 | .blue{
128 | color: #10AEFF;
129 | }
130 | .yellow{
131 | color: #FFBE00;
132 | }
133 | .gray{
134 | color: #C9C9C9;
135 | }
136 |
137 | .strong{
138 | font-weight: bold;
139 | }
140 |
141 | .bc_green{
142 | background-color: #09BB07;
143 | }
144 | .bc_red{
145 | background-color: #F76260;
146 | }
147 | .bc_blue{
148 | background-color: #10AEFF;
149 | }
150 | .bc_yellow{
151 | background-color: #FFBE00;
152 | }
153 | .bc_gray{
154 | background-color: #C9C9C9;
155 | }
156 |
157 | .tc{
158 | text-align: center;
159 | }
160 |
161 | .page input{
162 | padding: 10px 15px;
163 | background-color: #fff;
164 | }
165 | checkbox, radio{
166 | margin-right: 5px;
167 | }
168 |
169 | .btn-area{
170 | padding: 0 15px;
171 | }
172 | .btn-area button{
173 | margin-top: 10px;
174 | margin-bottom: 10px;
175 | }
176 |
177 | .page {
178 | min-height: 100%;
179 | flex: 1;
180 | background-color: #FBF9FE;
181 | font-size: 16px;
182 | font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
183 | overflow: hidden;
184 | }
185 | .page__hd{
186 | padding: 40px;
187 | }
188 | .page__title{
189 | display: block;
190 | font-size: 20px;
191 | }
192 | .page__desc{
193 | margin-top: 5px;
194 | font-size: 14px;
195 | color: #888888;
196 | }
197 |
198 | .section{
199 | margin-bottom: 40px;
200 | }
201 | .section_gap{
202 | padding: 0 15px;
203 | }
204 | .section__title{
205 | margin-bottom: 8px;
206 | padding-left: 15px;
207 | padding-right: 15px;
208 | }
209 | .section_gap .section__title{
210 | padding-left: 0;
211 | padding-right: 0;
212 | }
213 | .section__ctn{
214 |
215 | }
216 |
--------------------------------------------------------------------------------
/.idea/workspace.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 | true
173 | DEFINITION_ORDER
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 |
249 |
250 |
251 |
252 |
253 |
254 |
255 |
256 |
257 |
258 |
259 |
260 |
261 |
262 |
263 |
264 |
265 |
266 |
267 |
268 |
269 |
270 |
271 |
272 |
273 |
274 |
275 |
276 |
277 |
278 |
279 |
280 |
281 |
282 |
283 |
284 |
285 |
286 |
287 |
288 | project
289 |
290 |
291 |
292 |
293 |
294 |
295 |
296 |
297 |
298 |
299 |
300 |
301 |
302 |
303 |
304 | project
305 |
306 |
307 | true
308 |
309 |
310 |
311 | DIRECTORY
312 |
313 | false
314 |
315 |
316 |
317 |
318 |
319 |
320 |
321 |
322 |
323 | 1474615389857
324 |
325 |
326 | 1474615389857
327 |
328 |
329 |
330 |
331 |
332 |
333 |
334 |
335 |
336 |
337 |
338 |
339 |
340 |
341 |
342 |
343 |
344 |
345 |
346 |
347 |
348 |
349 |
350 |
351 |
352 |
353 |
354 |
355 |
356 |
357 |
358 |
359 |
360 |
361 |
362 |
363 |
364 |
365 |
366 |
367 |
368 |
369 |
370 |
371 |
372 |
373 |
374 |
375 |
376 |
377 |
378 |
379 |
380 |
381 |
382 |
383 |
384 |
385 |
386 |
387 |
388 |
389 |
390 |
391 |
392 |
393 |
394 |
395 |
396 |
397 |
398 |
399 |
400 |
401 |
402 |
403 |
404 |
405 |
406 |
407 |
408 |
409 |
410 |
411 |
412 |
413 |
414 |
415 |
416 |
417 |
418 |
419 |
420 |
421 |
422 |
423 |
424 |
425 |
426 |
427 |
428 |
429 |
430 |
431 |
432 |
433 |
434 |
435 |
436 |
437 |
438 |
439 |
440 |
441 |
442 |
443 |
444 |
445 |
446 |
447 |
448 |
449 |
450 |
451 |
452 |
453 |
454 |
455 |
456 |
457 |
458 |
459 |
460 |
461 |
462 |
463 |
464 |
465 |
466 |
467 |
468 |
469 |
470 |
471 |
472 |
473 |
474 |
475 |
476 |
477 |
478 |
479 |
480 |
481 |
482 |
483 |
484 |
485 |
486 |
487 |
488 |
489 |
490 |
491 |
492 |
493 |
494 |
495 |
496 |
497 |
498 |
499 |
500 |
501 |
502 |
503 |
504 |
505 |
506 |
507 |
508 |
509 |
510 |
511 |
512 |
513 |
514 |
515 |
516 |
517 |
518 |
519 |
520 |
521 |
522 |
523 |
524 |
525 |
526 |
527 |
528 |
529 |
530 |
531 |
532 |
533 |
534 |
535 |
536 |
537 |
538 |
539 |
540 |
541 |
542 |
543 |
544 |
545 |
546 |
547 |
548 |
549 |
550 |
551 |
552 |
553 |
554 |
555 |
--------------------------------------------------------------------------------