├── .DS_Store ├── .eslintrc ├── .tea └── entryFiles-development │ ├── index$.web.js │ └── index$.worker.js ├── README.md ├── app.acss ├── app.js ├── app.json ├── images ├── .DS_Store ├── avatar │ ├── .DS_Store │ └── 1.png ├── icon │ ├── .DS_Store │ ├── arrow-right.png │ ├── none-star.png │ ├── star.png │ └── xx.png ├── index │ ├── .DS_Store │ └── loading.gif └── more │ ├── .DS_Store │ ├── 1.png │ ├── title.png │ └── wave.png ├── pages ├── .DS_Store ├── index │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json └── movies │ ├── .DS_Store │ ├── more-movie │ ├── .DS_Store │ ├── more-movie.acss │ ├── more-movie.axml │ ├── more-movie.js │ └── more-movie.json │ ├── movie-detail │ ├── class │ │ └── Movie.js │ ├── movie-detail.acss │ ├── movie-detail.axml │ ├── movie-detail.js │ └── movie-detail.json │ ├── movie-grid │ ├── movie-grid-template.acss │ └── movie-grid-template.axml │ ├── movie-list │ ├── movie-list-template.acss │ └── movie-list-template.axml │ ├── movie │ ├── movie-template.acss │ └── movie-template.axml │ ├── movies.acss │ ├── movies.axml │ ├── movies.js │ ├── movies.json │ └── stars │ ├── stars-template.acss │ └── stars-template.axml ├── screenshots ├── .DS_Store ├── 1.png ├── 2.png └── 3.png └── utils └── util.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openfe-openfe/my/503b38d26a7ec0aeb6be28ca75905f04618c4476/.DS_Store -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | // 请不需要修改 extends 3 | "extends": ["airbnb-base", "appx"], 4 | 5 | // 根据需要修改 rules，详见 http://eslint.org/docs/rules/ 6 | // 推荐的编码风格 https://github.com/airbnb/javascript 7 | "rules": { 8 | "arrow-body-style": [0], 9 | "class-methods-use-this": [0], 10 | "consistent-return": [0], 11 | "generator-star-spacing": [0], 12 | "global-require": [0], 13 | "import/extensions": [0], 14 | "import/first": [0], 15 | "import/no-extraneous-dependencies": [0], 16 | "import/prefer-default-export": [0], 17 | "import/no-unresolved": [0], 18 | "linebreak-style": [0], 19 | "no-bitwise": [0], 20 | "no-cond-assign": [0], 21 | "no-console": [0], 22 | "no-else-return": [0], 23 | "no-nested-ternary": [0], 24 | "no-restricted-syntax": [0], 25 | "no-trailing-spaces": [0], 26 | "no-use-before-define": [0], 27 | "no-useless-escape": [0], 28 | "prefer-template": [0], 29 | "require-yield": [1] 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /.tea/entryFiles-development/index$.web.js: -------------------------------------------------------------------------------- 1 | 2 | require('../../pages/index/index'); 3 | require('../../pages/movies/movies'); 4 | require('../../pages/movies/movie-detail/movie-detail'); 5 | require('../../pages/movies/more-movie/more-movie'); 6 | -------------------------------------------------------------------------------- /.tea/entryFiles-development/index$.worker.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | require('../../app'); 4 | require('../../pages/index/index'); 5 | require('../../pages/movies/movies'); 6 | require('../../pages/movies/movie-detail/movie-detail'); 7 | require('../../pages/movies/more-movie/more-movie'); 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 支付宝小程序-豆瓣电影项目 2 | 3 | ### 效果图 4 | ![image](https://github.com/songhaoreact/my/blob/master/screenshots/1.png) 5 | ![image](https://github.com/songhaoreact/my/blob/master/screenshots/2.png) 6 | ![image](https://github.com/songhaoreact/my/blob/master/screenshots/3.png) 7 | 8 | ### 功能说明 9 | 接口访问来自豆瓣api,目前功能有 10 | 搜索功能 11 | 下拉刷新 12 | 上拉加载 13 | 首页启动增加css3动画 14 | ### 代码说明 15 | 部分采用es6语言，组件化，模块化开发。 16 | ### 安装说明 17 | 18 | ``` 19 | git clone https://github.com/songhaoreact/my.git 20 | 21 | cd my 22 | 23 | 可以真机运行也可以ide运行 24 | 25 | 补充说明： 26 | 27 | screenshots文件夹不需要，只是github上的效果图。 28 | 29 | readme也是github上面的，都不需要。 30 | 31 | 运行前删掉screenshots和readme.md文件就行。 32 | 33 | 34 | 如果demo对你有帮助的话，帮忙点个star。 35 | 36 | ``` 37 | 38 | -------------------------------------------------------------------------------- /app.acss: -------------------------------------------------------------------------------- 1 | text{ 2 | font-family: MicroSoft Yahei; 3 | font-size: 24rpx; 4 | color: #666; 5 | } 6 | 7 | input{ 8 | font-family: MicroSoft YaHei; 9 | border:0; 10 | background-color:transparent ; 11 | } -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | App({ 2 | globalData:{ 3 | g_isPlayingMusic:false, 4 | g_currentMusicPostId:null, 5 | doubanBase: "https://api.douban.com", 6 | } 7 | }) -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/index/index", 4 | "pages/movies/movies", 5 | "pages/movies/movie-detail/movie-detail", 6 | "pages/movies/more-movie/more-movie" 7 | ], 8 | "window": { 9 | "defaultTitle": "", 10 | "titleBarColor": "#314C6D", 11 | "backgroundColor":"#ffffff" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openfe-openfe/my/503b38d26a7ec0aeb6be28ca75905f04618c4476/images/.DS_Store -------------------------------------------------------------------------------- /images/avatar/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openfe-openfe/my/503b38d26a7ec0aeb6be28ca75905f04618c4476/images/avatar/.DS_Store -------------------------------------------------------------------------------- /images/avatar/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openfe-openfe/my/503b38d26a7ec0aeb6be28ca75905f04618c4476/images/avatar/1.png -------------------------------------------------------------------------------- /images/icon/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openfe-openfe/my/503b38d26a7ec0aeb6be28ca75905f04618c4476/images/icon/.DS_Store -------------------------------------------------------------------------------- /images/icon/arrow-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openfe-openfe/my/503b38d26a7ec0aeb6be28ca75905f04618c4476/images/icon/arrow-right.png -------------------------------------------------------------------------------- /images/icon/none-star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openfe-openfe/my/503b38d26a7ec0aeb6be28ca75905f04618c4476/images/icon/none-star.png -------------------------------------------------------------------------------- /images/icon/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openfe-openfe/my/503b38d26a7ec0aeb6be28ca75905f04618c4476/images/icon/star.png -------------------------------------------------------------------------------- /images/icon/xx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openfe-openfe/my/503b38d26a7ec0aeb6be28ca75905f04618c4476/images/icon/xx.png -------------------------------------------------------------------------------- /images/index/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openfe-openfe/my/503b38d26a7ec0aeb6be28ca75905f04618c4476/images/index/.DS_Store -------------------------------------------------------------------------------- /images/index/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openfe-openfe/my/503b38d26a7ec0aeb6be28ca75905f04618c4476/images/index/loading.gif -------------------------------------------------------------------------------- /images/more/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openfe-openfe/my/503b38d26a7ec0aeb6be28ca75905f04618c4476/images/more/.DS_Store -------------------------------------------------------------------------------- /images/more/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openfe-openfe/my/503b38d26a7ec0aeb6be28ca75905f04618c4476/images/more/1.png -------------------------------------------------------------------------------- /images/more/title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openfe-openfe/my/503b38d26a7ec0aeb6be28ca75905f04618c4476/images/more/title.png -------------------------------------------------------------------------------- /images/more/wave.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openfe-openfe/my/503b38d26a7ec0aeb6be28ca75905f04618c4476/images/more/wave.png -------------------------------------------------------------------------------- /pages/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openfe-openfe/my/503b38d26a7ec0aeb6be28ca75905f04618c4476/pages/.DS_Store -------------------------------------------------------------------------------- /pages/index/index.acss: -------------------------------------------------------------------------------- 1 | /**login.acss**/ 2 | page{ 3 | background: -webkit-gradient(linear, left top, left bottom, from(rgba(244,244,244,0)), color-stop(0.1, #f4f4f4), to(#f4f4f4)); 4 | } 5 | .container { 6 | background: #314C6D; 7 | align-items: stretch; 8 | padding: 0; 9 | height: 100%; 10 | overflow: hidden; 11 | } 12 | .content{ 13 | flex: 1; 14 | display: flex; 15 | position: relative; 16 | z-index: 10; 17 | flex-direction: column; 18 | align-items: stretch; 19 | justify-content: center; 20 | width: 100%; 21 | height: 100%; 22 | padding-bottom: 550rpx; 23 | background: -webkit-gradient(linear, left top, left bottom, from(rgba(244,244,244,0)), color-stop(0.1, #f4f4f4), to(#f4f4f4)); 24 | opacity: 0; 25 | transform: translate3d(0,100%,0); 26 | animation: rise 3s cubic-bezier(0.19, 1, 0.22, 1) .25s forwards; 27 | } 28 | @keyframes rise{ 29 | 0% {opacity: 0;transform: translate3d(0,100%,0);} 30 | 50% {opacity: 1;} 31 | 100% {opacity: 1;transform: translate3d(0,450rpx,0);} 32 | } 33 | .title{ 34 | position: absolute; 35 | top: 30rpx; 36 | left: 50%; 37 | width: 600rpx; 38 | height: 200rpx; 39 | margin-left: -300rpx; 40 | opacity: 0; 41 | animation: show 2.5s cubic-bezier(0.19, 1, 0.22, 1) .5s forwards; 42 | } 43 | 44 | @keyframes show{ 45 | from {opacity: 0; transform: translate3d(-200rpx,0,0); } 46 | to {opacity: 1; transform: translate3d(0,0,0); } 47 | } 48 | .remind-box { 49 | flex: 1; 50 | display: flex; 51 | flex-direction: column; 52 | align-items: center; 53 | justify-content: center; 54 | padding-bottom: 300rpx; 55 | } 56 | .remind-img { 57 | width: 250rpx; 58 | height: 250rpx; 59 | padding-top: 150rpx; 60 | } 61 | .hd { 62 | position: absolute; 63 | top: 0; 64 | left: 50%; 65 | width: 1000rpx; 66 | margin-left: -500rpx; 67 | height: 200rpx; 68 | transition: all .35s ease; 69 | } 70 | .logo { 71 | position: absolute; 72 | z-index: 2; 73 | left: 50%; 74 | bottom: 200rpx; 75 | width: 160rpx; 76 | height: 160rpx; 77 | margin-left: -80rpx; 78 | border-radius: 160rpx; 79 | animation: sway 10s ease-in-out infinite; 80 | opacity: .95; 81 | } 82 | @keyframes sway{ 83 | 0% {transform: translate3d(0,20rpx,0) rotate(-15deg); } 84 | 17% {transform: translate3d(0,0rpx,0) rotate(25deg); } 85 | 34% {transform: translate3d(0,-20rpx,0) rotate(-20deg); } 86 | 50% {transform: translate3d(0,-10rpx,0) rotate(15deg); } 87 | 67% {transform: translate3d(0,10rpx,0) rotate(-25deg); } 88 | 84% {transform: translate3d(0,15rpx,0) rotate(15deg); } 89 | 100% {transform: translate3d(0,20rpx,0) rotate(-15deg); } 90 | } 91 | .wave { 92 | position: absolute; 93 | z-index: 3; 94 | right: 0; 95 | bottom: 0; 96 | opacity: 0.725; 97 | height: 260rpx; 98 | width: 2250rpx; 99 | animation: wave 10s linear infinite; 100 | } 101 | .wave-bg { 102 | z-index: 1; 103 | animation: wave-bg 10.25s linear infinite; 104 | } 105 | @keyframes wave{ 106 | from {transform: translate3d(125rpx,0,0);} 107 | to {transform: translate3d(1125rpx,0,0);} 108 | } 109 | @keyframes wave-bg{ 110 | from {transform: translate3d(375rpx,0,0);} 111 | to {transform: translate3d(1375rpx,0,0);} 112 | } 113 | 114 | .bd { 115 | position: relative; 116 | flex: 1; 117 | display: flex; 118 | flex-direction: column; 119 | align-items: stretch; 120 | animation: bd-rise 2s cubic-bezier(0.23,1,0.32,1) .75s forwards; 121 | opacity: 0; 122 | padding-top: 200rpx; 123 | } 124 | @keyframes bd-rise{ 125 | from {opacity: 0; transform: translate3d(0,60rpx,0); } 126 | to {opacity: 1; transform: translate3d(0,0,0); } 127 | } 128 | 129 | .confirm-btn { 130 | font-size: 13pt; 131 | line-height: 85rpx; 132 | height: 85rpx; 133 | background: #314C6D; 134 | color: #fff; 135 | text-align: center; 136 | border-radius: 5px; 137 | margin: 50rpx 3%; 138 | } 139 | .confirm-text{ 140 | color: #fff; 141 | } 142 | .confirm-btn:active { 143 | opacity: .8; 144 | } 145 | 146 | -------------------------------------------------------------------------------- /pages/index/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 进入找电影 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | // 获取应用实例 2 | const app = getApp() 3 | 4 | Page({ 5 | data: { 6 | remind: '加载中', 7 | help_status: false, 8 | userid_focus: false, 9 | passwd_focus: false, 10 | userid: '', 11 | passwd: '', 12 | angle: 0 13 | }, 14 | onLoad() { 15 | var _this = this 16 | setTimeout(function(){ 17 | _this.setData({ 18 | remind: '' 19 | }); 20 | }, 1000); 21 | }, 22 | bindViewTap() { 23 | my.navigateTo({ 24 | url: '../movies/movies', 25 | }); 26 | 27 | }, 28 | }); 29 | -------------------------------------------------------------------------------- /pages/index/index.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /pages/movies/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openfe-openfe/my/503b38d26a7ec0aeb6be28ca75905f04618c4476/pages/movies/.DS_Store -------------------------------------------------------------------------------- /pages/movies/more-movie/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openfe-openfe/my/503b38d26a7ec0aeb6be28ca75905f04618c4476/pages/movies/more-movie/.DS_Store -------------------------------------------------------------------------------- /pages/movies/more-movie/more-movie.acss: -------------------------------------------------------------------------------- 1 | @import "../movie-grid/movie-grid-template.acss"; 2 | .fix_tip{ 3 | position: fixed; 4 | bottom: 50rpx; 5 | left: 0; 6 | width: 100%; 7 | text-align: center; 8 | opacity: 0; 9 | transform: translate3d(0, 80rpx, 0); 10 | transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 11 | } 12 | .fix_tip.active{ 13 | opacity: 1; 14 | transform: translate3d(0, 0, 0); 15 | } 16 | .fix_tip text{ 17 | font-size: 9pt; 18 | line-height: 100%; 19 | padding: 10rpx 20rpx; 20 | border-radius: 10rpx; 21 | background: rgba(66,66,66,.6); 22 | color: #fff; 23 | } -------------------------------------------------------------------------------- /pages/movies/more-movie/more-movie.axml: -------------------------------------------------------------------------------- 1 | 2 | 3 |