导入项目

首先需要申请微信小程序开发的id

项目目录

app.js
整个项目的js

//app.js
App({onLaunch: function() {var users = wx.getStorageSync("users");if(!users){users = this.loadUsers();wx.setStorageSync("users", users);}},getUserInfo: function(cb) {var that = thisif (this.globalData.userInfo) {typeof cb == "function" && cb(this.globalData.userInfo)} else {//调用登录接口wx.getUserInfo({withCredentials: false,success: function(res) {that.globalData.userInfo = res.userInfotypeof cb == "function" && cb(that.globalData.userInfo)}})}},loadUsers:function(){var users = new Array();var user = new Object();user.id = "0";user.name = "kevin";user.password = "123456";users[0] = user;var user1 = new Object();user1.id = "0";user1.name = "tom";user1.password = "123456";users[1] = user1;var user2 = new Object();user2.id = "0";user2.name = "david";user2.password = "123456";users[2] = user2;return users;},globalData: {userInfo: null}
})

app.json
主要是页面和属性的设置

{"pages": ["pages/movie/movie","pages/me/me","pages/movieDetail/movieDetail","pages/login/login","pages/search/search","pages/modifyUserInfo/modifyUserInfo","pages/company/company","pages/collect/collect","pages/history/history"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "熊猫电影","navigationBarTextStyle": "black"},"tabBar": {"backgroundColor": "#ffffff","selectedColor": "#FE4E62","list": [{"pagePath": "pages/movie/movie","text": "电影","iconPath": "/images/bar/movie-0.jpg","selectedIconPath": "/images/bar/movie-1.jpg"},{"pagePath": "pages/search/search","text": "搜索","iconPath": "/images/bar/cate.png","selectedIconPath": "/images/bar/cate-active.png"},{"pagePath": "pages/company/company","text": "公司","iconPath": "/images/bar/home.png","selectedIconPath": "/images/bar/home-active.png"},{"pagePath": "pages/me/me","text": "我的","iconPath": "/images/bar/me-0.jpg","selectedIconPath": "/images/bar/me-1.jpg"}]},"sitemapLocation": "sitemap.json","permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示"}}
}

app.wxss
全局的样式

.container {height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-between;padding: 200rpx 0;box-sizing: border-box;
}

首页

<view class="content">
<!-- 上面的导航 --><view class="type"><view class="{{currentTab==0?'select':'default'}}" data-current="0" bindtap="switchNav">正在热映</view><view class="{{currentTab==1?'select':'default'}}" data-current="1" bindtap="switchNav">即将上映</view><view class="{{currentTab==2?'select':'default'}}" data-current="2" bindtap="switchNav">经典影片</view></view><view class="hr"></view>
<!-- 进行跳转 --><swiper current="{{currentTab}}" style="height:1500px;"><swiper-item><include src="hotMovie.wxml" /></swiper-item><swiper-item><include src="waitMovie.wxml" /></swiper-item><swiper-item><include src="classMovie.wxml" /></swiper-item></swiper>
</view><view><image src="../../images/bar/shang.png" class="shang" hidden="{{!top}}" bindtap="goTop"></image>
</view>

正在热映(hotMovie)

这个项目的电影的图片和电影的视频都是放在后端，所以直接进行字符串的拼接，就可以展示图片和视频。
关于后端和前端代码，后期我会分享在github上完全开源免费，持续关注我，就可以了。

<view class="haibao" id="{{1}}" bindtap="loadMovieDetail"><swiper indicator-dots="{{indicatorDots}}"    indicator-color="#FFFFFF" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" style="height:200px;"><block wx:for="{{imgUrls}}"><swiper-item ><image src="{{item}}" class="slide-image" style="width:100%;height:300px;"></image></swiper-item></block></swiper>
</view><view class="list"><block wx:for="{{movies}}"><view class="movie" id="{{item.id}}" bindtap="loadMovieDetail"><view class="pic"><!-- <image src="http://127.0.0.1:8181/images/movie/2022/05/30/4c257d518062421b975f87fbe6f1adb4.jpeg" mode="aspectFit" style="width:85px;height:119px;"></image> -->
<!-- 显示海报需要进行字符串的拼接 --><image src="http://127.0.0.1:8181/{{item.moviePoster}}" mode="aspectFit" style="width:85px;height:119px;"></image></view><view class="movie-info"><view class="base-info"><view class="name">{{item.name}}</view><view class="desc">地区：{{item.movieArea}}</view><!-- <view class="desc">测试海报：{{item.moviePoster}}</view> --><view class="desc">上映时间：{{item.releaseDate}}</view><view class="desc">电影类型：{{item.movieCategoryName.movieCategoryName}}</view><view class="desc">时长：{{item.movieLength}}min</view></view></view><view class="btn"><button>观看</button></view></view><view class="hr"></view></block></view>

即将上映（waitMovie）

<view class="haibao" id="{{1}}" bindtap=""><video src="https://vd3.bdstatic.com/mda-kfhpcma86xixh20a/v1-cae/hd/mda-kfhpcma86xixh20a.mp4" style="width:100%;height:200px;"></video>
</view><view class="list"><block wx:for="{{waitMovies}}"><view class="movie" id="{{item.id}}" bindtap="loadMovieDetail"><view class="pic"><!-- <image src="http://127.0.0.1:8181/images/movie/2022/05/30/4c257d518062421b975f87fbe6f1adb4.jpeg" mode="aspectFit" style="width:85px;height:119px;"></image> -->
<!-- 显示海报需要进行字符串的拼接 --><image src="http://127.0.0.1:8181/{{item.moviePoster}}" mode="aspectFit" style="width:85px;height:119px;"></image></view><view class="movie-info"><view class="base-info"><view class="name">{{item.name}}</view><view class="desc">地区：{{item.movieArea}}</view><!-- <view class="desc">测试海报：{{item.moviePoster}}</view> --><view class="desc">上映时间：{{item.releaseDate}}</view><view class="desc">电影类型：{{item.movieCategoryName.movieCategoryName}}</view><view class="desc">时长：{{item.movieLength}}min</view></view></view><view class="btn"><button>观看</button></view></view><view class="hr"></view></block></view>

经典影片（classMovie）

<view class="haibao" id="{{34}}" bindtap="loadMovieDetail"><swiper indicator-dots="{{indicatorDots}}"   indicator-color="#FFFFFF" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" style="height:200px;"><block wx:for="{{imgClassUrls}}"><swiper-item ><image src="{{item}}" class="slide-image" style="width:100%;height:300px;"></image></swiper-item></block></swiper>
</view><view class="list"><block wx:for="{{movies}}"><view class="movie" id="{{item.id}}" bindtap="loadMovieDetail"><view class="pic"><!-- <image src="http://127.0.0.1:8181/images/movie/2022/05/30/4c257d518062421b975f87fbe6f1adb4.jpeg" mode="aspectFit" style="width:85px;height:119px;"></image> -->
<!-- 显示海报需要进行字符串的拼接 --><image src="http://127.0.0.1:8181/{{item.moviePoster}}" mode="aspectFit" style="width:85px;height:119px;"></image></view><view class="movie-info"><view class="base-info"><view class="name">{{item.name}}</view><view class="desc">地区：{{item.movieArea}}</view><!-- <view class="desc">测试海报：{{item.moviePoster}}</view> --><view class="desc">上映时间：{{item.releaseDate}}</view><view class="desc">电影类型：{{item.movieCategoryName.movieCategoryName}}</view><view class="desc">时长：{{item.movieLength}}min</view></view></view><view class="btn"><button>观看</button></view></view><view class="hr"></view></block></view>

wxss

以上三个界面大同小异，样式都是一样的，不一样的是数据，数据的渲染也差不多。

.content{font-family: "Microsoft YaHei";
}
.type{display: flex;flex-direction: row;width:96%;margin: 0 auto;
}
.type view{margin: 0 auto;
}
.select{font-size: 12px;width: 48%;color: red;text-align: center;height: 45px;line-height: 45px;border-bottom: 5rpx solid red;
}
.default{width:48%;font-size: 12px;text-align: center;height: 45px;line-height: 45px;
}
.movie{display: flex;flex-direction: row;width: 100%;
}
.pic image{width: 80px;height: 100px;padding: 10px;
}
.base-info{width: 100%;font-size: 12px;padding-top:10px;line-height: 20px;
}
.name{font-size: 16px;font-weight: bold;color: #000000;
}.desc{color: #333333;
}
.hr{height: 1px;width: 100%;background-color: #cccccc;opacity: 0.2;
}
.btn{position: absolute;right: 10px;margin-top:50px;
}
.btn button{width: 52px;height: 25px;font-size: 11px;color: red;border: 1px solid red;background-color: #ffffff;
}
.items{display: flex;flex-direction: row;
}
.item{margin-right: 5px;text-align: center;
}
.movieName{font-size: 12px;text-align: center;
}
.movieDesc{font-size: 12px;color: #cccccc;
}
.title{padding:10px;display: flex;flex-direction: row;
}
.intro{width: 60%;
}
.zhinan{font-size: 16px;
}
.third{font-size: 13px;color: #cccccc;margin-top:10px;
}
.month{width:40%;display: flex;flex-direction: row;align-items: center;font-size: 11px;
}
.first{width:40px;height: 20px;line-height: 20px;text-align: center;border-radius: 10px;background-color: #FE4E62;color: #ffffff;margin-right: 10px;
}
.second{width: 40px;height: 20px;line-height: 20px;text-align: center;color: #cccccc;margin-right: 10px;
}
.hr2{height: 10px;width: 100%;background-color: #cccccc;opacity: 0.2;
}/* 返回顶部 */
.shang{width: 15%;height: 10%;position: fixed;bottom: 25px;right: 15px;
}

js

js里面主要获取数据，和页面的一些处理数据的逻辑。
movie.js主要完成对切换导航栏、数据的获取、对详细电影页面的跳转、返回顶部.
关注数据的请求和加载，微信发送异步请求 http，获得成功后，对响应体进行解析，把里面需要的数据拿出来，主要是一些关于电影的基本信息，然后对这些数据双向绑定，并在wxml里面展示出来，思想就是vue里面的v-model.

Page({data: {currentTab: 0,indicatorDots: true,autoplay: true,interval: 3000,duration: 1000,// 显示的图片imgUrls: ['/images/haibao/5.jpg','/images/haibao/6.jpg','/images/haibao/7.jpg'],imgClassUrls: ['/images/haibao/8.jpeg','/images/haibao/9.jpeg','/images/haibao/10.jpeg'],movies: [],waitMovies: [],flag: 0},// 生命周期回调—监听页面加载// 页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。onLoad: function (e) {this.loadMovies();this.loadWaitMovies();},// 切换导航switchNav: function (e) {var page = this;var index = e.target.dataset.current;if (this.data.currentTab == index) {return false;} else {page.setData({currentTab: index});}},// 电影加载(正在热映)loadMovies: function () {var page = this;wx.request({// 请求的url//url: 'http://127.0.0.1:8181/sysMovie/find?movieCategoryId=0&orderByColumn=releaseDate&pageSize=30&pageNum=1&isAsc=desc',method: 'GET',header: {"Content-Type": "json"},success: function (res) {var movieList = res.dataconsole.log(movieList);var len = movieList.total;console.log(len);var movies = new Array();for (var i = 0; i < len; i++) {var subject = movieList.data[i];var movie = new Object();//电影名称movie.id = subject.movieId;movie.name = subject.movieName;movie.movieArea = subject.movieArea;movie.movieLength = subject.movieLength;movie.releaseDate = subject.releaseDate;// 海报信息,["/images/movie/2022/06/01/1.jpg"]解析为/images/movie/2022/1.jpgmovie.moviePoster = JSON.parse(subject.moviePoster)[0];//类型之间加/，分隔符movie.movieCategoryName = (subject.movieCategoryList)[0];console.log(movie)//// console.log(movie)movies.push(movie);}page.setData({movies: movies});}})},// 根据导航，进行跳转switchMonth: function (e) {var page = this;var id = e.target.id;if (this.data.flag == id) {return false;} else {page.setData({flag: id});}},// 加载电影的详细信息loadMovieDetail: function (e) {console.log(e);// 首先判断一下是否登录// 如果没有登录(判断token)var token = wx.getStorageSync("token");if (token.length == 0) {// 未登录，跳转界面wx.navigateTo({url: '../login/login'})// console.log("1111111111111null")} else {// 已登录var id = e.currentTarget.id;console.log(id)wx.navigateTo({//  进行页面的跳转url: '../movieDetail/movieDetail?id=' + id})}},// 电影加载(正在热映)loadWaitMovies: function () {var page = this;wx.request({// 请求的url//http://127.0.0.1:8181/sysMovie/find?movieCategoryId=0&orderByColumn=releaseDate&pageSize=30&pageNum=1&startDate=2022-06-20url: 'http://127.0.0.1:8181/sysMovie/find?movieCategoryId=0&orderByColumn=releaseDate&pageSize=30&pageNum=1&startDate=2022-06-20',method: 'GET',header: {"Content-Type": "json"},success: function (res) {var movieList = res.dataconsole.log(movieList);var len = movieList.total;console.log(len);var waitMovies = new Array();for (var i = 0; i < len; i++) {var subject = movieList.data[i];var movie = new Object();//电影名称movie.id = subject.movieId;movie.name = subject.movieName;movie.movieArea = subject.movieArea;movie.movieLength = subject.movieLength;movie.releaseDate = subject.releaseDate;// 海报信息,["/images/movie/2022/06/01/1.jpg"]解析为/images/movie/2022/1.jpgmovie.moviePoster = JSON.parse(subject.moviePoster)[0];//类型之间加/，分隔符movie.movieCategoryName = (subject.movieCategoryList)[0];console.log(movie)//// console.log(movie)waitMovies.push(movie);}page.setData({waitMovies: waitMovies});}})},// 返回顶部onPageScroll(e) {if (e.scrollTop > 100) {this.setData({top: true})} else {this.setData({top: false})}},goTop(e) {//回到顶部if (wx.pageScrollTo) {wx.pageScrollTo({scrollTop: 0,})}}
})

wechat微信小程序项目整体思路和panda电影首页相关推荐

15_心理咨询_微信小程序项目实战_数据交互_首页
前置把十方智育的图片资源.视频资源等都放在json-server的public目录下面的指定文件夹中: public json-server的静态资源目录 ...
视频教程-微信小程序项目实战之我画你猜视频课程-微信开发
微信小程序项目实战之我画你猜视频课程精通PHP软件开发和WEB前端开发技术,熟悉PHP.Java.Javascript.HTML等语言,熟悉HTTP协议及W3C相关互联网规范,曾在山西某知名公司担任 ...
视频教程-微信小程序项目-豆瓣评分-微信开发
微信小程序项目-豆瓣评分北京八维研修学院技术工程师,5年大型项目实战开发经验,3年授课经验. 孟宪杰 ¥68.00 立即订阅扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 APP订 ...
【图片消消乐】单机游戏-微信小程序项目开发入门
这是一个微信小程序项目,是类似开心消消乐的休闲小游戏,老少皆宜,游戏互动里面的图片是用的任何图片素材,根据自己的需求更换图片即可.想要做游戏不知道怎么做,建议从这个小程序入手,花时间研究学习,很快就拥 ...
微信小程序项目（SECTION A）
我们首先说一说什么是微信小程序和微信云开发(都是自己一个字一个字打的 = =) 微信小程序是一种不需要下载,进入微信就可以直接打开的软件,已经有成千上万的开发者加入了它的开发,一起推动了微信小程序的发 ...
视频教程-微信小程序项目实战：电影购票系统-微信开发
微信小程序项目实战:电影购票系统东北大学计算机专业硕士研究生,欧瑞科技创始人&CEO,曾任国内著名软件公司项目经理,畅销书作者,企业IT内训讲师,CSDN学院专家讲师,制作视频课程超过100 ...
视频教程-微信小程序项目实战：高仿iOS计算器-微信开发
微信小程序项目实战:高仿iOS计算器东北大学计算机专业硕士研究生,欧瑞科技创始人&CEO,曾任国内著名软件公司项目经理,畅销书作者,企业IT内训讲师,CSDN学院专家讲师,制作视频课程超过1 ...
微信小程序项目实战之天气预报
概述微信小程序项目实战之天气预报详细代码下载:http://www.demodashi.com/demo/10634.html 一.准备工作 1.注册微信小程序 2.注册和风天气账号 3.注册百 ...
微信小程序项目实战之豆瓣天气
概述微信小程序项目实战之豆瓣天气详细代码下载:http://www.demodashi.com/demo/10943.html 一.准备工作 1.注册微信小程序 2.在小程序设置中设置reque ...

wechat微信小程序项目整体思路和panda电影首页