└── movie_recommendation ├── .DS_Store ├── README.md ├── app.js ├── app.json ├── page ├── .DS_Store ├── about │ ├── about.js │ ├── about.json │ ├── about.wxml │ └── about.wxss ├── detail │ ├── .DS_Store │ ├── detail.js │ ├── detail.json │ ├── detail.wxml │ └── detail.wxss ├── images │ ├── .DS_Store │ └── icon │ │ ├── about.png │ │ ├── home.png │ │ ├── selectedAbout.png │ │ └── selectedHome.png └── index │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss └── project.config.json /movie_recommendation/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MH-Blog/WeChat/5a6f1de363a6c2f7ebdec95ad0e1e3bfbd4d2660/movie_recommendation/.DS_Store -------------------------------------------------------------------------------- /movie_recommendation/README.md: -------------------------------------------------------------------------------- 1 | 根据 学堂在线 [学做小程序](http://www.xuetangx.com/courses/course-v1:TsinghuaX+2018032801X+2018_T1/about) 中1.1 -- 4.7课程整理 2 | 3 | 另外在 **`B站`** 中有相同课程 [【2018】学做小程序- 清华大学](https://www.bilibili.com/video/av22004522) 4 | 5 | 作者：神奇的老黄 6 | **`B站主页：`** [神奇的老黄](https://www.bilibili.com/video/av22004522) 7 | 8 | * * * 9 | ##### 特别说明： 10 | 电影Api：[时光电影—GitHub地址](https://github.com/jokermonn/-Api/blob/master/Time.md#movie_detail) 11 | 获取用户信息：[小程序官网说明](https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01) 12 | -------------------------------------------------------------------------------- /movie_recommendation/app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MH-Blog/WeChat/5a6f1de363a6c2f7ebdec95ad0e1e3bfbd4d2660/movie_recommendation/app.js -------------------------------------------------------------------------------- /movie_recommendation/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "page/index/index", 4 | "page/about/about", 5 | "page/detail/detail" 6 | ], 7 | "tabBar": { 8 | "list": [{ 9 | "pagePath": "page/index/index", 10 | "text": "首页", 11 | "iconPath": "page/images/icon/home.png", 12 | "selectedIconPath": "page/images/icon/selectedHome.png" 13 | },{ 14 | "pagePath": "page/about/about", 15 | "text": "关于", 16 | "iconPath": "page/images/icon/about.png", 17 | "selectedIconPath": "page/images/icon/selectedAbout.png" 18 | }], 19 | "color": "#515151", 20 | "selectedColor": "#ffa500" 21 | } 22 | } -------------------------------------------------------------------------------- /movie_recommendation/page/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MH-Blog/WeChat/5a6f1de363a6c2f7ebdec95ad0e1e3bfbd4d2660/movie_recommendation/page/.DS_Store -------------------------------------------------------------------------------- /movie_recommendation/page/about/about.js: -------------------------------------------------------------------------------- 1 | // page/about/about.js 2 | Page({ 3 | 4 | 5 | /** 6 | * 页面的初始数据 7 | */ 8 | data: { 9 | 10 | }, 11 | 12 | onGotUserInfo: function(e) { 13 | this.setData({ 14 | userInfo: e.detail.userInfo 15 | }) 16 | console.log(e.detail.errMsg) 17 | console.log(e.detail.userInfo) 18 | console.log(e.detail.rawData) 19 | }, 20 | 21 | 22 | /** 23 | * 生命周期函数--监听页面加载 24 | */ 25 | onLoad: function(options) { 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 | return { 76 | title: "电影周周看" 77 | } 78 | }, 79 | 80 | }) -------------------------------------------------------------------------------- /movie_recommendation/page/about/about.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarBackgroundColor": "#fff", 3 | "navigationBarTextStyle": "black", 4 | "navigationBarTitleText": "关于" 5 | } -------------------------------------------------------------------------------- /movie_recommendation/page/about/about.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{userInfo.nickName}} 6 | 7 | 8 | 根据哔哩哔哩 9 | https://www.bilibili.com/video/av22004522 10 | 学习整理 -------------------------------------------------------------------------------- /movie_recommendation/page/about/about.wxss: -------------------------------------------------------------------------------- 1 | /* page/about/about.wxss */ 2 | page{ 3 | height: 100%; 4 | } 5 | .page-body-info{ 6 | display: flex; 7 | flex-direction: column; 8 | justify-content: space-around; 9 | text-align: center; 10 | height: 80vh; 11 | } 12 | .userinfo-avatar{ 13 | width: 250rpx; 14 | height: 250rpx; 15 | border-radius: 50%; 16 | margin: 0 auto; 17 | } 18 | .source{ 19 | font-size: 28rpx; 20 | color: #999; 21 | text-align: center; 22 | line-height: 1.8; 23 | } -------------------------------------------------------------------------------- /movie_recommendation/page/detail/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MH-Blog/WeChat/5a6f1de363a6c2f7ebdec95ad0e1e3bfbd4d2660/movie_recommendation/page/detail/.DS_Store -------------------------------------------------------------------------------- /movie_recommendation/page/detail/detail.js: -------------------------------------------------------------------------------- 1 | // page/detail/detail.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function(options) { 15 | this.setData({ 16 | mid: options.mid 17 | }) 18 | var that = this 19 | wx.request({ 20 | url: 'https://ticket-api-m.mtime.cn/movie/detail.api?locationId=290&movieId=' + options.mid, 21 | header: { 22 | "Content-Type": "json", 23 | }, 24 | success: function(res) { 25 | console.log(res) 26 | that.setData({ 27 | movie: res.data.data.basic 28 | }) 29 | wx.hideNavigationBarLoading() 30 | } 31 | }) 32 | wx.showNavigationBarLoading() 33 | }, 34 | 35 | /** 36 | * 生命周期函数--监听页面初次渲染完成 37 | */ 38 | onReady: function() { 39 | 40 | }, 41 | 42 | /** 43 | * 生命周期函数--监听页面显示 44 | */ 45 | onShow: function() { 46 | 47 | }, 48 | 49 | /** 50 | * 生命周期函数--监听页面隐藏 51 | */ 52 | onHide: function() { 53 | 54 | }, 55 | 56 | /** 57 | * 生命周期函数--监听页面卸载 58 | */ 59 | onUnload: function() { 60 | 61 | }, 62 | 63 | /** 64 | * 页面相关事件处理函数--监听用户下拉动作 65 | */ 66 | onPullDownRefresh: function() { 67 | 68 | }, 69 | 70 | /** 71 | * 页面上拉触底事件的处理函数 72 | */ 73 | onReachBottom: function() { 74 | 75 | }, 76 | 77 | /** 78 | * 用户点击右上角分享 79 | */ 80 | onShareAppMessage: function () { 81 | return { 82 | title: "向您推荐:" + this.data.movie.name 83 | } 84 | } 85 | }) -------------------------------------------------------------------------------- /movie_recommendation/page/detail/detail.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "电影详情", 3 | "navigationBarBackgroundColor": "#fff", 4 | "navigationBarTextStyle": "black" 5 | } -------------------------------------------------------------------------------- /movie_recommendation/page/detail/detail.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 片名：{{movie.name}} 5 | 评分：{{movie.overallRating}}分 6 | 时长：{{movie.mins}} 7 | 8 | {{movie.story}} 9 | -------------------------------------------------------------------------------- /movie_recommendation/page/detail/detail.wxss: -------------------------------------------------------------------------------- 1 | /* page/detail/detail.wxss */ 2 | .movieBox{ 3 | display: flex; 4 | flex-direction: column; 5 | padding: 30px 20px; 6 | font-size: 28rpx; 7 | text-indent: 56rpx; 8 | text-align: justify; 9 | } 10 | .movieBasic{ 11 | padding-left: 50px; 12 | } 13 | .movieImg{ 14 | width: 50%; 15 | margin: 20px 25%; 16 | } -------------------------------------------------------------------------------- /movie_recommendation/page/images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MH-Blog/WeChat/5a6f1de363a6c2f7ebdec95ad0e1e3bfbd4d2660/movie_recommendation/page/images/.DS_Store -------------------------------------------------------------------------------- /movie_recommendation/page/images/icon/about.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MH-Blog/WeChat/5a6f1de363a6c2f7ebdec95ad0e1e3bfbd4d2660/movie_recommendation/page/images/icon/about.png -------------------------------------------------------------------------------- /movie_recommendation/page/images/icon/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MH-Blog/WeChat/5a6f1de363a6c2f7ebdec95ad0e1e3bfbd4d2660/movie_recommendation/page/images/icon/home.png -------------------------------------------------------------------------------- /movie_recommendation/page/images/icon/selectedAbout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MH-Blog/WeChat/5a6f1de363a6c2f7ebdec95ad0e1e3bfbd4d2660/movie_recommendation/page/images/icon/selectedAbout.png -------------------------------------------------------------------------------- /movie_recommendation/page/images/icon/selectedHome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MH-Blog/WeChat/5a6f1de363a6c2f7ebdec95ad0e1e3bfbd4d2660/movie_recommendation/page/images/icon/selectedHome.png -------------------------------------------------------------------------------- /movie_recommendation/page/index/index.js: -------------------------------------------------------------------------------- 1 | // page/index/index.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | movieList: [{ 9 | movieName: "大黄蜂", 10 | movieImg: "http://img5.mtime.cn/mt/2018/12/04/160518.62113167_1280X720X2.jpg", 11 | movieEvaluate: "大黄蜂化身地球守卫者", 12 | recommend: true, 13 | id: 246986, 14 | }, 15 | { 16 | movieName: "密室逃生", 17 | movieImg: "http://img5.mtime.cn/mt/2018/12/24/092751.50837833_1280X720X2.jpg", 18 | movieEvaluate: "六位主角遭遇花样夺命机关考验", 19 | recommend: false, 20 | id: 261180, 21 | }, 22 | { 23 | movieName: "死侍2：我爱我家", 24 | movieImg: "http://img5.mtime.cn/mt/2019/01/15/113907.82092208_1280X720X2.jpg", 25 | movieEvaluate: "死侍组建X特攻队玩梗无极限", 26 | recommend: true, 27 | id: 231981, 28 | } 29 | ], 30 | }, 31 | 32 | /** 33 | * 生命周期函数--监听页面加载 34 | */ 35 | onLoad: function(options) { 36 | // console.log(this.data.movieList.length) 37 | this.setData({ 38 | currentIndex: this.data.movieList.length - 1 39 | }) 40 | }, 41 | 42 | f0: function(e) { 43 | this.setData({ 44 | currentIndex: this.data.movieList.length - 1 45 | }) 46 | }, 47 | 48 | f1: function(e) { 49 | console.log(e.currentTarget) 50 | var mid = e.currentTarget.dataset.movieId 51 | wx.navigateTo({ 52 | url: '/page/detail/detail?mid=' + mid, 53 | }) 54 | }, 55 | 56 | /** 57 | * 生命周期函数--监听页面初次渲染完成 58 | */ 59 | onReady: function() { 60 | 61 | }, 62 | 63 | /** 64 | * 生命周期函数--监听页面显示 65 | */ 66 | onShow: function() { 67 | 68 | }, 69 | 70 | /** 71 | * 生命周期函数--监听页面隐藏 72 | */ 73 | onHide: function() { 74 | 75 | }, 76 | 77 | /** 78 | * 生命周期函数--监听页面卸载 79 | */ 80 | onUnload: function() { 81 | 82 | }, 83 | 84 | /** 85 | * 页面相关事件处理函数--监听用户下拉动作 86 | */ 87 | onPullDownRefresh: function() { 88 | 89 | }, 90 | 91 | /** 92 | * 页面上拉触底事件的处理函数 93 | */ 94 | onReachBottom: function() { 95 | 96 | }, 97 | 98 | /** 99 | * 用户点击右上角分享 100 | */ 101 | onShareAppMessage: function() { 102 | return{ 103 | title:"每周推荐" 104 | } 105 | } 106 | }) -------------------------------------------------------------------------------- /movie_recommendation/page/index/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "电影推荐", 3 | "navigationBarTextStyle": "black", 4 | "navigationBarBackgroundColor": "#fff" 5 | } -------------------------------------------------------------------------------- /movie_recommendation/page/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 第{{index + 1}}周：{{item.movieName}} 7 | 8 | “ {{item.movieEvaluate}}” 9 | 强烈推荐 10 | 返回本周 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /movie_recommendation/page/index/index.wxss: -------------------------------------------------------------------------------- 1 | /* page/index/index.wxss */ 2 | page{ 3 | height: 100%; 4 | } 5 | .swiperBox{ 6 | height: 100%; 7 | } 8 | .movieBox{ 9 | height: 100%; 10 | display: flex; 11 | flex-direction: column; 12 | justify-content: space-around; 13 | text-align: center; 14 | margin: 0 10px; 15 | position: relative; 16 | } 17 | .movieImg{ 18 | width: 50%; 19 | margin-left: 25%; 20 | } 21 | .recommend{ 22 | font-weight: 600; 23 | color: orangered 24 | } 25 | .returnTswk{ 26 | position: absolute; 27 | top: 10px; 28 | right: 0; 29 | font-size: 28rpx; 30 | padding: 2rpx 8rpx; 31 | border: 1px solid orange; 32 | border-radius: 5rpx; 33 | color: orange; 34 | } -------------------------------------------------------------------------------- /movie_recommendation/project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件。", 3 | "setting": { 4 | "urlCheck": false, 5 | "es6": true, 6 | "postcss": true, 7 | "minified": true, 8 | "newFeature": true, 9 | "autoAudits": false 10 | }, 11 | "compileType": "miniprogram", 12 | "libVersion": "1.9.94", 13 | "appid": "wxb3cf6cb6113c6908", 14 | "projectname": "movie", 15 | "isGameTourist": false, 16 | "condition": { 17 | "search": { 18 | "current": -1, 19 | "list": [] 20 | }, 21 | "conversation": { 22 | "current": -1, 23 | "list": [] 24 | }, 25 | "game": { 26 | "currentL": -1, 27 | "list": [] 28 | }, 29 | "miniprogram": { 30 | "current": -1, 31 | "list": [] 32 | } 33 | } 34 | } --------------------------------------------------------------------------------