首先用Hbuilder创建一个uniapp项目

最好装一个scss，可以嵌套样式，开发起来比较方便(个人而言)

首先黑马商城开发的是微信小程序，所以你要去微信小程序中拿到你的AppID配置到manifest.json中(在微信开发者工具中也可以获取)

然后你就开始写pages了 写一个pages就需要在pages.json中的pages配置项去配置你的path和样式（样式选配）//pages数组中第一项表示应用启动页

然后你可以去开启下拉刷新：1.可以在全局开启globalStyle中用"enablePullDownRefresh":true

也可以在pages数组中去开启，需要谁开启谁

轮播图用内置组件swiper来配置 然后还有些属性 我用到了

indicator-dots：图片下面有小圆点 默认是false 就是没有

autoplay：是否自动切换 默认是false

interval：自动切换的时间间隔 毫秒 自己设置

duration：滑动时常 毫秒 自己设置

也可以动态绑定 在data里面自己配置属性 通过 ： 冒号来动态绑定属性

<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
			<swiper-item>
				<view class="swiper-item">
					<image class="lunbo-img" src="http://a.hiphotos.baidu.com/image/pic/item/e824b899a9014c087eb617650e7b02087af4f464.jpg"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image class="lunbo-img" src="http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 导航区 -->
		<view class="nav">
				<view class="nav_item" v-for="(item,index) in navs" :key='index' @click="navItemClick(item.path)">
					<view class=""><img class='nav-img' :src="item.src" alt=""></view>
					<text class='nav_text'>{{item.title}}</text>
				</view>
		</view>
		
		<!-- 推荐商品区 -->
		<goods></goods>	
		
	</view>
</template>

<script>
	import goods from '../../components/goods-list/goods-list.vue'
	export default {
		data() {
			return {
				// swipers:[]
				//goods:[]
				navs:[
					{
						title:'黑马超市',
						path:'/pages/goods/goods',
						src:'../../static/logo.png'
					},
					{
						title:'联系我们',
						path:'/pages/contact/contact',
						src:'../../static/logo.png'
					},
					{
						title:'社区图片',
						path:'/pages/pics/pics',
						src:'../../static/logo.png'
					}
				]
			}
		},
		components:{
			goods
		},
		onLoad() {
			// this.getSwipers()
			//this.getHotGoods()
		},
		methods:{
			navItemClick(url){
				 // console.log(url)
				uni.navigateTo({
					 url
				})
			}
		}
	}
</script>

<style>
	swiper{
		width: 750rpx;
		height: 380rpx;
	}
	.nav{
		display: flex;	
	}
	.nav_item{
		width: 25%;
		text-align: center;
	}
	.nav_item img{
		width: 120rpx;
		height: 120rpx;
		background-color: #b50e03;
		border-radius: 60rpx;
		margin: 15rpx;
		line-height: 120rpx;
	}
	.nav-img{
		width: 50rpx;
		height: 50rpx;
		margin-top: 10rpx;
	}
	.nav_text{
		font-size: 30rps;
	}
</style>

---

轮播图获取方式

我这里没有接口就写了写死数据，正常来说是需要通过请求后台接口来获取数据的，自己封装一个接口，然后通过$来调用 。

当然你也可以直接写死数据 就一个一个的写也没啥问题 就是到时候改的时候会很麻烦 需要自己一个一个修改图片地址

//定义一个方法 把他扔到onLoad里面去 当页面初识化的时候就调用方法
async getSwiper(){
    const res = await this.$myRequest({
        url:'xxx写上你需要请求的接口地址，如果你封装的时候写了baseURL就直接写后面的地址就行了'
        //这里返回的是一个promise对象 需要用await处理成同步操作 用了await就要用async
    })
    this.swiper = res.data.message //将请求到的数据保存到数组中 然后用v-for循环就可以遍历了
}


	通过请求接口来设置轮播图
	 	// 获取轮播图的数据 通过封装接口来获取轮播图
	 	async getSwipers(){
	 		const res = await this.$myRequest({
	 			url:'/api/getlunbo'
	 		})
	 		this.swipers = res.data.message
	 	}
	 }
	 
	 然后在swiper里面通过for循环来循环轮播图 通过动态数据绑定来循环图片
	 <swiper-item v-for='(item,index) in swiper' :key='item.id'>
			<image :src='item.img'></image>
	 </swiper-item>

导航栏区域也是一样 通过请求后台来获取数据 然后他跳转的时候你需要点击导航栏的区域，所以就给他设置一个点击事件然后把他的地址传回去，通过uni.navigateTo()来跳转

这是我封装的请求方法

const BASE_URL = 'HTTP://localhost:8080'

export const myRequest = (options) =>{
	return new Promise((resolve,reject)=>{
		// 通过uni.request({})来发送请求
		uni.request({
			url:BASE_URL + options.url,
			method:options.method || 'GET',
			data:options.data || {},
			success:res=>{
				if(res.data.status !== 0){
					return uni.showToast({
						title:'获取数据失败'
					})
				}
				resolve(res)
			},
			fail:(err)=>{
				uni.showToast({
					title:'请求接口失败'
				})
				reject(err)
			}
		})
	})
}

---

引入地图的话就用map 这个api 然后它里面可以设置经纬度，具体属性建议看文档

想要点击拨打电话的话就给他定义一个方法例如以下代码定义一个@click='phone' 然后通过uni.makePholeCall()来实现

<template>
	<view class="contact">
		<image class="img" src="../../static/src=http___img.wmpic.com_wp-content_uploads_2020_05_2020052910592019.gif&refer=http___img.wmpic.gif"></image>
		<view class="info">
			<view @click="phone">联系电话：400-628-9090（点击拨打）</view>
			<view>校区地址：山东省南山市南山区</view>
		</view>
		<map class="map" :longitude="loggitude" :latitude="latitude"></map>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				loggitude:120.363172,
				latitude:30.312212,
				// markes:[
				// 	{
				// 		loggitude:120.363172,
				// 		latitude:30.312212,
				// 	}
				// ]
			}
		},
		methods:{
			phone(){
				console.log(111)
				uni.makePhoneCall({
					phoneNumber:'400-810-8888'
				})
			}
		}
	}

---

 监听下拉事件刷新 下拉触发刷新完成，然后把页面变成1 下拉完成之后重新请求数据，然后清除刷新

// 监听下拉刷新事件
		onPullDownRefresh() {
			console.log('刷新完成')
			this.pageindex = 1;
			this.flag = false;
			// 下拉完成之后 重新请求数据
			setTimeout(()=>{
				this.getGoodsList();
				// 重新加载完成之后 取消下拉刷新事件
				uni.stopPullDownRefresh()
			},1000)	
		}

---

还有个点击高亮的效果 我是通过样式来修改的：hover 也可以通过获取当前数组的下标然后修改其类名来实现点击高亮效果

其他的我感觉没什么难的地方了，本人萌新一个，有写的不对或者有问题的小伙伴可以在下面留言 或者加我q743180155讨论一下前端的知识