├── .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 | ![Paste_Image.png](http://upload-images.jianshu.io/upload_images/1407686-98f255371f551ade.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/240) 6 | 7 | ![Paste_Image.png](http://upload-images.jianshu.io/upload_images/1407686-54d1da6ea24c6117.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/240) 8 | 9 | ![Paste_Image.png](http://upload-images.jianshu.io/upload_images/1407686-9e699659e4db5ad5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/240) 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 | 17 | 18 | 19 | 20 | {{moveItem.title}} 21 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /page/API/douban/douban.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | {{moveItem.title}} 21 | 24 | 25 | 26 | 27 | 28 | 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 | 30 | 31 | 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 | 152 | 153 | 168 | 169 | 170 | 171 | 172 | true 173 | DEFINITION_ORDER 174 | 175 | 176 | 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 | 212 | 213 | 214 | 215 | 218 | 219 | 222 | 223 | 224 | 225 | 228 | 229 | 232 | 233 | 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 | 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 | 320 | 321 | 322 | 323 | 1474615389857 324 | 330 | 331 | 332 | 333 | 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 | 379 | 382 | 383 | 384 | 386 | 387 | 388 | 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 | --------------------------------------------------------------------------------