uniapp快速開發(fā)小程序全流程

完整項目代碼：https://gitee.com/Zifasdfa/ziyi-app

歡迎fork與star

1 項目效果及環(huán)境準(zhǔn)備

1.1 項目效果

本文主要使用uniapp實現(xiàn)一個簡單的app應(yīng)用

1.2 環(huán)境準(zhǔn)備&項目初始化

①node環(huán)境：去node.js官網(wǎng)下載穩(wěn)定版的node即可，下載之后配置環(huán)境變量，通過node -v查看是否配置成功

② 開發(fā)工具選擇：HBuilder-X

官網(wǎng)下載地址：https://uniapp.dcloud.net.cn/quickstart.html#

根據(jù)自己的操作系統(tǒng)下載對應(yīng)的環(huán)境即可，下載好之后，雙擊.exe文件打開HBuilderX

點擊左上角：文件 - 新建項目 - 選擇uni-app項目，填寫對應(yīng)項目名，其他默認即可【這里我采用vue2的語法】

效果：

展示效果選擇手機頁面方式：

當(dāng)然我們也可以通過數(shù)據(jù)線，將手機與電腦連接起來，然后直接在真機上運行。

2 實現(xiàn)tabbar底部導(dǎo)航

增加底部導(dǎo)航，為：首頁、分類、學(xué)習(xí)、我的

官網(wǎng)tabbar教程：https://uniapp.dcloud.net.cn/collocation/pages.html#tabbar

• tabBar 中的 list 是一個數(shù)組，只能配置最少2個、最多5個 tab，tab 按數(shù)組的順序排序。

①導(dǎo)入圖片資源

導(dǎo)入所給源碼中的static下的圖片

②新建tabbar目錄及對應(yīng)頁面

因為我們整個項目是將底部導(dǎo)航欄中的index默認為首頁，因此刪除之前pages目錄的index整個文件夾，并在pages下新建tabbar目錄，然后在tabbar目錄下分別新建classify、index、mine、study頁面

③修改頁面主題顏色，修改App.vue

<style>
	/*每個頁面公共css 修改頁面主背景色為灰色，配合白色的底部導(dǎo)航欄*/
	body{
		background-color: #f8f8f8;
	}
</style>

④配置底部導(dǎo)航欄，修改package.json

• 配置頁面

在pages配置下，修改頁面配置，包括修改頁面路徑及是否允許下拉刷新等

{
	"pages": [ //pages數(shù)組中第一項表示應(yīng)用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages
		{
			//指定有哪些頁面，并配置樣式
		    "path" : "pages/tabbar/index/index",
		    "style" :                                                                                    
		    {
				//頁面頂部的文本
		       "navigationBarTitleText":"首頁",
			   "navigationStyle":"custom"
		    }
		    
		}
		,{
		    "path" : "pages/tabbar/classify/classify",
		    "style" :                                                                                    
		    {
				"navigationBarTitleText":"分類",
				"navigationBarBackgroundColor":"#00b783",
				"navigationBarTextStyle":"white",
				//不啟動下拉刷新
				"enablePullDownRefresh":false
		    }
		    
		}
		,{
		    "path" : "pages/tabbar/study/study",
		    "style" :                                                                                    
		    {
		    	"navigationBarTitleText":"學(xué)習(xí)中心",
		    	"navigationBarBackgroundColor":"#00b783",
		    	"navigationBarTextStyle":"white",
		    	"enablePullDownRefresh":false
		    }
		    
		}
		,{
		    "path" : "pages/tabbar/mine/mine",
		    "style" :                                                                                    
		    {
		    	"navigationBarTitleText":"個人中心",
		    	"navigationBarBackgroundColor":"#00b783",
		    	"navigationBarTextStyle":"white",
		    	"enablePullDownRefresh":false
		    }
		    
		}
    ],
	...
}

• 新增tabbar配置

包括配置文本，選中未選中時候的圖標(biāo)等

{
	"pages": [ //pages數(shù)組中第一項表示應(yīng)用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages
	....
	
	// 底部導(dǎo)航欄
	"tabBar":{
		"color":"#999",
		//選中時的顏色
		"selectedColor":"#00b783",
		"borderStyle":"white",
		"backgroundColor":"#FFFFFF",
		"list":[
			{
				//底部導(dǎo)航欄的index對應(yīng)頁面
				"pagePath":"pages/tabbar/index/index",
				//對應(yīng)文本
				"text":"首頁",
				//未選中時的圖標(biāo)
				"iconPath":"static/tabar1.png",
				//選中之后的圖標(biāo)
				"selectedIconPath":"static/tabaron1.png"
			},
			{
				"pagePath":"pages/tabbar/classify/classify",
				"text":"分類",
				"iconPath":"static/tabar2.png",
				"selectedIconPath":"static/tabaron2.png"
			},
			{
				"pagePath":"pages/tabbar/study/study",
				"text":"學(xué)習(xí)",
				"iconPath":"static/tabar3.png",
				"selectedIconPath":"static/tabaron3.png"
			},
			{
				"pagePath":"pages/tabbar/mine/mine",
				"text":"我的",
				"iconPath":"static/tabar4.png",
				"selectedIconPath":"static/tabaron4.png"
			}
		]
	}
}

⑤查看效果

然后重新運行在瀏覽器，如果顯示不出效果，則先暫停，然后重新運行在對應(yīng)瀏覽器

效果：

3 實現(xiàn)搜索框（使用第三方組件實現(xiàn)）

①下載第三方組件

組件 - 自定義導(dǎo)航欄-下載組件

選擇下載并導(dǎo)入：

注意，下載插件是需要注冊賬號并登錄的，如果沒有賬號的話，注冊并登錄即可

導(dǎo)入成功之后的效果：

②安裝scss/sass插件

因為我們后續(xù)會使用到css中的scss語法，所以需要提前安裝插件

工具 - 插件安裝

如果已經(jīng)存在則無需安裝

否則，點擊安裝新插件，插件市場中搜索sass，然后選擇下載插件并導(dǎo)入

③抽取nav-bar組件（防止主頁面代碼過多不易維護）

在components組件下新建navbar目錄，然后在navbar目錄下創(chuàng)建navbar.vue文件

navbar.vue:

<template>
	<view>
		<view class="example-body">
			<!--uni-nav-bar 中的 statusBar 主要是為了適配"齊劉海"，防止navbar遮蓋住手機頂部的電量、時間等狀態(tài) -->
			<uni-nav-bar shadow statusBar :fixed="false" color="#333333" background-color="#FFFFFF" right-icon="scan">
				<view class="input-view">
					<uni-icons class="input-uni-icon" type="search" size="22" color="#666666" />
					<input confirm-type="search" class="nav-bar-input" type="text" placeholder="輸入搜索關(guān)鍵詞">
				</view>
			</uni-nav-bar>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		data() {
			return {

			}
		},
		methods: {

		},
		components: {
			uniNavBar
		}
	}
</script>

<style lang="scss">
	.input-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		width: 600rpx;
		flex: 1;
		background-color: #f8f8f8;
		height: 30px;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: 30px;
	}

	.input-uni-icon {
		line-height: 30px;
	}

	.nav-bar-input {
		height: 30px;
		line-height: 30px;
		/* #ifdef APP-PLUS-NVUE */
		width: 370rpx;
		/* #endif */
		padding: 0 5px;
		font-size: 28rpx;
		background-color: #f8f8f8;
	}

	.example-body {
		padding: 0;
	}
</style>

④在pages/tabbar/index/index.vue中引入Navbar組件

<template>
	<view>
		<!-- 引入頂部搜索框?qū)Ш綑?-->
		<Navbar/>
		
	</view>
</template>

<script>
	import Navbar from "../../../components/navbar/navbar.vue"
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		},
		components:{
			Navbar,
		}
	}
</script>

⑤效果

頁面效果：

4 首頁實現(xiàn)Banner輪播圖

通過網(wǎng)絡(luò)請求動態(tài)獲取圖片數(shù)據(jù)

4.1 通過網(wǎng)絡(luò)請求獲取數(shù)據(jù)

①uni.request發(fā)起網(wǎng)絡(luò)請求
pages/tabbar/index/index.vue：

<script>
	import Navbar from "../../../components/navbar/navbar.vue"
	export default {
		data() {
			return {
				//多張圖片，用數(shù)組存放
				topBanner: [],
				
			}
		},
		methods: {
			
		},
		mounted(){
				//vue的生命周期函數(shù)
				uni.request({
					url: "http://html5.bjsxt.cn/api/index/banner",
					//注意：網(wǎng)絡(luò)請求必須要按照下面的方式發(fā)起，不能使用新語法等
					success: (res) => {
						// console.log(res)
						this.topBanner = res.data.top_banner
					}
				})
		},
		components:{
			Navbar,
		}
	}
</script>

②通過console.log打印網(wǎng)絡(luò)請求所返回的數(shù)據(jù)：

③根據(jù)網(wǎng)絡(luò)返回的結(jié)果獲取圖片

需要根據(jù)自己的手機型號進行樣式的調(diào)整

pages/tabbar/index/index.vue：

<template>
	<view class="home">
		<!-- 引入頂部搜索框?qū)Ш綑?-->
		<Navbar/>
		<view class="index_banner_box">
			<!-- 頂部banner,同時配置對應(yīng)參數(shù) -->
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
				<!-- 從圖片數(shù)組中取出對應(yīng)圖片并展示在頁面上 -->
				<swiper-item v-for="(item, index) in topBanner" :key="index">
					<image class="banner" :src="item.img_url" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	...
</script>

<!-- 使用scss的語法 -->
<style lang="scss">
	.home {
		//flex：盒子模型
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;
		.index_banner_box {
			display: flex;
			width: 100%;
			padding: 10px;
			justify-content: center;
			align-items: center;
			border-radius: 5px;
			overflow: hidden;
			.swiper{
				width: 100%;
				height: 260rpx;
				.banner{
					width: 700rpx;
					height: 260rpx;
				}
			}
		}
	}
</style>

4.2 在頁面中展示圖片數(shù)據(jù)并配置樣式

4.3 結(jié)果

5 實現(xiàn)課程導(dǎo)航

注意：import用于在js中引入css文件， @import用于在css中引入css文件

5.1 抽取課程導(dǎo)航coursenav為component，并編寫頁面

①引入源碼中common下的圖標(biāo)樣式，css文件等

②在components文件夾下新建coursenav

coursenav.vue:

<template>
	<view class="course_nav_con">
		<view class="course_nav_info" v-for="(item, index) in list" :key="index">
			<text class="course_nav_icon icon iconfont" :class="item.icon"></text>
			<view class="course_info_text">{{item.text}}</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			}
		},
		mounted() {
			uni.request({
				url: "http://html5.bjsxt.cn/api/index/nav",
				success: (res) => {
					this.list = res.data.data
				}
			})
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	
	// import用于在js中引入css文件， @import用于在css中引入css文件
	@import "@/common/font/iconfont.css";

	.course_nav_con {
		display: flex;
		// 盒子模型不撐開容器本身大小
		box-sizing: border-box;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 15px 10px;

		.course_nav_info {
			width: 20%;
			flex-direction: row;
			flex-wrap: wrap;
			text-align: center;
			margin-bottom: 15px;

			.course_nav_icon {
				font-size: 30px;
			}

			.icon-java {
				color: #2a83fe;
			}

			.icon-weifuwu {
				color: #fd3761;
			}

			.icon-zuzhijiagou {
				color: #2b91e2;
			}

			.icon-dashuju {
				color: #2a83fe;
			}

			.icon-h {
				color: #00b478;
			}

			.icon-icon-- {
				color: #fd6012;
			}

			.icon-rengongzhineng {
				color: #fe391f;
			}

			.icon-ruanjianceshi {
				color: #00b478;
			}

			.icon-huatong {
				color: #fea917;
			}

			.icon-bianchengshibaobiao_icon {
				color: #2a83fe;
			}

			.icon-jianmo {
				color: #00b478;
			}

			.icon-chuangye {
				color: #fe391f;
			}

			.course_info_text {
				width: 100%;
				font-size: 13px;
				margin-top: 10px;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
		}
	}
</style>

5.2 主頁導(dǎo)入課程

在pages/tabbar/index/index.vue中引入CourseNar

• import CourseNav from “…/…/…/components/coursenav/coursenav.vue”
• components中添加CourseNav,
• template標(biāo)簽中添加<CourseNav/>

<template>
	<view class="home">
		<!-- 引入頂部搜索框?qū)Ш綑?-->
		<Navbar/>
		<view class="index_banner_box">
			<!-- 頂部banner,同時配置對應(yīng)參數(shù) -->
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
				<!-- 從圖片數(shù)組中取出對應(yīng)圖片并展示在頁面上 -->
				<swiper-item v-for="(item, index) in topBanner" :key="index">
					<image class="banner" :src="item.img_url" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 課程導(dǎo)航欄 -->
		<CourseNav/>
	</view>
</template>

<script>
	import Navbar from "../../../components/navbar/navbar.vue"
	import CourseNav from "../../../components/coursenav/coursenav.vue"
	export default {
		data() {
			return {
				//多張圖片，用數(shù)組存放
				topBanner: [],
				
			}
		},
		methods: {
			
		},
		mounted(){
				//vue的生命周期函數(shù)
				uni.request({
					url: "http://html5.bjsxt.cn/api/index/banner",
					//注意：網(wǎng)絡(luò)請求必須要按照下面的方式發(fā)起，不能使用新語法等
					success: (res) => {
						// console.log(res)
						this.topBanner = res.data.top_banner
					}
				})
		},
		components:{
			Navbar,
			CourseNav,
		}
	}
</script>

5.3 效果

部分網(wǎng)絡(luò)上的css及圖標(biāo)樣式已經(jīng)獲取不到了，所以大家可以替換新的網(wǎng)絡(luò)地址來獲取對應(yīng)的圖標(biāo)

6 實現(xiàn)限時免費

6.1 創(chuàng)建free-card的components

新建free-card目錄，然后新建free-card.vue文件

<template>
	<view>
		<view class="free_card_box" v-for="(item, index) in teaList" :key="index">
			<!-- 老師圖片 -->
			<view class="free_card_img">
				<image :src="item.teacher_logo" mode=""></image>
			</view>
			<!-- 限時免費文本信息 -->
			<view class="free_card_txt">
				<view class="free_card_T">{{ item.limitName }}</view>
				<view class="free_card_info">
					<view class="free_card_info_txt">
						<view class="info_txt1">{{ item.teacher_name }}{{ item.teacher_job }}</view>
						<view>{{ item.limitNum }}人學(xué)過</view>
					</view>
					<view class="free_card_info_btn" v-if="item.baoming == '馬上報名'">{{ item.baoming }}</view>
					<view class="free_card_info_btn free_card_info_btn1" v-else>{{ item.baoming }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"free-card",
		data() {
			return {
				teaList:[]
			}
		},
		mounted(){
			uni.request({
				url:"http://html5.bjsxt.cn/api/index/specific?userid=2162",
				success: (res) => {
					this.teaList = res.data.data
				}
			})
		},
		methods: {
			
		}
	}
</script>

<!-- .free_card_box的class里面再點.free_card_img的class 為 scss語法 -->
<style lang="scss">
	.free_card_box{
		display: flex;
		padding: 10px 0;
		margin: 10px;
		border-radius: 10px;
		box-shadow: 0 0  5px 1px rgba($color: #000000, $alpha: 0.1);
		box-sizing: border-box;
		align-items: center;
		margin-bottom: 15px;
		background-color: #fff;
		.free_card_img{
			flex-shrink: 0;
			width: 91rpx;
			height: 91rpx;
			border-radius: 100%;
			margin: 0 15px;
			image{
				width: 100%;
				height: 100%;
				border-radius: 100%;
			}
		}
		.free_card_txt{
			width: 100%;
			display: flex;
			box-sizing: border-box;
			flex-direction: column;
			padding: 0 15px 0 0;
			.free_card_T{
				font-size: 16px;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				margin: 10px 0;
			}
			.free_card_info{
				width: 100%;
				display: flex;
				box-sizing: border-box;
				flex-flow: row nowrap;
				justify-content: space-between;
				.free_card_info_txt{
					width: 60%;
					overflow: hidden;
					font-size: 16px;
					color: #666;
					.info_txt1{
						height: 20px;
						font-size:14px;
						overflow: hidden;
					}
				}
				.free_card_info_btn{
					width: 100px;
					height: 34px;
					text-align: center;
					line-height: 34px;
					border-radius: 34px;
					background-color: #00b783;
					color: #fff;
					font-size: 16px;
					margin-top: 10px;
				}
				.free_card_info_btn1{
					background-color: #ddd;
				}
			}
		}
	}
</style>

6.2 首頁引入free-card

1. 在script標(biāo)簽中導(dǎo)入
2. 在component中導(dǎo)入
3. 在頁面中引用

修改pages/tabbar/index/index.vue
①在課程導(dǎo)航欄下方添加FreeCard組件及在線課程圖標(biāo)

		<!-- 課程導(dǎo)航欄 -->
		<CourseNav/>
		<!-- 在線課程圖標(biāo) -->
		<view class="online_box">
			<image :src="index_banner.img_url" class="online_img"></image>
		</view>
		<view class="free_box">
			<view class="free_T_box public_tow_box">
				<view class="public_T">
					限時免費
				</view>
			</view>
			<FreeCard />
		</view>

②在script中獲取圖片和文本數(shù)據(jù)，并引入FreeCard組件

<script>
	import Navbar from "../../../components/navbar/navbar.vue"
	import CourseNav from "../../../components/coursenav/coursenav.vue"
	import FreeCard from "../../../components/free-card/free-card.vue"
	export default {
		data() {
			return {
				//多張圖片，用數(shù)組存放
				topBanner: [],
				index_banner:{},
			}
		},
		methods: {
			
		},
		mounted(){
				//vue的生命周期函數(shù)
				uni.request({
					url: "http://html5.bjsxt.cn/api/index/banner",
					//注意：網(wǎng)絡(luò)請求必須要按照下面的方式發(fā)起，不能使用新語法等
					success: (res) => {
						// console.log(res)
						this.topBanner = res.data.top_banner
						this.index_banner = res.data.index_banner
					}
				})
		},
		components:{
			Navbar,
			CourseNav,
			FreeCard, //引入限時免費組件
		}
	}
</script>

③在style中新增css樣式

<!-- 使用scss的語法 -->
<style lang="scss">
	.home {
		//flex：盒子模型
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;
		.index_banner_box {
			display: flex;
			width: 100%;
			padding: 10px;
			justify-content: center;
			align-items: center;
			border-radius: 5px;
			overflow: hidden;
			.swiper{
				width: 100%;
				height: 260rpx;
				.banner{
					width: 700rpx;
					height: 260rpx;
				}
			}
		}
		.online_box{
			display: flex;
			width: 724rpx;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			overflow: hidden;
			margin-bottom: 15px;
			
			.online_img{
				//1px 約等于2 rpx
				width: 724rpx;
				height: 132rpx;
			}
			
		}
		.public_tow_box{
			display: flex;
			width: 100%;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			overflow: hidden;
			padding: 0 15px;
			justify-content: space-between;
			align-content: space-between;
			flex-wrap: wrap;
			.public_T{
				font-size: 20px;
				font-weight: 700;
			}
		}
		.public_title{
			width: 100%;
			display: flex;
			padding: 0 15px;
			flex-direction: column;
			.public_class_t{
				font-size: 22px;
				font-weight: 700;
				margin-bottom: 15px;
			}
		}
	}
</style>

6.4 效果

7 實現(xiàn)就業(yè)班模塊

view標(biāo)簽與div標(biāo)簽區(qū)別：

• view標(biāo)簽通常具有更豐富的功能，比如數(shù)據(jù)綁定、事件處理等。而div標(biāo)簽只是一個簡單的容器，沒有特定的功能。

7.1 創(chuàng)建jobScroll

步驟與前面大同小異

<template>
	<!-- 就業(yè)班模塊：根據(jù)接口返回數(shù)據(jù)拼裝內(nèi)容 -->
	<view class="job_scroll_box">
		<scroll-view scroll-x="true" class="job_scroll_con_box">
			<view class="job_scroll_con">
				<view class="job_scroll_info" v-for="(item,index) in list" :key="index">
					<view class="job_scroll_card" :class="item.colors">
						<view class="job_scroll_card_T">{{ item.textT }}</view>
						<view class="job_scroll_card_icon">
							<view class="icon iconfont" :class="item.icon"></view>
						</view>
						<view class="job_scroll_card_des">{{ item.text }}</view>
						<view class="job_scroll_card_btn">免費試學(xué)</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			}
		},
		mounted() {
			uni.request({
				url: "http://html5.bjsxt.cn/api/index/course",
				success: (res) => {
					this.list = res.data.data
				}
			})
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	// @import ：從css中引入css
	@import "@/common/font/iconfont.css";

	.job_scroll_box {
		width: 100%;
		margin-bottom: 30px;
		box-sizing: border-box;

		.job_scroll_con {
			display: flex;
			align-items: center; //垂直據(jù)中
			flex-wrap: nowrap; //不換行
			box-sizing: border-box;

			.job_scroll_info {
				width: 225px;
				height: 260px;
				flex-shrink: 0;
				margin: 0 10px;

				.job_scroll_card {
					display: flex;
					flex-flow: column;
					box-sizing: border-box;
					align-items: center; //水平據(jù)中
					width: 100%;
					height: 248px;
					background-color: #b0def5;
					border-radius: 5px;
					margin-top: 12px;

					.job_scroll_card_T {
						display: flex;
						align-items: center; //水平據(jù)中
						justify-content: center; //垂直居中
						width: 210px;
						height: 38px;
						background-color: #e4f3fb;
						font-size: 16px;
						text-align: center;
						margin-top: -15px;
						border-bottom-left-radius: 25px;
						border-bottom-right-radius: 25px;
						border-top-left-radius: 15px;
						border-top-right-radius: 15px;
					}

					.job_scroll_card_icon {
						display: flex;
						align-items: center; //水平據(jù)中
						justify-content: center; //垂直居中
						box-sizing: border-box;
						width: 90px;
						height: 90px;
						background-color: #d3ecf9;
						border-radius: 100%;
						margin: 20px 0 15px;

						view {
							font-size: 42px;
							color: #2a83fe;
						}

					}

					.job_scroll_card_des {
						display: flex;
						box-sizing: border-box;
						align-items: center; //水平據(jù)中
						font-size: 14px;
					}

					.job_scroll_card_btn {
						display: flex;
						box-sizing: border-box;
						align-items: center;
						justify-content: center; //垂直居中
						width: 118px;
						height: 32px;
						line-height: 32px;
						color: #0a5ea0;
						font-size: 16px;
						border-radius: 34px;
						border: 1px solid #0a5ea0;
						margin-top: 15px;
					}
				}

				.job_scroll_card2 {
					background-color: #fed2b0;

					.job_scroll_card_T {
						background-color: #fff2e7;
					}

					.job_scroll_card_icon {
						background-color: #fee6d3;

						view {
							color: #d87e4e;
						}
					}

					.job_scroll_card_btn {
						color: #c44606;
						border: 1px solid #c44606;
					}
				}

				.job_scroll_card3 {
					background-color: #fee4b7;

					.job_scroll_card_T {
						background-color: #fef4e2;
					}

					.job_scroll_card_icon {
						background-color: #fef0d7;

						view {
							color: #b17001;
						}
					}

					.job_scroll_card_btn {
						color: #b17001;
						border: 1px solid #b17001;
					}
				}

				.job_scroll_card4 {
					background-color: #f5bcf7;

					.job_scroll_card_T {
						background-color: #fae0fb;
					}

					.job_scroll_card_icon {
						background-color: #f9d9fa;

						view {
							color: #8f0494;
						}
					}

					.job_scroll_card_btn {
						color: #8f0494;
						border: 1px solid #8f0494;
					}
				}

				.job_scroll_card5 {
					background-color: #cff2cb;

					.job_scroll_card_T {
						background-color: #ebf9e9;
					}

					.job_scroll_card_icon {
						background-color: #e4f7e2;

						view {
							color: #138a06;
						}
					}

					.job_scroll_card_btn {
						color: #138a06;
						border: 1px solid #138a06;
					}
				}

				.job_scroll_card6 {
					background-color: #f9cbc8;

					.job_scroll_card_T {
						background-color: #fce8e6;
					}

					.job_scroll_card_icon {
						background-color: #fbe2e0;

						view {
							color: #980c03;
						}
					}

					.job_scroll_card_btn {
						color: #980c03;
						border: 1px solid #980c03;
					}
				}

				.job_scroll_card7 {
					background-color: #f3eaa3;

					.job_scroll_card_T {
						background-color: #f8f3cc;
					}

					.job_scroll_card_icon {
						background-color: #f8f3cc;

						view {
							color: #786b03;
						}
					}

					.job_scroll_card_btn {
						color: #786b03;
						border: 1px solid #786b03;
					}
				}

				.job_scroll_card8 {
					background-color: #b4eef3;

					.job_scroll_card_T {
						background-color: #e4f9fb;
					}

					.job_scroll_card_icon {
						background-color: #d5f5f8;

						view {
							color: #088691;
						}
					}

					.job_scroll_card_btn {
						color: #088691;
						border: 1px solid #088691;
					}
				}

				.job_scroll_card9 {
					background-color: #f7c8a4;

					.job_scroll_card_T {
						background-color: #fcebdd;
					}

					.job_scroll_card_icon {
						background-color: #fae0cc;

						view {
							color: #9c4604;
						}
					}

					.job_scroll_card_btn {
						color: #9c4604;
						border: 1px solid #9c4604;
					}
				}

				.job_scroll_card10 {
					background-color: #cfd2fe;

					.job_scroll_card_T {
						background-color: #edefff;
					}

					.job_scroll_card_icon {
						background-color: #e4e6fe;

						view {
							color: #4e06ab;
						}
					}

					.job_scroll_card_btn {
						color: #4e06ab;
						border: 1px solid #4e06ab;
					}
				}
			}
		}
	}
</style>

7.2 首頁中引入

pages/tabbar/index/index.vue:

		<!-- view標(biāo)簽功能更強大：表示一個視圖 -->
		<view class="public_title">
			<view class="public_class_t">零基礎(chǔ)就業(yè)班</view>
			<JobScroll />
		</view>

其他和前面類似，導(dǎo)入JobScroll組件，然后在頁面中引用即可

7.3 效果

8 實現(xiàn)課程推薦部分

8.1 新增course-card這個component

<template>
	<view class="course_card_box">
		<view class="course_card_con">
			<view class="course_card_info" v-for="(item,index) in list" :key="index">
				<view class="course_card_img">
					<image :src="item.logo" mode=""></image>
				</view>
				<view class="course_card_des">
					<view class="course_card_des_T">{{ item.textT }}</view>
					<view class="course_card_des_info">
						<view class="course_card_des_pay">￥{{item.money}}</view>
						<view class="course_card_des_icon">
							<text class="icon iconfont icon-yonghu2"></text>
							{{item.hits}}人學(xué)過
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				list:[]
			}
		},
		mounted(){
			uni.request({
				url:"http://html5.bjsxt.cn/api/index/recommend",
				success: (res) => {
					this.list = res.data.data
				}
			})
		}
	}
	
</script>

<style lang="scss">
	@import '@/common/font/iconfont.css';

	.course_card_box {
		width: 100%;
		display: flex;
		box-sizing: border-box;
		padding: 0 15px;
		margin-bottom: 15px;
		overflow: hidden;
		align-items: center;
		justify-content: center;

		.course_card_info {
			display: flex;
			box-sizing: border-box;
			width: 100%;
			background: #fff;
			border-radius: 15px;
			padding: 10px;
			margin-bottom: 15px;
			flex-direction: row;
			align-items: center; //子元素垂直居中

			.course_card_img {
				flex-shrink: 0;
				margin-right: 15px;

				image {
					width: 240rpx;
					height: 140rpx;
				}
			}

			.course_card_des {
				width: 100%;
				display: flex;
				box-sizing: border-box;
				flex-direction: column;

				.course_card_des_T {
					font-size: 16px;
					line-height: 24px;
					margin-bottom: 5px;
				}

				.course_card_des_info {
					width: 100%;
					display: flex;
					flex-direction: row; //橫向排列
					box-sizing: border-box;
					justify-content: space-between;
					/* 橫向中間自動空間 */
					align-content: space-between;
					/* 豎向中間自動空間 */
					flex-wrap: wrap;

					/* 換行 */
					.course_card_des_pay {
						font-size: 12px;
						color: #ff5200;

						text {
							font-size: 16px;
						}
					}

					.course_card_des_icon {
						font-size: 14px;
						color: #333;

						text {
							font-size: 14px;
							color: #666;
							margin: 0 2px 0 0;
						}
					}
				}
			}
		}
	}
</style>

8.2 首頁引入

<template>
	<view class="home">
 	...
		<!-- view標(biāo)簽功能更強大：表示一個視圖 -->
		<view class="public_title">
			<view class="public_class_t">零基礎(chǔ)就業(yè)班</view>
			<JobScroll />
		</view>
		<view class="recommend_box">
			<view class="recommed_T_box public_tow_box">
				<view class="public_T">推薦課程</view>
			</view>
			<CourseCard />
		</view>
		<view class="daotu_box">
			<view class="daotu_T">驅(qū)動教學(xué)-貫穿教｜學(xué)｜練｜測｜評</view>
			<image :src="fontBanner.img_url" mode=""></image>
		</view>
	</view>
</template>
<script>
	import Navbar from "../../../components/navbar/navbar.vue"
	import CourseNav from "../../../components/coursenav/coursenav.vue"
	import FreeCard from "../../../components/free-card/free-card.vue"
	import JobScroll from "../../../components/jobscroll/jobscroll.vue"
	import CourseCard from "../../../components/course_card/course_card.vue"
	export default {
		data() {
			return {
				//多張圖片，用數(shù)組存放
				topBanner: [],
				index_banner:{},
				fontBanner:{}
			}
		},
		methods: {
			
		},
		mounted(){
				//vue的生命周期函數(shù)
				uni.request({
					url: "http://html5.bjsxt.cn/api/index/banner",
					//注意：網(wǎng)絡(luò)請求必須要按照下面的方式發(fā)起，不能使用新語法等
					success: (res) => {
						// console.log(res)
						this.topBanner = res.data.top_banner
						this.index_banner = res.data.index_banner
						this.fontBanner = res.data.foot_banner
					}
				})
		},
		components:{
			Navbar,
			CourseNav,
			FreeCard, //引入限時免費組件
			JobScroll,
			CourseCard
		}
	}
</script>

8.3 效果

9 課程列表詳情、課程介紹詳情實現(xiàn)

9.1 新建courseIntroduce頁面

①新建courseIntroduce目錄及頁面

②修改pages.json

//在"pages"配置下新增courseIntroduce配置
        ,{
            "path" : "pages/course/courseIntroduce/courseIntroduce",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "課程介紹",
				"navigationBarBackgroundColor":"#0c9c8f",
				"navigationBarTextStyle":"white",
                "enablePullDownRefresh": false
            }
        }

9.2 給coursenav.vue新增點擊事件

		//template部分：新增點擊事件
		<view class="course_nav_info" v-for="(item, index) in list" :key="index" @click="courseItemHandle(item.id,item.course)">
			<text class="course_nav_icon icon iconfont" :class="item.icon"></text>
			<view class="course_info_text">{{item.text}}</view>
		</view>
		
		...
<script>
		...
		methods: {
			// 點擊事件，點擊圖標(biāo)跳轉(zhuǎn)頁面，并傳入id和course
			courseItemHandle(id, course){
				uni.navigateTo({
					// url為pages中配置的courseIntroduce配置的頁面路徑，同時將id和course傳過去
					url:"/pages/couser/courseIntroduce/courseIntroduce?id=" + id +"&course="+course
				})
			}
		}
</script>

9.3 新增course-jieshao、courseList、courseIntroduce-data component

course-jieshao.vue:

<template>
	<view class="course_jieshao_box">
		<image :src="images" mode="" :style="{ height:imageHeight + 'rpx' }"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props:{
			images:{
				type:String,
				defualt:""
			},
			imageHeight:{
				type:String,
				default:""
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.course_jieshao_box{
		display: flex;
		box-sizing: box;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		image{
			width: 750rpx;
			
		}
	}
</style>

courseList.vue:

<template>
	<view class="course_list_box">
		<view class="course_list_con">
			<view class="course_list_info" @click="clickViode" v-for="(item,index) in videoList" :key="index">
				<view class=".course_list_info_txt">{{ item.type_name }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: {
			videoList: {
				type: Array,
				default: function() {
					return []
				}
			}
		},
		methods: {
			clickViode(){
				uni.navigateTo({
					url:"/pages/couser/video/video"
				})
			}
		}
	}
</script>

<style lang="scss">
	.course_list_box {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
		width: 100%;
		padding: 0 15px;

		.course_list_con {
			display: flex;
			box-sizing: border-box;
			flex-direction: column;
			flex-grow: 1;

			.course_list_info {
				display: flex;
				box-sizing: border-box;
				flex-direction: center;
				overflow: hidden;
				flex: 1;
				width: 100%;
				height: 45px;
				line-height: 45px;
				font-size: 14px;
				border-bottom: 1px solid #efefef;

				.course_list_info_txt {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
</style>

courseIntroduce-data.vue

<template>
	<view class="courseIntroduce_data_box">
		<view class="courseIntroduce_data_info" v-for="(item,index) in msg" :key="index">
			<view class="courseIntroduce_data_txt1"><text>{{ item.num }}</text></view>
			<view class="courseIntroduce_data_txt2"><text>{{ item.txt }}</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props:{
			msg:{
				type:Array,
				default:function(){
					return []
				}
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.courseIntroduce_data_box {
		display: flex;
		box-sizing: border-box;
		flex-direction: row;
		/*橫向排列*/
		flex-wrap: wrap;
		/* 換行排列 */
		justify-content: center;
		/*居中對齊*/
		width: 100%;
		padding: 15px 10px;

		.courseIntroduce_data_info {
			display: flex;
			box-sizing: box;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 25%;
			height: 80px;
			flex-grow: 1;
			position: relative;

			.courseIntroduce_data_txt1 {
				text-align: center;
				width: 100%;
				font-size: 12px;
				color: #ff5200;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				margin-bottom: 10px;

				text {
					font-size: 16px;
				}
			}

			.courseIntroduce_data_txt2 {
				text-align: center;
				width: 100%;
				font-size: 13px;
				color: #333;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}

	}
</style>

9.4 courseIntroduce頁面中引入course-jieshao、courseList、courseIntroduce-data組件

courseIntroduce.vue:

<template>
	<view class="home">
		<view class="courseIntroduce_box">
			<view class="courseIntroduce_des">
				<view class="courseIntroduce_info">{{ introduce }}</view>
			</view>
			<CourseIintroduceData :msg="introduceList"/>
			<view class="question_line"></view>
			<view class="courseIntroduce_tab_box">
				<view class="courseIntroduce_tab_nav">
					<view v-for="(item,index) in items" :class="{ 'btna':count === index }" @tap="change(index)" :key="index">{{ item }}</view>
				</view>
				<view class="courseIntroduce_tab_con">
					<view class="discount_info" :class="{dis:count === 0}">
						<CourseList :videoList="Clist"/>
					</view>
					<view class="discount_info" :class="{dis:count === 1}">
						<CourseJieshao :images="imageT" :imageHeight="imageHeight"/>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	import CourseIintroduceData from "../../../components/courseIntroduce-data/courseIntroduce-data.vue"
	import CourseList from "../../../components/courseList/courseList.vue"
	import CourseJieshao from "../../../components/course-jieshao/course-jieshao.vue"
	export default {
		data() {
			return {
				introduce:"",
				introduceList:[],
				items:["課程章節(jié)","課程介紹"],
				count:0,
				Clist:[],
				imageT:"",
				imageHeight:""
			}
		},
		components:{
			CourseIintroduceData,
			CourseList,
			CourseJieshao
		},
		onLoad(options) {
			uni.request({
				url: "https://www.itbaizhan.cn/api/course/detail",
				// 參數(shù)
				data: {
					id: options.id,
					course: options.course
				},
				success: (res) => {
					this.introduce = res.data.data.introduce
					this.introduceList = res.data.data.introduceList
					this.Clist = res.data.data.Clist
					this.imageT = res.data.data.image
					this.imageHeight = res.data.data.height
				}
			})
		},
		methods: {
			change(index){
				this.count = index;
			}
		}
	}
</script>
<style lang="scss">
	.courseIntroduce_box {
		display: flex;
		box-sizing: box;
		flex-direction: column;
		margin-bottom: 90px;

		.courseIntroduce_des {
			display: flex;
			box-sizing: border-box;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;
			background-color: #0c9c8f;
			padding: 0 10px 15px;
			overflow: hidden;

			.courseIntroduce_info {
				display: flex;
				box-sizing: box;
				width: 100%;
				color: #fff;
				font-size: 16px;
				line-height: 24px;
			}
		}

		//tab
		.courseIntroduce_tab_box {
			display: flex;
			box-sizing: border-box;
			flex-direction: column;

			.courseIntroduce_tab_nav {
				display: flex;
				box-sizing: border-box;
				flex-direction: row;
				background-color: #fff;
				border-bottom: 1px solid #e4e4e4;
				margin-bottom: 20px;

				view {
					height: 50px;
					line-height: 50px;
					font-size: 16px;
					flex-grow: 1;
					text-align: center;
					background-color: #fff;

				}
			}

			.discount_info {
				display: none;
			}

			.btna {
				display: flex;
				box-sizing: border-box;
				justify-content: center; //水平方向?qū)R
				color: #00b783;
				position: relative;
			}

			.btna::after {
				content: '';
				width: 40px;
				height: 3px;
				background-color:#00b783;
				position: absolute;
				bottom: 0;
				left: 50%;
				margin-left: -20px;
			}

			.dis {
				display: block;
			}
		}
	}
</style>

9.5 效果

10 播放頁面實現(xiàn)(webView)

web-view：在瀏覽器中內(nèi)嵌網(wǎng)頁，可以理解為一個內(nèi)嵌的瀏覽器

10.1 創(chuàng)建video頁面

video.vue:

<template>
	<view>
		<!-- 后期根據(jù)課程詳情頁面跳轉(zhuǎn)時傳過來的數(shù)據(jù)，請求后端或者拼接對應(yīng)視頻地址替換即可 -->
		<web-view src="https://www.bilibili.com/video/BV1ZM4y177kh/"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

10.2 給courseList添加點擊事件跳轉(zhuǎn)視頻播放

courseList.vue:

<template>
	<view class="course_list_box">
		<view class="course_list_con">
			<view class="course_list_info" @click="clickViode" v-for="(item,index) in videoList" :key="index">
				<view class=".course_list_info_txt">{{ item.type_name }}</view>
			</view>
		</view>
	</view>
</template>
<script>
		methods: {
			clickViode(){
				uni.navigateTo({
					// 跳轉(zhuǎn)視頻播放頁面
					url:"/pages/course/video/video"
				})
			}
		}
	}
</script>

10.3 效果

bug

如果運行項目發(fā)現(xiàn)報錯：‘core-js/modules/es.string.iterator.js’

• 則表明缺少core-js環(huán)境，在終端cmd執(zhí)行下面命令

# 安裝core-js之后，重新啟動項目
npm i core-js -D

11 打包發(fā)布項目

11.1 app打包

①在manifest.json中配置AppID、圖標(biāo)等，如果沒有AppID則重新獲取

②選擇應(yīng)用頂部的發(fā)行 - 云打包 - 填寫對應(yīng)信息（證書等）

11.2 小程序打包

以微信小程序為例

①下載微信開發(fā)者工具，并開放端口供uniapp調(diào)用（設(shè)置-安全-打開服務(wù)端口）
②從uniapp直接跳轉(zhuǎn)到微信開發(fā)者工具

③接下來的發(fā)布就和小程序發(fā)布一樣了
詳情參考：https://blog.csdn.net/weixin_45565886/article/details/130918238

填寫AppId等文章來源地址http://www.zghlxwxcb.cn/news/detail-524936.html

到了這里，關(guān)于uniapp快速開發(fā)小程序全流程的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！