其实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,才可能快速上手,然后就是多找找网上项目接口,不要太过于依赖视频一步步做,可以自己跳过,碰到难点了再自己反复看,视频对于一些细节的介绍还是很到位的,这些都是平时没有注意到的。