Uniapp笔记（二）uniapp语法1

一、本节项目预备知识

1、效果演示

2、常见组件

1、view组件

视图容器，它类似于传统html中的div，用于包裹各种元素内容。

2、swiper组件

swiper是滑动视图容器，经常看到的轮播图就是通过它来完成的

swiper-item是swiper子组件，仅能放到swiper组件中

swiper常用属性

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色
autoplay	Boolean	false	是否自动切换
current	Number	0	当前所在滑块的 index
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长

<template><view class="container"><swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="2000"><swiper-item><text>1</text></swiper-item><swiper-item><text>2</text></swiper-item><swiper-item><text>3</text></swiper-item></swiper></view>
</template>
<style lang="scss">.swiper{width: 750rpx;height: 300rpx;background-color: #ccc;}
</style>

3、image组件

图片组件的常见属性

属性名	类型	说明
src	String	图片的资源地址
mode	String	图片裁剪、缩放模式
lazy-load	Boolean	图片懒加载

常见的mode值

值	含义
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

<template><view class="container"><swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="2000"><swiper-item v-for="(item,index) in swiperList" :key="index"><image :src="item.image_src" mode="widthFix" class="swiper-image"></image></swiper-item></swiper></view>
</template>
<script>export default {data() {return {swiperList:[ {"image_src": "https://api-hmugo-web.itheima.net/pyg/banner1.png","open_type": "navigate","goods_id": 129,"navigator_url": "/pages/goods_detail/main?goods_id=129"},{"image_src": "https://api-hmugo-web.itheima.net/pyg/banner2.png","open_type": "navigate","goods_id": 395,"navigator_url": "/pages/goods_detail/main?goods_id=395"},{"image_src": "https://api-hmugo-web.itheima.net/pyg/banner3.png","open_type": "navigate","goods_id": 38,"navigator_url": "/pages/goods_detail/main?goods_id=38"}]}}}
</script>
<style lang="scss">.swiper{width: 750rpx;height: 300rpx;.swiper-image{width: 100%;height: 100%;}}
</style>

3、网络

3.1、发起请求

uni.request(OBJECT)

OBJECT 参数说明

属性	类型	必填项	说明
url	String	是	开发者服务器接口地址
data	String/Object/ArrayBuffer	否	请求的参数
header	Object	否	设置请求的 header，header 中不能设置 Referer。content-type默认为application/json
method	string	否	HTTP 请求方法
dataType	string	否	返回的数据格式
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

案例：首页轮播图

export default {data() {return {swiperList:[]}},created() {uni.request({url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',method:'GET',success:(res) =>{this.swiperList=res.data.message}})}
}

3.2、微信小程序网络

1)、微信小程序网络请求限制

处于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制

• 只能请求HTTPS类型的接口

• 必须将接口的域名添加到信任列表中

2)、配置request合法域名

配置步骤：登录微信小程序管理后台->开发->开发设置->服务器域名->修改request合法域名

注意事项：

• 域名只支持https协议

• 域名不能使用IP地址或localhost

• 域名必须经过ICP备案

• 服务器域名一个月内最多可申请5次修改

3)、跳过requesth合法域名校验

如果后台程序员仅仅提供了http协议的接口，暂时没有提供https协议的接口，此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开启【开发者不校验请求域名、TLS版本及HTTPS证书】选项，跳过request合法域名的校验。

注意：跳过requesth合法域名校验的选项，仅限在开发与调试阶段使用。

3.3、封装uni.reqeust

在src/utils目录下创建request.js

const BASE_URL="https://api-hmugo-web.itheima.net/api/public/v1"
export default{//发送GET请求get:(url,data)=>{return new Promise((resolve,reject)=>{uni.showLoading({title:'网络正在加载中，请稍等'})//发送网路请求uni.request({method:'GET',url:BASE_URL+url,data:data,header:{'Content-Type':'application/json'},success(data) {resolve(data)},fail(err) {reject(err)},complete() {uni.hideLoading() //关闭加载框}})})},//发送POST请求post:(url,data)=>{return new Promise((resolve,reject)=>{uni.showLoading({title:'网络正在加载中，请稍等'})//发送网路请求uni.request({method:'POST',url:BASE_URL+url,data:data,header:{'Content-Type':'application/json'},success(data) {resolve(data)},fail(err) {reject(err)},complete() {uni.hideLoading() //关闭加载框}})})}
}

在main.js中将request.js挂载到全局

import request from '@/utils/request.js'
uni.$api=request

组件中调用

<template><view class="container"><swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="2000"><swiper-item v-for="(item,index) in swiperList" :key="index"><image :src="item.image_src" mode="widthFix" class="swiper-image" :lazy-load="true"></image></swiper-item></swiper></view>
</template>
<script>export default {data() {return {swiperList:[]}},methods:{async getSwiperList(){let result=await uni.$api.get('/home/swiperdata')this.swiperList=result.message}},created() {this.getSwiperList()}}
</script>
<style lang="scss">.swiper{width: 750rpx;height: 300rpx;.swiper-image{width: 100%;height: 100%;}}
</style>

二、商城首页

1、首页轮播图

1.1、首页请求轮播图数据

实现步骤

• 在 data 中定义轮播图的数组

• 在 created生命周期函数中调用获取轮播图数据的方法

• 在 methods 中定义获取轮播图数据的方法

export default {data() {return {swiperList:[]}},methods:{async getSwiperList(){let result=await this.$request({url:'/home/swiperdata'})this.swiperList=result.message}},created() {this.getSwiperList()}
}

1.2、自定义轮播图组件

<template><swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="2000"><swiper-item v-for="(item,index) in swiperList" :key="index"><image :src="item.image_src" mode="widthFix" class="swiper-image" :lazy-load="true"></image></swiper-item></swiper>
</template><script>export default {props: ['swiperList']}
</script><style lang="scss">.swiper {width: 750rpx;height: 300rpx;.swiper-image {width: 100%;height: 100%;}}
</style>

1.3、首页引用轮播图组件

<template><view><homeSwiper :swiperList="swiperList"></homeSwiper></view>
</template>
<script>import homeSwiper from '@/pages/index/homeSwiper.vue'export default {components:{homeSwiper}}
</script>

2、首页分类导航区域

实现步骤

• 在 data 中定义首页导航的数组

• 在 created生命周期函数中调用获取导航数据的方法

• 在 methods 中定义获取导航数据的方法

2.1、首页请求轮播图数据

export default {data() {return {navList:[]}},methods:{async getNavList(){let result=await this.$request({url:'/home/catitems'})this.navList=result.message}},created() {this.getNavList()}
}

2.2、自定义首页导航组件

<template><view class="nav-list"><view class="nav-item" v-for="(item,index) in navList" :key="index"><image :src="item.image_src" class="nav-item-image"></view></view>
</template><script>export default{props:['navList']}
</script><style lang="scss">.nav-list{display: flex;justify-content: center;margin-top: 50rpx;.nav-item{flex-grow: 1;display: flex;justify-content: center;.nav-item-image{width: 128rpx;height: 140rpx;}}}
</style>

2.3、首页引用导航组件

<template><view><home-nav :navList="navList"></home-nav></view>
</template>
<script>import homeNav from '@/components/homeNav/index.vue'export default {components:{homeNav}}
</script>

3、首页楼层区域

• 在 data 中定义首页楼层的数组

• 在 created生命周期函数中调用首页楼层的方法

• 在 methods 中定义获取首页楼层数据的方法

3.1、首页请求楼层数据

export default {data() {return {floorList:[]}},methods:{async getFloorList(){let result=await this.$request({url:'/home/floordata'})this.floorList=result.message}},created() {this.getFloorList()}
}

3.2、自定义首页楼层组件

• 渲染楼层中的标题

<template><view class="floor-list"><view class="floor-item" v-for="(item,index) in floorList" :key="index"><view class="floor-title"><image :src="item.floor_title.image_src" class="floor-item-img" mode="widthFix"></image></view></view></view>
</template><script>export default{props:['floorList'],mounted() {console.log('floorList',this.floorListData);}}
</script><style lang="scss">.floor-title{display: flex;margin-top: 30rpx;}
</style>

• 渲染楼层中的图片

<template><view class="floor-list"><view class="floor-item" v-for="(item,index) in floorList" :key="index"><view class="floor-title"><image :src="item.floor_title.image_src" class="floor-item-img" mode="widthFix"></image></view><view class="floor-img"><view class="floor-left-img"><view class="left-img-box"><image :src="item.product_list[0].image_src" mode="widthFix" class="big-img"></image></view></view><view class="floor-right-img"><view v-for="(subItem,idx) in item.product_list" :key="idx" v-if="idx!=0" class="right-img-box-item"><image :src="subItem.image_src" mode="widthFix" class="small-img"></image></view></view></view></view></view>
</template>
<style>.floor-title{display: flex;margin-top: 30rpx;}.floor-item-img{width: 100%;height: 60rpx;}.floor-img{display: flex;margin-left: 20rpx;}.floor-right-img{display: flex;flex-wrap: wrap;}.big-img{width: 232rpx;}.small-img{width: 233rpx;}
</style>

3.3、首页引用楼层组件

<template><view><home-floor :floorList="floorList"></home-floor></view>
</template>
<script>import homeFloor from '@/components/homeFloor/index.vue'export default {components:{homeFloor}}
</script>

三、商城分类页

1、渲染分类页面的基本结构

<template><view class="container"><scroll-view class="left-scroll-view" scroll-y="true"><view class="left-scroll-view-item active">产品0</view><view v-for="i in 100" class="left-scroll-view-item"><text>产品{{i}}</text></view></scroll-view><scroll-view class="right-scroll-view" scroll-y="true" ><view  v-for="i in 100">xxxxxx</view></scroll-view></view>
</template><script>
</script><style lang="scss">.container{display: flex}.left-scroll-view{width: 240rpx;height: 100vh;.left-scroll-view-item{line-height: 120rpx;background-color: #f7f7f7;text-align: center;}.active{background-color: #fff;position: relative;}.active::before{content: ' ';display: block;position:absolute;width: 10rpx;height: 80rpx;background-color: darkorange;top:50%;transform: translateY(-50%);}}.right-scroll-view{flex-grow: 1;height: 100vh;}
</style>

2、获取分类数据

export default{data(){return{categoryList:[]}},methods:{async getCategoryList(){let result=await this.$request({url:'/categories'})this.categoryList=result.message}},created() {this.getCategoryList()}
}

3、动态渲染左侧的一级分类列表

• 循环渲染列表结构

<view class="container"><scroll-view class="left-scroll-view" scroll-y="true"><view v-for="(item,index) in categoryList" :key="index" class="left-scroll-view-item"><text>{{item.cat_name}}</text></view></scroll-view>
</view>

• 在 data 中定义默认选中项的索引

data(){return{active:0}
},

• 循环渲染结构时，为选中项动态添加 .active 样式

<view v-for="(item,index) in categoryList" :key="index" :class="{'left-scroll-view-item':true,'active':index==active?true:false}"><text>{{item.cat_name}}</text>
</view>

• 为一级分类的 Item 项绑定点击事件处理函数 activeChanged

<view v-for="(item,index) in categoryList" :key="index" :class="{'left-scroll-view-item':true,'active':index==active?true:false}"@click="activeChange(index)"><text>{{item.cat_name}}</text>
</view>

• 定义 activeChanged 事件处理函数，动态修改选中项的索引

methods:{activeChange(index){this.active=index}
}

4、动态渲染右侧的二级分类列表

• 在data中定义二级分类的数据

data() {return {secondCategoryList: []}
},

• 修改 getCategoryList方法，在请求到数据之后，为二级分类列表数据赋值

async getCategoryList() {let result = await this.$request({url: '/categories'})this.categoryList = result.messagethis.secondCategoryList = result.message[0].children
},

• 修改 activeChange 方法，在一级分类选中项改变之后，为二级分类列表数据重新赋值

activeChange(index) {this.active = indexthis.secondCategoryList = this.categoryList[index].children
}

• 循环渲染右侧二级分类列表的 UI 结构：

<scroll-view class="right-scroll-view" scroll-y="true"><view class="cate-lv2" v-for="(item,index) in secondCategoryList" :key="index"><view class="cate-lv2-title"><text>{{item.cat_name}}</text></view></view>
</scroll-view>

• 样式

.cate-lv2-title {font-size: 12px;font-weight: bold;text-align: center;padding: 15px 0;
}

5、动态渲染右侧的三级分类列表

• 三级菜单结构

<template><view class="container"><!--左侧栏代码省略--><scroll-view class="right-scroll-view" scroll-y="true"><view class="cate-lv2" v-for="(item,index) in secondCategoryList" :key="index"><view class="cate-lv2-title"><text>{{item.cat_name}}</text></view><!--三级菜单--><view class="cate-lv3-list"><view class="cate-lv3-item" v-for="(subitem,subIndex) in item.children" :key="subIndex"><image :src="subitem.cat_icon" class="item3_img"></image><text>{{subitem.cat_name}}</text></view></view></view></scroll-view></view>
</template>

• 样式

.cate-lv3-list{display: flex;flex-wrap: wrap;justify-content: center;.cate-lv3-item{flex-grow: 1;display: flex;flex-direction: column;margin: 20rpx;.item3_img{width: 120rpx;height: 120rpx;}}			}