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>
相关推荐
jason_yang1 天前
基于BEM规范实现ElementPlus组件
css·scss
清风细雨_林木木1 天前
uni-app 和 uni-app x 的区别
uni-app
iOS阿玮1 天前
期待iOS开发者加入,共同抵制“苹果税”反垄断招募令!
uni-app·app·apple
普通网友1 天前
支持二次开发的代练App源码:订单管理、代练监控、安全护航功能齐全,一站式解决代练护航平台源码(PHP+ Uni-app)
安全·uni-app·php
蜕变菜鸟1 天前
uview使用u-popup组件当开启遮罩层禁止下层页面滚动。uniapp弹框禁止页面上下滚动。
uni-app
@大迁世界2 天前
用 popover=“hint“ 打造友好的 HTML 提示:一招让界面更“懂人”
开发语言·前端·javascript·css·html
伍哥的传说2 天前
Tailwind CSS v4 终极指南:体验 Rust 驱动的闪电般性能与现代化 CSS 工作流
前端·css·rust·tailwindcss·tailwind css v4·lightning css·utility-first
拜无忧2 天前
前端,用SVG 模仿毛笔写字绘画,defs,filter
前端·css·svg
代码小学僧2 天前
🎉 在 Tailwind 中愉快的使用 Antd Design 色彩
前端·css·react.js
ssshooter2 天前
复习 CSS Flex 和 Grid 布局
前端·css·html