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	滑动动画时长

3、image组件

图片组件的常见属性

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

常见的mode值

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

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

组件中调用

二、商城首页

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、自定义轮播图组件

1.3、首页引用轮播图组件

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、自定义首页导航组件

2.3、首页引用导航组件

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、自定义首页楼层组件

• 渲染楼层中的标题

• 渲染楼层中的图片

3.3、首页引用楼层组件

三、商城分类页

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

2、获取分类数据

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

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

• 循环渲染列表结构

	
		
			{{item.cat_name}}
		
	

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

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

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

	{{item.cat_name}}

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

	{{item.cat_name}}

• 定义 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.message
	this.secondCategoryList = result.message[0].children
},

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

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

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

	
		
			{{item.cat_name}}
		
	

• 样式

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

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

• 三级菜单结构

• 样式

.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;
			}
		}			
 }