Uniapp笔记（二）uniapp语法1

最新推荐文章于 2024-05-16 22:46:58 发布
最新推荐文章于 2024-05-16 22:46:58 发布
阅读量1.1k 收藏 1
点赞数
文章标签： uni-app 笔记 运维
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74343097/article/details/132529589
版权

一、本节项目预备知识

1、效果演示
2、常见组件
1、view组件

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

2、swiper组件

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

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

swiper常用属性

属性名类型默认值说明
indicator-dotsBooleanfalse是否显示面板指示点
indicator-colorColorrgba(0, 0, 0, .3)指示点颜色
indicator-active-colorColor#000000当前选中的指示点颜色
autoplayBooleanfalse是否自动切换
currentNumber0当前所在滑块的 index
intervalNumber5000自动切换时间间隔
durationNumber500滑动动画时长
<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组件

图片组件的常见属性

属性名类型说明
srcString图片的资源地址
modeString图片裁剪、缩放模式
lazy-loadBoolean图片懒加载

常见的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 参数说明

属性类型必填项说明
urlString是开发者服务器接口地址
dataString/Object/ArrayBuffer否请求的参数
headerObject否设置请求的 header，header 中不能设置 Referer。content-type默认为application/json
methodstring否HTTP 请求方法
dataTypestring否返回的数据格式
successfunction否接口调用成功的回调函数
failfunction否接口调用失败的回调函数
completefunction否接口调用结束的回调函数（调用成功、失败都会执行）

案例：首页轮播图

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

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

activeChange(index) {
	this.active = index
	this.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;
			}
		}			
 }
鸣鲷有柒
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
20220210uniapp项目笔记
02-10
20220210uniapp项目笔记
uniapp笔记.rar
08-06
根据官网和实例整理的uniapp的详细笔记.里边包括uniapp介绍、页面传值、组件传值、生命周期函数、路由跳转、常用组件、本地存储等， 以及一些实例
使用 Uni-App 创建购物主页
m0_75218397的博客
06-26 1280
这是一个充满想象力和创意的数字时代，电子商务已成为人们日常购物的主要渠道。在这样的背景下，拥有一款优秀的电子商务网站和APP，成为了现代社会商业竞争的必备武器。本篇文稿将为大家详细介绍如何构建一个优秀的电子商务网站首页，涵盖了底部导航、头部搜索框、轮播图、导航条和楼层等主要内容。效果图：首页包括5个部分1.底部导航2.头部搜索框3.轮播图4.导航条5.楼层在这里我们使用uni-app进行商城首页的开发。
黑马微信小程序-实现本地服务九宫格并展示商品列表
m0_62785037的博客
06-28 3762
黑马微信小程序-实现本地服务九宫格并展示商品列表详细说明
Uniapp笔记（四）uniapp语法3
m0_74343097的博客
08-27 1346
给shopcart.js模块中的mutations选项中添加修改s购物车数量的方法的方法。给shopcart.js模块中的mutations选项中添加修改购物车状态的方法。编写一个加入购物车的方法的mutations方法addToShopcart方法。函数，读取本地存储的购物车数据，对 shopcartList 数组进行初始化。在src下创建store文件夹，在store文件夹下创建index.js文件。在商品列表的项中绑定单击事件，并传递商品id值。中获取商品的 Id，并调用请求商品详情的方法。
uniapp笔记
GTbond的博客
02-15 712
1.项目目录 2.模板语法 vue组件语法 v-bind / : v-on / @ v-model v-if v-show v-for 空标签 template view 作为div使用 text 作为span使用
Hbuilder uniapp 笔记
LAOning11的博客
08-10 4536
uniapp hbuilder
uniApp 学习笔记总结(一)
IT_Holmes的博客
04-21 3112
1. uniapp环境搭建 2. uni-app的开发目录结构 3. pages.json下的 globalStyle 全局外观配置 3.1 导航栏样式配置 3.2 下拉刷新页面效果 3.3 onReachBottomDistance页面上拉触底事件 4. pages.json下的 页面配置 5. pages.json下的 配置基本的tabbar 6. pages.json下的 condition启动模式配置 7. text组件 的基本使用 8. view组件 的基本使用 9. button按钮 组件的基本
uniapp学习笔记-问题
G_ruirui的博客
02-27 515
uniapp学习笔记
uniapp 笔记第二天
m0_61389631的博客
08-02 259
inputv-model="name"@input="inputName"type="text"placeholder="请输入你的姓名"style="backgroundskyblue;只需要加上v-model主要数据发生变化就会影响视图视图变化就会影响数据所以是双向的意思。生命周期每到一个阶段就要做不同的事情生命周期也一样每到一个阶段就执行不同的。语法v-onclick="方法名"方法名一定是在methods存在这的方法。name'我叫强哥'.........
小程序+UniApp开发笔记
BreenCL的博客
05-10 703
小程序+uni-app开发笔记，基础知识
uniapp前端开发笔记
03-21
包含了一些应用教程与资源连接和一部分2024年重庆市移动开发大赛样题
uniapp学习实战笔记uniapp学习实战笔记
01-19
uniapp学习实战笔记uniapp学习实战笔记
移动端uniapp(个人笔记,新手向)
10-31
移动端uniapp(个人笔记,新手向)
uniappx 应用未读角标插件（完善推送、通知、消息效果） Ba-Shortcut-Badge-U
最新发布
三杯五岳
05-16 170
Ba-Shortcut-Badge-U 是设置应用未读角标的原生插件，UTS版本（同时支持uniapp和uniappx）
uniapp实现列表拖拽排序+滑动删除功能
TZ1284063988的博客
05-14 338
此篇代码在原插件基础进行了bug修改与滑动功能的新增 原插件地址 HM-dragSorts.vue组件使用 HM-dragSorts.vue <template> <view class=""> <view class="HM-drag-sort" :style="{'height': ListHeight+'rpx','background-color': listBackgroundColor}"> <!-- 拖拽中显示的行 -->
uniapp h5 配置代理服务器
red_HTML的博客
05-14 187
【代码】uniapp h5 配置代理服务器。
uniapp中实现保存图片，复制信息功能函数的封装
weixin_57031986的博客
05-15 143
uniapp中实现保存图片，复制信息功能函数的封装
uniapp基础笔记
10-11
好的，uniapp是一个基于Vue.js框架的跨平台开发框架，能够同时生成iOS、Android和Web应用程序。开发者只需要编写一次代码，就可以将其发布到多个平台。 uniapp的一些基础知识点包括： 1. uniapp的项目结构和Vue.js项目类似，包含index.html、main.js、App.vue等文件。 2. uniapp支持多种组件，包括基础组件、表单组件、媒体组件等。 3. uniapp支持使用vue-router进行路由管理。 4. uniapp支持使用vuex进行全局状态管理。 5. uniapp支持使用uni-ui组件库进行快速开发。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值