uniapp基础知识【搬代码】

基础知识

HTML、css、javaScript(ES6)

HTML结构

1.View 类似于传统html中的div,用于包裹各种元素内容。

2.text文本

3.swoper

4.image

5.video

6.button

7.input

html 复制代码
<template>
	<!-- <view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view> -->
	<view>
		<text>itbaizhan</text>
		<swiper :indicator-dots="true" :autoplay="true">
			<swiper-item>
				<image style="width: 100%;height: 100%;" src="../../static/logo.png"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/head1.jpg"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/head2.jpg"></image>
			</swiper-item>
		</swiper>
		<video src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"></video>
		<button type="primary" size="mini">按钮</button>
		<input style="border: 1px solid #666;"/>
	</view>
</template>

2.css样式

1.属性:

*字体

*大小

*布局;float浮动变成横向摆放

2.选择器:calss类选择器

3.取值与单位

*px

*color

*rpx自动根据屏幕大小进行适配

4.盒子模型

margin:外边距

padding:内边距

border:边框

5.弹性盒子模型

html 复制代码
<template>
	<view>
		<view class="box">
			<text>测试</text>
		</view>
		<view class="box1">
			<text>ceshi</text>
		</view>
		<view class="box2">
			<view class="sonbox1">
				<text class="b1">盒子1</text>
			</view>
			<view class="sonbox1">
				<text class="b1">盒子1</text>
			</view>
			<view class="sonbox1">
				<text class="b1">盒子1</text>
			</view>
		</view>
	</view>
	
</template>

.name{
		color: crimson;
		font-size: 30rpx;
	}
	.box{
		width: 100rpx;
		height: 100rpx;
		background-color: aquamarine;
		
	}
	.box1{
		width: 100px;
		height: 100px;
		background-color: blue;
		margin-left: 10px;
		margin-top: 10px;
		padding-left: 10px;
		padding-top: 10px;
		border: 5px solid green;
	}
	.box2{
		display: flex;//作用:1.弹性布局2.方向控制3.换行控制4.对齐方式5.子元素排序
	}
	.sonbox1{
		display: flex;
		flex: 1;
		/* width: 100px; */
		height: 100px;
		background-color: aqua;
		margin: 5px;
		justify-content: center;//水平方向居中
		align-items: center;//垂直居中
	}
	

js业务

1.页面的动态绑定

2.事件处理

3.生命周期函数

4.网络请求

html 复制代码
<template>
	<!-- <view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view> -->
	<view>
		
		<text>{{title}}</text>
		<text v-for="(item,index) in list" :key="index">{{ item }}</text>
		{{count}}
		<view>
			<view v-for="(item,index) in banners" :key="index">
				<text>{{ item.title }}</text>
				<image :src="item.image" mode="aspectFit"/><!-- 使用 :src 绑定图片路径,mode 属性可设置图片的显示模式,如 aspectFit 等 -->
				<text>{{ item.url }}</text>
			</view>
		</view>
		<button @click="clickbutton">按钮</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '!!Hello!!',
				list:["asd","sdf","dfg"],
				count:0,
				banners:[]
			}
		},
		onLoad() {
			console.log("onLoad")
		},
		/*
		uniapp生命周期函数
			1.小程序:onLoad(){}
			2.vue: mounted() {}
		*/
	   mounted() {//生命周期函数:自动执行的函数
	   	console.log("测试")
		uni.request({
			url:'http://iwenwiki.com:3006/api/banner',//仅为示例,并非真是接口地址
			// data:{
			// 	text:'uni.request'
			// },
			// header:{
			// 	'custom-header':'hello'//自定义请求头信息
			// },
			success: (res) => {
				console.log(res.data);
				this.banners = res.data.data//res.data.的data是返回数据中需要便利的数据标头
			}
		});
	   },
		methods: {//事件
			clickbutton(){
				console.log("打印点击事件")
				this.count++
			}
		}
	}
</script>

<style>
	/* .content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	} */

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	
</style>
相关推荐
nihui1237 小时前
Uniapp 实现顶部标签页切换功能?
javascript·vue.js·uni-app
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
Json____10 小时前
使用html css js 开发一个 教育机构前端静态网站模板
前端·css·html·js·前端学习·企业站·教育机构网站
*TQK*10 小时前
✨1.HTML、CSS 和 JavaScript 是什么?
前端·javascript·css·html
engchina12 小时前
使用 Vite + React 19 集成 Tailwind CSS 与 shadcn/ui 组件库完整指南
css·react.js·ui·vite·tailwind·react 19·shadcn
尚学教辅学习资料13 小时前
基于SSM+uniapp的鲜花销售小程序+LW示例参考
小程序·uni-app·java毕设·鲜花销售
web_Hsir15 小时前
vue + uniapp + 高德地图实现微信小程序地图polyline、marker展示
vue.js·微信小程序·uni-app
2401_8854055115 小时前
智能硬件定位技术发展趋势
物联网·微信小程序·uni-app·智慧城市·智能硬件·宠物·智能手表
尚学教辅学习资料15 小时前
基于SpringBoot+vue+uniapp的投票小程序+LW示例参考
vue.js·spring boot·小程序·uni-app·java毕设·投票系统
fakaifa17 小时前
云贝餐饮连锁V3独立版全开源+vue源码
微信小程序·小程序·uni-app·开源·php·源码下载