uniapp学习笔记

• UNIAPP官网链接
• HTML 结构骨架
• CSS 样式
• JS业务

UNIAPP官网链接

官网链接

 [官网链接](https://uniapp.dcloud.io/api/request/request.html)

HTML 结构骨架

1. view 视图容器

<view> </view>

2. text 文本

<text>{{text}}</text>

3. swiper 轮播图

<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="interval" :duration="duration">
					
	<swiper-item>
		<view >
			<image style="width: 100%;" src="../../static/logo.png"></image>
		</view>
	</swiper-item>

	<swiper-item>
		<view >
			<image style="width: 100%;" src="../../static/logo.png"></image>
		</view>
	</swiper-item>

	<swiper-item>
		<view >
			<image style="width: 100%;" src="../../static/logo.png"></image>
		</view>
	</swiper-item>
						

</swiper>

4. image

<image style="width: 100%;" src="../../static/logo.png"></image>

5. video

 <video id="myVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
                @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>

6. button

<button @click="clickHandle">按钮</button>

7. input

<input  focus placeholder="输入密码" />

CSS 样式

1. 属性

• 字体
• 大小
• 布局，横向摆放 float，background，height

2. 选择器 class 类选择器
3. 取值与单位
4. 盒子模型
5. 网络请求

<template>
<view>
	<text class="name">{{title}}</text>
	
	<view>{{count}}</view>
	
	<text v-for="(item,index) in list" :key="index" > {{item}} </text>
	<view class="box">盒子</view>
	<view class="box1">盒子</view>
	
	<button @click="clickHandle">按钮</button>
</view>		
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				list:["liai","liqi","liyang"],
				count:0
			}
		},
		onLoad() {

		},
		/*
		生命周期函数
		
		*/
		mounted() {
			console.log("测试")
		},
		methods: {
				
			clickHandle(){
				console.log("nihao")
				this.count++
			}
		}
	}
</script>

<style>
	.name{
		font-size: 30rpx;
		color: #000000;
	}
	.box{
		width: 100px;
		height: 100px;
		background: #4CD964;
	}
	.box1{
		width: 100px;
		height: 100px;
		background: #DD524D;
		margin-left:100px ;
		margin-top: 100px;
		
		padding-left: 50px;
		padding-top: 50px;
	}
		
</style>

JS业务

1. 页面数据的动态绑定

export default {
	data() {
		return {
			title: 'Hello',
			list:["liai","liqi","liyang"],
			count:0,
			baners:[]
		}
	},

	<view>{{count}}</view>
	<text>{{title}}</text>
	<text v-for="(item,index) in list" :key="index" > {{item}} </text>

2. 事件处理

methods: {
	clickHandle(){
		console.log("nihao")
		this.count++
	}

<button @click="clickHandle">按钮</button>

3. 生命周期
4. 网络请求

mounted() {
	uni.request({
	    url: 'http://iwenwiki.com/api/blueberrypai/getIndexBanner.php', //仅为示例，并非真实接口地址。
	    success: (res) => {
	        console.log(res.data);
			this.baners = res.data.banner;
	    }
	});

data() {
	return {
		title: 'Hello',
		list:["liai","liqi","liyang"],
		count:0,
		baners:[]
	}
},

<view>
	<view v-for="(item,index) in baners":key ="index">
		<text>{{item.title}}</text>
		<view>{{item.content}}</view>
	</view>
</view>