其实uniapp是基于Vue的所以语法上面没有太大的区别，只是多了很多的API接口，多看文档学会调用就好了，写项目无非就是布局，然后调用数据进行增删改查，和vue的学习没有什么太大的区别，重要的是它自带了很多组件，不需要自己去导入，最多导入一下别的图标之类的，一般多用的iconfont（阿里矢量图标）
微信开发者工具太不稳定了，非常的卡。。。。。。。。。
下面是商城项目（接口不是很全，主要是练习）
界面展示

重点在于对uni.request的封装

const BASE_URL='https://api-hmugo-web.itheima.net/api/public/v1' //全局接口，方便以后更改域名，不用大幅度修改
export const myRequest=(options)=>{ //options是调用这个封装函数时传过来的一个集合
	return new Promise((resolve,reject)=>{ //异步（可以不用等待） 拓展：同步（要等前面一个程序执行完）
	//封装
		uni.request({
			url:BASE_URL+options.url,
			method:options.method||'GET',
			data:options.data||{},
			success:(resp)=>{
			//成功返回，一定要使用promise里面的回调函数resolve返回，方便使用.then方法
				if(resp.data.meta.status==200){
				//成功回调
					return resolve(resp.data)
				}else{
				//请求不对，返回状态标语
					return	uni.showToast({
						title:resp.data.meta.msg
					})
				}
			},
			fail:(err)=>{
				uni.showToast({
					title:'数据请求失败'
				})
				//错误回调
				return	reject(err)
			}
		})
	})
}
//全局使用，在main.js里面加入，注意属性名称！！！！（可以自己喜好修改，确保一致就好了）
import {myRequest} from './utils/api.js'
Vue.prototype.$myRequest=myRequest

页面源代码（没什么重点，就几个在页面的时候需要注重的点，影响整体布局，重点的地方会有注释）

<template>
//页面整体布局
	<view class="home">
		<swiper indicator-dots circular>
			<swiper-item v-for='item in swiperList' :key='item.good_id'>
				<image :src='item.image_src'></image>
			</swiper-item>
		</swiper>
		<!-- 导航区域 -->
		<view class="nav">
			<view class="nav_item">
				<view class="glyphicon glyphicon-gift"></view>
				<text>我的超市</text>
			</view>
			<view class="nav_item">
				<view class="glyphicon glyphicon-thumbs-up"></view>
				<text>关于我们</text>
			</view>
			<view class="nav_item">
				<view class="glyphicon glyphicon-picture"></view>
				<text>社区图片</text>
			</view>
			<view class="nav_item">
				<view class="glyphicon glyphicon-film"></view>
				<text>学习视频</text>
			</view>
		</view>
		<!-- 热门商品 -->
		<view class="hot_goods">
			<view class="tit">推荐商品</view>
			<view class="goods_list">
				<view class="goods_item" v-for="item in hotGoodsList" :key='item.goods_id'>
					//后台没有图片路径返回，这里用的都是一样的
					<image src="https://api-hmugo-web.itheima.net/full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg"></image>
					<view class="price">
						<text>{{item.goods_price}}</text>
						//只是为了熟悉使用，所以就用的id代替的历史价格
						<text>{{item.goods_id}}</text>
					</view>
					<view class="name">
						{{item.goods_name}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList:[],
				hotGoodsList:[]
			}
		},
		onLoad() {
			this.getSwipers()
			this.getHotGoods()
		},
		methods: {
			//获取轮播图数据
			getSwipers(){
			this.$myRequest({
					url:'/home/swiperdata',
					method:'GET'
				}).then(resp=>{
					this.swiperList=resp.message
				})
				// uni.request({
				// 	url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
				// 	method:'GET',
				// 	success:(resp)=>{
				// 		console.log(resp)
				// 		if(resp.data.meta.status!==200){
				// 			return uni.showToast({
				// 				title:'获取数据失败'
				// 			})
				// 		}else{
				// 			this.swiperList=resp.data.message
				// 			return uni.showToast({
				// 				title:resp.data.meta.msg
				// 			})
				// 		}
				// 	}
				// })
			},
			getHotGoods(){
			//调用已经分装好了的函数，怎样全局引用的请再仔细看如何封装
				this.$myRequest({
					url:'/goods/search',
					method:'GET'
				}).then(resp=>{
					this.hotGoodsList=resp.message.goods
					console.log(this.hotGoodsList)
				})
			}
		}
	}
</script>
//这里使用的scss语法，其实less和scss都差不多，看个人（scss更加适用与运算，学习成本也有点）
附上链接：[https://blog.csdn.net/guoqiankunmiss/article/details/106113821]
<style lang="scss">
	.home{
		swiper{
			width: 750rpx;
			height: 380rpx;
			image{
				height: 100%;
				width: 100%;
			}
		}
		.nav{
			display: flex;
			.nav_item{
				display: flex;
				flex-direction: column;
				width: 25%;
				text-align: center;
				view{
					width: 120rpx;
					height: 120rpx;
					background: #b50e03;
					border-radius: 60rpx;
					margin:10px auto;
					line-height: 60px;
					color: #fff;
					font-size: 50rpx;
				}
				text{
					font-size: 30rpx;
				}
			}
		}
		.hot_goods{
			background: #eee;
			对于overflow:hidden的使用请看链接，里面有详解：[添加链接描述](https://blog.csdn.net/weixin_44647865/article/details/115524760)
			overflow: hidden;	
			margin-top: 20rpx;
			.tit{
				height: 100rpx;
				line-height: 100rpx;
				background-color: #FFFFFF;
				text-align: center;
				letter-spacing: 40rpx;
				font-size: 40rpx;
				margin: 7rpx 0 ;
				color:$shop-color ;
			}
			.goods_list{
				padding: 0 15rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.goods_item{
					margin: 10rpx 0;
					background: #fff;
					width: 355rpx;
					padding: 20rpx;
					box-sizing: border-box;
					image{
						width: 80%;
						height: 150px;
						margin: 0 auto;
						//image是行内元素，得变成块级元素才可以使用margin: 0 auto;进行居中操作
						display: block;
						margin: 0 auto;
					}
					.price{
						color: $shop-color;
						font-size: 36rpx;
						text:nth-child(2){
							color: #ccc;
							font-size: 28rpx;
							text-decoration:line-through;
							margin-left: 10rpx;
						}
					}
					.name{
						font-size: 28rpx;
						line-height: 50rpx;
						padding-bottom: 15rpx;
						padding-top:10rpx ;
					}
				}
			}
		}
	}
</style>

总结一下：uniapp的使用，快速上手得先熟悉vue，才可能快速上手，然后就是多找找网上项目接口，不要太过于依赖视频一步步做，可以自己跳过，碰到难点了再自己反复看，视频对于一些细节的介绍还是很到位的，这些都是平时没有注意到的。