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>
相关推荐
街尾杂货店&18 小时前
css word属性
前端·css
2501_915918411 天前
掌握 iOS 26 App 运行状况,多工具协作下的监控策略
android·ios·小程序·https·uni-app·iphone·webview
知识分享小能手1 天前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
2501_915909061 天前
iOS 混淆实战,多工具组合完成 IPA 混淆与加固(源码 + 成品 + 运维一体化方案)
android·运维·ios·小程序·uni-app·iphone·webview
赵庆明老师1 天前
Uniapp微信小程序开发:EF Core 中级联删除
uni-app
Javashop_jjj1 天前
三勾软件| 用SpringBoot+Element-UI+UniApp+Redis+MySQL打造的点餐连锁系统
spring boot·ui·uni-app
Demoncode_y1 天前
前端布局入门:flex、grid 及其他常用布局
前端·css·布局·flex·grid
Q_Q5110082851 天前
python+uniapp基于微信小程序的心理咨询信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
HuYi_code2 天前
WeChat 小程序下载文件实现
微信小程序·uni-app
Filotimo_2 天前
2.CSS3.(3).html
前端·css3