Uniapp笔记（二）uniapp语法1

最新推荐文章于 2024-04-28 14:33:03 发布
最新推荐文章于 2024-04-28 14:33:03 发布
阅读量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;
			}
		}			
 }
鸣鲷有柒
关注
uni - app 滚动组件 scroll-view 与轮播组件 swiper
qq_25906119的博客
01-31 908
uni - app 滚动组件和轮播组件的使用
uniapp笔记
GTbond的博客
02-15 759
1.项目目录 2.模板语法 vue组件语法 v-bind / : v-on / @ v-model v-if v-show v-for 空标签 template view 作为div使用 text 作为span使用
Uniapp笔记（四）uniapp语法3
m0_74343097的博客
08-27 1454
给shopcart.js模块中的mutations选项中添加修改s购物车数量的方法的方法。给shopcart.js模块中的mutations选项中添加修改购物车状态的方法。编写一个加入购物车的方法的mutations方法addToShopcart方法。函数，读取本地存储的购物车数据，对 shopcartList 数组进行初始化。在src下创建store文件夹，在store文件夹下创建index.js文件。在商品列表的项中绑定单击事件，并传递商品id值。中获取商品的 Id，并调用请求商品详情的方法。
【uniapp】介绍、常用标签、请求&localStorage封装
weixin_52479803的博客
03-03 3072
【uniapp】介绍、常用标签、请求&localStorage封装
uniapp基础语法复习
qq_19272233的博客
10-17 510
uni-app的基本使用 基础部分： 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件的使用 uni-app中样式学习 在uni-app中使用字体图标和开启scss 条件注释跨端兼容 uni中的事件 导航跳转 组件创建和通讯，及组件的生命周期 uni-app中使用uni-ui库 uni-app介绍 官方网页 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多
uni-app开发教程之swiper组件使用教程
码奴一只猿
05-26 1万+
Uniapp是一款跨平台的开发框架，可以用于开发微信小程序、H5、App等多种应用。其中，swiper组件是一种非常常用的组件，可以实现轮播图、图片滑动等效果。本文将详细介绍如何在Uniapp中使用swiper组件。
uniapp笔记.rar
08-06
【uniapp笔记】 uniapp是一款基于Vue.js开发的多端框架，它允许开发者编写一次代码，就能在iOS、Android、Web（H5）、小程序（微信/支付宝/百度/头条/QQ）等多个平台运行。它的核心理念是提供一套统一的开发语言和...
移动端uniapp(个人笔记,新手向)
10-31
总的来说，uniapp是一个适合新手入门的移动端开发框架，它结合了Vue.js的优雅语法和跨平台的能力，降低了开发门槛，同时提供了强大的功能和良好的性能。通过不断学习和实践，开发者可以借助uniapp快速构建出高质量的...
uniapp 笔记第三天(修改数组对象的某个值、watch、computed)
m0_61389631的博客
08-03 5083
我们想呢 点击哪个按钮 就让谁切换它的状态,看上面的数据哈 每一项都有一个status 你就可以根据索引拿到当前的状态赋值 做法就是取反哈！，原因是简单数据类型没有地址的概念 现在修改的num是一个简单数据类型传过来的 num 并非data里定义的 num 传过来的只是值而已。，原因就是 传过来的对象和data里面定义的对象 指向的都是同一个地址，所以可以修改，如果你去定义一个简单的数据类型。如果你想直接修改 复杂数据类型里的某个值 也是同理，我们既然可以拿到上面的索引 直接根据索引找某个值就好了。...
uniapp项目开发笔记摘要与要点总结
1. 开发环境：uniapp基于Node.js开发，需要先安装Node.js和npm（Node.js的包管理器）。 2. uniapp命令行工具：安装完Node.js和npm后，可以使用npm命令来安装uniapp的命令行工具（HBuilderX），使用uniapp命令行工具...
uniapp vue3封装 swiper 组件
最新发布
weixin_44509418的博客
04-28 395
uniapp vue3封装 swiper 中间突出显示组件
uni-app中使用swiper自动滚动
weixin_46021159的博客
04-09 1626
uni-app中使用swiper自动滚动
uniapp 开发笔记
qq_29384639的博客
03-31 9263
2、字体小于12px设置，下方示例为10px字体 { font-size: 20px; transform: scale(0.5); //缩放 } 3、
小程序uni-app的api
大鹏的博客
01-19 4182
uni-api 指的是uni-app 针对一些 微信小程序api所做的封装它解决了两个问题原生的小程序api不支持promise形式的调用（需要自己封装）原生的微信小程序api不支持跨平台创建组件引入组件注册组件使用组件easycom是uni-app提供的一种更加简单使用组件的规范uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。
uniApp小程序的api封装
余白x的博客
10-12 1158
:render-content="renderContent"w
Uniapp 日常总结
qq_34286611的博客
05-09 2467
1. style scoped的作用 在组件的<style></style>加上 scoped属性，可以让<style></style>里的样式只在当前组件生效。 2. //同步存储 uni.setStorageSync("key","value") //同步获取 let value = uni.getStorageSync("key") 3. 设置一个text只有一行，显示不全的用...表示 overflow: hidden;...
uniapp uni.$emit()失效
黎小小的博客
07-20 2977
settle.vue页面引入bjs-settle.vue组件，bjs-settle.vue组件点击后在settle.vue中进行结算操作（过程中有跳转）本来以为使用vue的this.$emit()就可以实现子组件回调父组件中的方法，但是发现没用。然后看到uniapp中需要使用uni.$emit()，直接使用后，也不生效。官方是说使用$emit$on$off常用于跨页面、跨组件通讯。
uniapp中使用uni.$emit和uni.$on进行页面通讯传值
热门推荐
青颜的天空的博客
12-09 1万+
uniapp中使用uni.$emit和uni.$on进行页面通讯传值
关于uniapp的坑以及app的功能干货
qq_66722383的博客
06-21 655
曾经我们使用uni-list发现，ios真机滚动可以滚动，但是安卓滚不了，在其外层套个view发现，安卓可以滚，ios又不行了，然后很神奇，后面我们决定直接用原生list，因为搭配cell，可以做到原生的效果，当数据多会销毁未使用的样式提升性能。uniapp提到easycom，就是我们默认在components处定义，就可以直接使用，然后不用再使用传统的import，可是有时候没有生效，这个时候需要你自己手动在page.json配置下，注，位置放第一位也就是page前面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值