uni-app项目之电影预告

已于 2022-12-01 12:38:32 修改
阅读量637 收藏 5
点赞数 1
分类专栏： uni-app 文章标签： uni-app
于 2022-11-07 23:08:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wsaicyj/article/details/127741605
版权

目录

一、创建项目

开发工具：HBuilderX
Vue版本：Vue3

1.新建项目

在这里插入图片描述

2.构建基础页面

1.在pages目录下创建search、me页面
在这里插入图片描述

3.构建tabBar

tabBar主要在page.json里配置

"tabBar": {
		"color": "#bfbfbf",
		"selectedColor": "#515151",
		"backgroundColor": "#ffffff",
		"borderStyle": "black",
		"list": [
			{
				"pagePath": "pages/index/index",
				"text": "首页",
				"iconPath": "static/tabBarIco/index.png",
				"selectedIconPath": "static/tabBarIco/index_sel.png"
			},
			{
				"pagePath": "pages/search/search",
				"text": "搜索",
				"iconPath": "static/tabBarIco/search.png",
				"selectedIconPath": "static/tabBarIco/search_sel.png"
			},
			{
				"pagePath": "pages/me/me",
				"text": "我的",
				"iconPath": "static/tabBarIco/me.png",
				"selectedIconPath": "static/tabBarIco/me_sel.png"
			}
		]
	}

二、构建首页-轮播图

在App.vue里配置首页公共样式

<style>
	/*每个页面公共css */
	.page{
		width: 100%;
		height: 100%;
		background-color: #f7f7f7;
	}
</style>

1.使用轮播组件

<template>
	<view class="page">
		
		<swiper :indicator-dots="true" :autoplay="true" :circular="true" class="carousel">
			<swiper-item>
				<image src="/static/carousel/寒战.png" class="carousel"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/carousel/你的婚礼.png" class="carousel"></image>
			</swiper-item>
			<swiper-item >
				<image src="../../static/carousel/无限战争.png" class="carousel"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

效果图：
在这里插入图片描述

2.禁用原生导航栏达到页面全屏化

在pages.json里通过配置 navigationStyle为custom，或titleNView为false，来禁用原生导航栏。

{
			"path": "pages/index/index",
			"style": {
				// "navigationBarTitleText": ""
				"app-plus": {
					"titleNView": false
				}
			}
		}

去掉原生导航栏前：
在这里插入图片描述

去掉原生导航栏后：
在这里插入图片描述

3.引用组件实现全局变量

  1. 创建common目录，新增common.js文件
const serverUrl_dev = "http://192.168.31.218:8091";
const serverUrl_prod = "https://www.baidu.com";


export default {
	serverUrl_dev
}
  1. 引用组件
<script>
	import common from "../../common/common.js"
	
	export default {
		data() {
			return {
				carouselList: []
			}
		},
		onLoad() {
			
			var me = this;
			
			//获取common.js中的服务器地址
			var serverUrl = common.serverUrl_dev;
			
			// var serverUrl = me.serverUrl;
			
			uni.request({
				url: serverUrl + '/index/carousel/list',
				method: 'GET',
				success: (res) => {
					var data = res.data;
					console.log(data);
					if(data.status==200){
						var carouselList = data.content;
						me.carouselList = carouselList;
						
					}
					
				}
			})
		},
		methods: {

		}
	}
</script>

三、构建首页-热门电影

3.1 使用scoll-view组件

  1. template
<scroll-view scroll-x="true" class="page-block hot">
			
			<view class="single-poster" v-for="hotMovie in hotMovieList">
				<view class="poster-wrapper">
					<image :src="hotMovie.poster" class="poster"></image>
					<view class="movie-name">{{hotMovie.name}}</view>	
					<view class="movie-score-wrapper">
						<image src="../../static/icons/star-yellow.png" class="star-ico"></image>
						<image src="../../static/icons/star-yellow.png" class="star-ico"></image>
						<image src="../../static/icons/star-yellow.png" class="star-ico"></image>
						<image src="../../static/icons/star-yellow.png" class="star-ico"></image>
						<image src="../../static/icons/star-white.png" class="star-ico"></image>
						<view class="movie-score">{{hotMovie.score}}</view>
					</view>
				</view>
			</view>

		</scroll-view>
		<!-- 热门电影 end -->
  1. js
//获取热门电影start
	uni.request({
		url:serverUrl + '/index/movie/selByType/hot',
		method:"GET",
		success: (res) => {
			var data = res.data;
			if(data.status == 200) {
				var hotMovieList = data.content;
				me.hotMovieList = hotMovieList;
			}
		}
	})
//获取热门电影end
  1. css
/* 热门电影 start */
.movie-hot{
	margin-top: 12rpx;
	padding: 20rpx;
}

.hot-title-wrapper{
	display: flex;   /*flex布局*/
	flex-direction: row;
}

.hot-ico{
	width: 40rpx;
	height: 40rpx;
	margin-top: 5rpx;
}

.hot-title{
	font-size: 20px;
	margin-left: 15rpx;
	font-weight: bold;
}

.hot{
	width: 100%;
	white-space: nowrap;  /*文字不换行*/
}

.single-poster{
	display: inline-block;  /*内联块元素，从左到右依次排列，可以设定宽高*/
	margin-left: 20rpx;
}

.poster-wrapper{
	display: flex;
	flex-direction: column;
}

.poster{
	width: 200rpx;
	height: 270rpx;
}

.movie-name{
	width: 200rpx;
	margin-top: 10rpx;
	font-size: 14px;
	font-weight: bold;
	/* 名字超出则省略start */
	white-space: nowrap;
	overflow: hidden;   /*内容被修剪，多余的内容被隐藏*/
	text-overflow: ellipsis;  /*显示省略符号 ... 来代表被修剪的文本*/
	/* 名字超出则省略end */
}

.movie-score-wrapper{
	display: flex;
	flex-direction: row;
	width: 200rpx;
}

.star-ico{
	width: 30rpx;
	height: 30rpx;
	margin-top: 10rpx;
}

.movie-score{
	font-size: 14px;
	font-weight: thin;
	margin-top: 6rpx;
	margin-left: 2rpx;
	color: grey;  /*字体颜色*/
}

/* 热门电影 end */

3.2 开发自定义组件

  1. 在commpents目录下创建一个组件helloComp
    在这里插入图片描述

  2. 引入组件

	import helloComp from "../../components/helloComp.vue"   //引用组件
  1. 注册组件
components:{    //注册组件
			helloComp
		}
  1. 使用组件
<!-- 使用组件 -->
<helloComp></helloComp>

3.3 父组件向自定义组件传递值

  1. 定义组件内部使用的属性
<template name="helloComp">    <!-- 定义组件的名称为helloComp -->
	<view>
		{{msg}}
		<view>
			<input type="text" :value="myVal" class="txt" />
		</view>
	</view>
</template>

<script>
	export default {
		
		// 定义组件的名称为helloComp
		name:"helloComp",
		
		data() {
			return {
				"msg": "你好，这是自定义组件~~~"
			};
		},
		// 定义组件内部使用的属性
		props: {
			// 自定义一个变量，用于接受父组件(首页或其他页面)传入的参数值 
			myVal: {
				type: String   //定义这个参数的类型
			}
		}
	}
</script>
  1. 父组件使用参数会传值
<!-- 使用组件 -->
<helloComp myVal="hello,电影预告"></helloComp>

在这里插入图片描述

3.4 完成评分自定义组件

1.在components目录新增评分组件score.vue

<template name="score">
	<view class="movie-score-wrapper">
		<view v-if="showNumber == 1" class="starScore">
			
			<image  v-for="yellow in yellowStars"
			src="../static/icons/star-yellow.png" class="star-ico"></image>
			
			<image  v-for="white in whiteStars"
			src="../static/icons/star-white.png" class="star-ico"></image>
			
			<view class="movie-score">{{innerScore}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		
		name:"score",
		
		data() {
			return {
				yellowStars: 0,
				whiteStars: 5
			};
		},
		props: {
			// innerScore: {
			// 	type: Number
			// },
			// showNum: {
			// 	type: Number
			// }
			innerScore: 0,    //接收父组件传递的值，默认为0
			showNumber: 0    //是否显示评分，1为显示，0为不显示
		},
		created() {
			var tempScore = 0;
			// debugger;
			if (this.innerScore !== null && this.innerScore !== undefined && this.innerScore > 0){
				tempScore = this.innerScore;
			}
			var yellowStars = parseInt(tempScore/2);
			var whiteStars = 5 - yellowStars;
			this.yellowStars = yellowStars;
			this.whiteStars = whiteStars;
		}
	}
</script>

<style>
.movie-score-wrapper{
	display: flex;
	flex-direction: row;
	width: 200rpx;
}

.star-ico{
	width: 30rpx;
	height: 30rpx;
	margin-top: 10rpx;
}

.movie-score{
	font-size: 14px;
	font-weight: thin;
	margin-top: 6rpx;
	margin-left: 2rpx;
	color: grey;  /*字体颜色*/
}

.starScore{
	display: flex;
	flex-direction: row;
}
</style>
  1. 导入score组件
	import score from "../../components/score.vue"
  1. 注册组件
components: {    //注册组件
			helloComp,
			score
		}
  1. 使用组件
<score :innerScore="hotMovie.score" showNumber="1"></score>

在这里插入图片描述

构建首页-热门预告

构建首页-猜你喜欢

1. 编写flex布局

template:

<!-- 猜你喜欢start -->
<view class="page-block movie-hot">
	<view class="hot-title-wrapper">
		<image src="../../static/icons/guess-like.png" class="hot-ico"></image>
		<view class="hot-title">猜你喜欢</view>
	</view>
</view>

<view class="page-block guess-like">
	<view class="guess-like-wrapper">
		 <image src="../../static/poster/信条.png" class="guess-like-poster"></image>
		 
		 <view class="guess-like-info">
			<view class="guess-movie-name">我的祖国我的祖国我的祖国我的祖国</view>
			<score :innerScore="9.1" showNumber="0"></score>
			<view class="guess-movie-type">2018 / 美国 / 科幻 / 超级英雄</view>
			<view class="guess-movie-time">上映：2022-11-17(中国大陆)</view>
			<view class="guess-movie-author"> 张国荣/张丰毅/巩俐/葛优/英达 </view>
		 </view >
			 
		 <view class="guess-like-praise">
		 </view>
	</view>
</view>
<!-- 猜你喜欢end -->

css:

/* 猜你喜欢start */
.guess-like{
	display: flex;
	flex-direction: column;
}
.guess-like-wrapper{
	display: flex;
	flex-direction: row;
	padding: 30rpx 20rpx;
	justify-content: space-between;
}
.guess-like-poster{
	width: 180rpx;
	height: 240rpx;
	border-radius: 3%;
}
.guess-like-info{
	width: 340rpx;
	display: flex;
	flex-direction: column;
}
.guess-movie-name{
	/* font-size: 14px; */
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.guess-movie-type{
	font-size: 14px;
	color: #808080;
}
.guess-movie-time{
	font-size: 14px;
	color: #808080;
}
.guess-movie-author{
	font-size: 14px;
	color: #808080;
}
/* 猜你喜欢end */

2. 实现点赞动画效果

template:

<view class="guess-like-praise"  @click="praiseMe">
	 <image src="../../static/icons/praise.png" class="praise-ico"></image>
	 <view class="praise-me">点赞</view>
	 <view class="praise-me praise-me-opacity" :animation="animationData">+1</view>
</view>

css:

.guess-like-praise {
	width: 140rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	
	border-left: 2px dashed lightgrey;
}
.praise-ico {
	width: 50rpx;
	height: 50rpx;
	align-self: center;
}
.praise-me {
	font-size: 14px;
	align-self: center;
	color: orange;
}
.praise-me-opacity{
	font-weight: bold;
	opacity: 0;
}

js:在methods里面添加

//实现点赞动画效果start
praiseMe(){
	//构建动画数据，并且通过step来表示这组动画的完成
	this.animation.translateY(-60).opacity(1).step({
		duration: 400
	});
	
	//导出动画数据到view组件，实现组件的动画效果
	this.animationData = this.animation.export();
	
	//还原动画
	setTimeout(function(){
		this.animation.translateY(0).opacity(0).step({
			"timingFunction": "step-start"
		});
		
		this.animationData = this.animation.export();
	}.bind(this),500)
},
//实现点赞动画效果end

3.还原动画

//还原动画
setTimeout(function(){
	this.animation.translateY(0).opacity(0).step({
		"timingFunction": "step-start"
	});
	
	this.animationData = this.animation.export();
}.bind(this),500)

4.动态渲染列表

template

<!-- 猜你喜欢start -->
<view class="page-block movie-hot">
	<view class="hot-title-wrapper">
		<image src="../../static/icons/guess-like.png" class="hot-ico"></image>
		<view class="hot-title">猜你喜欢</view>
	</view>
</view>

<view class="page-block guess-like" >
	<view class="guess-like-wrapper" v-for="(guessLike,gIndex) in guessLikeList" :key="guessLike.id">
		 <image :src="guessLike.cover" class="guess-like-poster"></image>
		 
		 <view class="guess-like-info">
			<view class="guess-movie-name">{{guessLike.name}}</view>
			<score :innerScore="guessLike.score" showNumber="0"></score>
			<view class="guess-movie-type">{{guessLike.baseInfo}}</view>
			<view class="guess-movie-time">{{guessLike.releaseDate}}</view>
		 </view >
			 
		 <view class="guess-like-praise" :data-gIndex="gIndex"  @click="praiseMe">
			 <image src="../../static/icons/praise.png" class="praise-ico"></image>
			 <view class="praise-me">点赞</view>
			 <view class="praise-me praise-me-opacity" :animation="animationDataArr[gIndex]">+1</view>
		 </view>
	</view>
</view>
<!-- 猜你喜欢end -->

js:方法写在methods里面

// 猜你喜欢start
guessLike(){
	var me = this;
	
	//显示loading
	uni.showLoading({
		mask: true
	});
	//显示导航栏的loading
	uni.showNavigationBarLoading();
	
	var serverUrl = common.serverUrl_dev;
	uni.request({
		url:serverUrl + '/index/movie/guessLike',
		method:"GET",
		success: (res) => {
			var data = res.data;
			if(data.status == 200) {
				var guessLikeList = data.content;
				me.guessLikeList = guessLikeList;
			}
		},
		complete() {
			uni.hideLoading();   //隐藏loading
			uni.hideNavigationBarLoading();  //隐藏导航条的loading
			uni.stopPullDownRefresh();   //停止刷新
		}
	})
},
// 猜你喜欢end

5. 实现动画数组(修复多个电影同时点赞问题)

js

//实现点赞动画效果start
praiseMe(e){
	// console.log(e);
	var gIndex = e.currentTarget.dataset.gindex;
	
	//构建动画数据，并且通过step来表示这组动画的完成
	this.animation.translateY(-60).opacity(1).step({
		duration: 400,
		timingFunction: "ease"
	});
	
	//导出动画数据到view组件，实现组件的动画效果
	// this.animationData = this.animation.export();
	this.animationDataArr[gIndex] = this.animation.export();
	
	//还原动画
	setTimeout(function(){
		this.animation.translateY(0).opacity(0).step({
			timingFunction: "step-start"
		});
		
		// this.animationData = this.animation.export();
		this.animationDataArr[gIndex] = this.animation.export();
	}.bind(this),500)
	
},
//实现点赞动画效果end

template

<view class="guess-like-praise" :data-gIndex="gIndex"  @click="praiseMe">
	 <image src="../../static/icons/praise.png" class="praise-ico"></image>
	 <view class="praise-me">点赞</view>
	 <view class="praise-me praise-me-opacity" :animation="animationDataArr[gIndex]">+1</view>
</view>

下拉刷新

  1. 在pages.json里开启下拉刷新功能
{
	"path": "pages/index/index",
	"style": {
		"enablePullDownRefresh": true,  //开启下拉刷新功能
		// "navigationBarTitleText": ""
		"app-plus": {
			// "titleNView": false    .//禁用原生导航栏
			"titleNView": {
				"type": "transparent"
			}
		}
	}
}
  1. 监听下拉刷新动作
onPullDownRefresh() {
	// console.log('refresh');
	//下拉刷新猜你喜欢数据start
	this.guessLike();
	//下拉刷新猜你喜欢数据end
},

构建搜索页面

静态搜索页面及搜索框固定在顶部

1.template

<template>
<view class="page">
	
	<view clas="search-block page-block">
		
		<view class="search-ico-wrapper">
			<image src="../../static/icons/search.png" class="search-ico"></image>
			<input class="search-text" type="text" maxlength="10" placeholder="请输入电影名" focus/>
		</view>
		
	</view>
	
	<view class="movie-list page-block">
		
		<view class="movie-wrapper">
			<image src="http://192.168.31.218:8091/images/movie/1/cover/1.png" class="moive-poster"></image>
		</view>
		
		<view class="movie-wrapper">
			<image src="http://192.168.31.218:8091/images/movie/1/cover/1.png" class="moive-poster"></image>
		</view>
		
		<view class="movie-wrapper">
			<image src="http://192.168.31.218:8091/images/movie/1/cover/1.png" class="moive-poster"></image>
		</view>
		
		<view class="movie-wrapper">
			<image src="http://192.168.31.218:8091/images/movie/1/cover/1.png" class="moive-poster"></image>
		</view>
		
		<view class="movie-wrapper">
			<image src="http://192.168.31.218:8091/images/movie/1/cover/1.png" class="moive-poster"></image>
		</view>
		
		<view class="movie-wrapper">
			<image src="http://192.168.31.218:8091/images/movie/1/cover/1.png" class="moive-poster"></image>
		</view>
		
		<view class="movie-wrapper">
			<image src="http://192.168.31.218:8091/images/movie/1/cover/1.png" class="moive-poster"></image>
		</view>
		
		<view class="movie-wrapper">
			<image src="http://192.168.31.218:8091/images/movie/1/cover/1.png" class="moive-poster"></image>
		</view>
		
		<view class="movie-wrapper">
			<image src="http://192.168.31.218:8091/images/movie/1/cover/1.png" class="moive-poster"></image>
		</view>
		
		<view class="movie-wrapper">
			<image src="http://192.168.31.218:8091/images/movie/1/cover/1.png" class="moive-poster"></image>
		</view>
		
		<view class="movie-wrapper">
			<image src="http://192.168.31.218:8091/images/movie/1/cover/1.png" class="moive-poster"></image>
		</view>
		
		<view class="movie-wrapper">
			<image src="http://192.168.31.218:8091/images/movie/1/cover/1.png" class="moive-poster"></image>
		</view>
		
		<view class="movie-wrapper">
			<image src="http://192.168.31.218:8091/images/movie/1/cover/1.png" class="moive-poster"></image>
		</view>
		
		<view class="movie-wrapper">
			<image src="http://192.168.31.218:8091/images/movie/1/cover/1.png" class="moive-poster"></image>
		</view>
		
		<view class="movie-wrapper">
			<image src="http://192.168.31.218:8091/images/movie/1/cover/1.png" class="moive-poster"></image>
		</view>
		
		<view class="movie-wrapper">
			<image src="http://192.168.31.218:8091/images/movie/1/cover/1.png" class="moive-poster"></image>
		</view>
		
		<view class="movie-wrapper">
			<image src="http://192.168.31.218:8091/images/movie/1/cover/1.png" class="moive-poster"></image>
		</view>
		
	</view>

	
</view>
</template>

2.css

/* 搜索框start */

.search-block {
	display: flex;
	flex-direction: row;
	padding: 0rpx 20rpx 20rpx 20rpx;
	
}
.search-ico-wrapper {
	background-color: #eaeaea;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 0rpx 10rpx;
	width: 680rpx;
	margin-left: 20rpx;
	/* 搜索框悬浮 */
	position: fixed;
	top: 100;
	z-index: 2000;
}
.search-ico {
	width: 40rpx;
	height: 40rpx;
	/* display: flex;
	flex-direction: column;
	justify-content: center; */
}
.search-text {
	font-size: 14px;
	background-color: #eaeaea;
	
	height: 60rpx;
	width: 680rpx;
	margin-left: 15rpx;
	/* flex: 1; */
}

/* 搜索框end */


/* 电影列表start */
.page-block {
	background-color: #ffffff;
}
.movie-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	padding: 80rpx 10rpx 10rpx 10rpx;
}
.movie-wrapper {
	/* margin: 10rpx; */
	padding: 10rpx 20rpx;
	
}
.moive-poster {
	width: 200rpx;
	height: 270rpx;
}
/* 电影列表end */

动态获取电影列表

script

let me = this;
			
			let pageNum = 1;
			
			me.pageNum = pageNum;
			
			uni.showLoading({
				mask:true,
				title: 'onShow加载中...',
			});
			uni.showNavigationBarLoading();
			
			let serverUrl = common.serverUrl_dev;
			
			// 搜索页获取电影列表start
			uni.request({
				url: serverUrl + '/search/queryPageList',
				data: {
					name: me.name,
					pageNum: me.pageNum,
					pageSize: me.pageSize
				},
				success: (res) => {
					console.log('onshow加载...')
					let data = res.data;
					if (data.code == 200) {
						me.movieList = data.data.rows;
						me.total = data.data.total;
					}
				},
				complete() {
					uni.hideLoading();
					uni.hideNavigationBarLoading();
				}
			})
			// 搜索页获取电影列表start

template

<template>
	<view class="page">

		<view clas="search-block page-block">
			<view class="search-ico-wrapper">
				<image src="../../static/icons/search.png" class="search-ico"></image>
				<input 
					class="search-text" 
					confirm-type="search" 
					maxlength="10" 
					placeholder="请输入电影名" 
					@confirm="searchMovie"/>
			</view>
		</view>

		<view class="movie-list page-block">
			<view class="movie-wrapper" v-for="movie in movieList">
				<image :src="movie.cover" class="moive-poster"></image>
			</view>
		</view>
	</view>
</template>

分页查询

script

onReachBottom() {
	let me = this;
	let pageNum = me.pageNum + 1;
	let name = me.name;
	let totalPages = (me.total%me.pageSize) > 0 ? (me.total/me.pageSize)+1 : (me.total/me.pageSize);
	
	console.log('totlal:'+ me.total + ',pageSize:' + me.pageSize + ',totalPages:' + totalPages + ',pageNum:' + pageNum)
	if (pageNum > totalPages) {
		return;
	}
	
	me.queryPageList(name, pageNum, me.pageSize);
}
queryPageList(name, pageNum, pageSize) {
	var me = this;
	
	// 显示loading条
	uni.showLoading({
		mask: true,
		title: '加载中...'
	})
	uni.showNavigationBarLoading();
	
	var url = common.serverUrl_dev;
	
	// 搜索页获取电影列表start
	uni.request({
		url: url + "/search/queryPageList",
		data: {
			name: name,
			pageNum: pageNum,
			pageSize: pageSize
		},
		method: 'GET',
		success: (res) => {
			var data = res.data;
			if (200 == res.data.code) {
				
				let tempList = data.data.rows;
				me.movieList = me.movieList.concat(tempList);
				me.total = data.data.total;   //获取总记录数
				me.pageNum = pageNum;     //当前页数
			}
		},
		complete() {
			uni.hideLoading();
			uni.hideNavigationBarLoading();
		}
	})
	// 搜索页获取电影列表end
}

在这里插入图片描述

页面路由api与传参

template:

<view class="movie-wrapper" v-for="movie in movieList">
	<image 
		:src="movie.cover" 
		:data-movieId="movie.id"
		@click="movieDetail"
		class="moive-poster">
	</image>
</view>

script:

// 电影详情页start
movieDetail(e) {
	console.log(e);
	let movieId = e.currentTarget.dataset.movieid;
	uni.navigateTo({
		url:"/pages/movieDetail/movieDetail?id=" + movieId
	})
},
// 电影详情页end
wsaicyj
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp影视视频H5小程序APP前后端源码
03-20
该版本前端使用uniapp开发，后端为php（one-php后台系统管理框架，基于tp5.1.*版本），目前已兼容微信小程序、双端APP及H5，功能健全，拆封即用。 该源码分两个版本1.0和2.0，2.0版本为1.0版本的重构版，主要重构了界面UI及系统架构，对于1.0版本来说，重构版除原有的API管理后台外，新增了版本控制系统、升级包制作工具、前端UNIAPP自助升级（易语言），实现用户自助升级，弥补了1.0版本下载安装包手动升级麻烦的问题，避免因为用户错误升级操作导致系统出现bug。 码云地址：https://gitee.com/lyq617/yunyingping2.0
uniapp开发的多端影视APP，对接的苹果CMS
03-22
引见 最新三网免挂未速支付系统免授权版，微信为店员，可适配V免签，有pc加app， 采用tp5框架开发。拿出来给大家用，这 引见 苹果10CMS影视APP对接,uniapp开发的多端影视APP 本APP有缓存，投屏，播放记载，珍藏等功用是十分完善的。 是会员中心也是用的苹果cms的数据。能够打包到多端的代码。 项目是采用的Uni-app开发的个人觉得混合app里面最强大的 可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。 application放到网站根目录掩盖，然后翻开这个目录，把database.php翻开 把数据库地址和密码改成你本人的 幻灯片是引荐5 重磅热播是引荐3 每一个东西都我都付出了宏大的心血，开端一点不懂。都是一点点学的。我学这个也是我的一个兴味。后期我会不断更新APP和api接口.为大家做奉献。 接口都采用的restfui方式。性能更好简单东西会由于协议等等而无法运用，需求自己研讨下
uniapp影视点评手机端模板制作前端框架模板
03-10
设计影视简介、演员、剧情、影评等功能！uniapp模板制作，可直接打开
uniapp实战电影预告项目
Jack, what else can you do besides holding your little darling?
12-09 756
uniapp实战电影预告项目
基于uniapp制作的仿猫眼电影小程序源码.zip
06-06
基于uniapp制作的仿猫眼电影小程序，数据来源为猫眼官网API，包含今日热映，正在上映，短期最受期待，模糊查询，电影详情。
uniapp点击进入详情页（加上搜索栏，以及滑动删除）
温温的博客
08-04 1530
实现效果有个bug，从下往上删除会出现报错，以及下面几个删除出现问题，应该是splice的问题。 在使用本地数据的情况下
基于uni-app的电影购票后台管理系统设计源码
04-09
本资源提供了一套基于uni-app的电影购票app的后台管理系统设计源码。该项目包含了97个Vue文件、56个JavaScript文件、22个PNG图像文件、16个SCSS样式文件、8个SVG图标文件、6个JSON文件、4个TypeScript文件以及1个...
uniapp框架-基于mpvue实现豆瓣电影微信小程序-uni-app项目源码-vue语法格式.zip
05-21
UniApp开发前景分析：专业视角引领未来 随着移动互联网的迅猛发展，跨平台应用开发框架...如果你正在寻找一个高效、便捷的跨平台开发框架，不妨深入了解UniApp，并查看其丰富的资源文件，开启你的跨平台开发之旅。
基于uni-app框架的校园极简生活跨平台移动应用的设计与实现.pdf
08-26
uni-app框架具有学习成本低、上手速度快、跨平台能力强、生态繁荣等优点，因而被选择作为本项目的开发框架。 跨平台移动应用开发是当前移动应用开发的热点问题，uni-app框架是其中一种解决方案。uni-app框架可以...
基于SSM、uni-app和Element-UI开发的电影推荐系统完整源码(包含后端、APP端、Web端).zip
12-28
基于SSM、uni-app和Element-UI开发的电影推荐系统完整源码(包含后端、APP端、Web端).zip基于SSM、uni-app和Element-UI开发的电影推荐系统完整源码(包含后端、APP端、Web端).zip基于SSM、uni-app和Element-UI开发的...
基于uni-app制作的IMDBTOP250电影排名系统的微信小程序前端.zip
12-13
"基于uni-app制作的IMDBTOP250电影排名系统的微信小程序前端.zip" 这个标题揭示了几个关键知识点。首先，它提到了“uni-app”，这是一个跨平台的前端开发框架，允许开发者用一套代码编写应用，然后在iOS、Android、...
电影院订票选座APP系统（基于uni-app框架）毕业论文开题报告参考（1）系统功能概要
杭州.黄老师
08-27 3816
该系统主要分网站管理员、游客、注册用户这几个角色 网站管理员 系统设置 关于我们设置：设置关于我们、联系我们、加入我们、法律声明 广告和留言 首页轮播图设置：支持上传轮播图； 留言列表：用户的所有留言信息、支持删除 资讯中心 添加资讯：类型、标题、资讯内容等 管理资讯：查看所有资讯列表；支持修改功能；支持删除功能 会员管理 查看会员信息列表、支持删除功能 查看会员注册时间、手机用户名、姓名、QQ、邮箱、备注等。 电影中...
uni-app渲染新闻列表，跳转详情页
祈澈菇凉
12-30 7072
1：新建两个vue界面，list列表页，details详情页 2：打开pages.json，配置新增页面的路径等信息 { "path": "pages/main/list", "style": { "navigationBarTitleText": "新闻列表" } }, { ...
微信小程序uniapp+vue电影院购票选座系统平台java+python+nodejs+php
懒人的博客
02-21 529
电影院购票所要实现的功能分析，对于现在网络方便，电影院购票要实现管理员、用户可以直接在平台上进行查看自己所需数据信息，这样既能节省管理的时间，不用再像传统的方式，如果用户想要进行交流信息，必须双方见面进行沟通交流所需的信息，由于很多用户时间的原因，没有办法进行见面沟通交流，真的很难满足用户的各种需求。系统界面较友好，易于操作。储所有数据信息及快速方便的检索功能，对电影院购票的各个模块是通过许多今天的发达电影院购票做出合理的分析来确定考虑用户的可操作性，遵循开发的系统优化的原则，经过全面的调查和研究。
基于node+vue+uniapp微信小程序的电影院票务售票选座系统
qq840612233的博客
02-24 1126
本文通过对国内外现状的分析，明确了基于微信小程序的电影票务系统在国内外的基本情况，对系统的功能需求做出分析，此系统是由用户下单，生成下单电影信息；最后在对设计的系统进行一系列的测试，是系统达到预期要求，再对系统进行进一步的完善。此系统的模块分别有用户模块、服务端模块和管理端模块这两大基本模块，其中服务端模块包括了首页、电影信息、电影类别、交流论坛、我的等；
林风社交论坛:基于java+uniapp+vue的bbs开源论坛社区小程序H5
weixin_43963518的博客
11-01 456
linfeng-community林风社交论坛一款前后端分离的社交论坛圈子问答发帖/BBS，SNS项目
【移动开发】最新uniapp开发的多端影视APP+后端对接的苹果CMS源码（可打包多端app）
hmz856的博客
09-07 1860
分享一款uniapp开发的多端影视APP源码，后端对接的是苹果10CMS。会员中心也使用苹果cms的数据。可以打包到多个端的代码。会员中心也是用的苹果cms的数据。用的是uniapp技术，可以打包多端app或者小程序、H5均可。没有任何教程，推荐懂uniapp的开发者下载，技术小白还是直接选择跳过吧。项目是采用的Uni-app开发的个人觉得混合app里面最强大的，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。
uni-app 项目
最新发布
07-05
uni-app 是一种基于 Vue.js 的跨平台应用开发框架，它由腾讯推出，旨在帮助开发者构建一套代码可以在多个平台上运行的应用，包括微信小程序、App（Android 和 iOS）、H5、以及快应用等。uni-app 使用了渐进增强的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值