uniapp+unicloud+阿里云微信小程序学习笔记（一）

因为想学微信小程序开发在这写个学习笔记，有错请指正咯~

---

前言

小白毫无基础可言，都是跟B站上的各类视频讲解学，不懂的用ChatGPT查。纯肝代码，不用模板。

---

一、使用工具

HBuilder X（快速开发）
微信开发者工具（原生）
unicloud云数据库（云端）

二、准备工作

申请一个开发者ID，就是AppID(小程序ID)
注册一个dcloud账号
建一个云服务空间（阿里云或者腾讯云）

三、笔记

1.template–前端页面

示例：

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view>
</template>

2.script–实现动态交互和数据处理

<script>
	
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {
			
		},
		methods: {
			getData(){
				
			}
		}
	}
</script>

使用export default关键词定义页面组件，其中data属性定义了页面组件需要绑定的数据项。
onLoad方法是页面生命周期中的一个钩子函数，在页面加载时会被调用，在这里可以调用云函数或云对象等后台服务去获取数据和处理业务逻辑。methods方法是组件中定义的其他方法。

---

3.style–页面组件样式定义

<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>

这段代码是一个uni-app页面组件的样式定义。它定义了组件内部多个元素的样式属性，包括对容器、图片、文本等元素进行了样式定义。每一项都对应页面样式标签中的class名。
具体解释如下：

.content样式属性定义了一个flex布局，让内部元素纵向排列、居中对齐、等间距分布。

.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

.logo样式属性定义一个图片的样式，设置图片高宽为200rpx，以及上下居中和左右自适应的布局。

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

.text-area样式属性定义了一个文本区域的样式，使用flex布局使文本居中对齐。

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

.title样式属性定义了一个标题的样式，设置字体大小和颜色。

.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

四、总结

首页就这样了。