uniapp——第1篇：基于vue语法的、比原生开发屌的小程序开发_uniapp 小程序开发

作者：盐析白兔 | 2024-07-03 10:06:17

踩

uniapp 小程序开发

前提，建议先学会前端几大基础：HTML、CSS、JS、Ajax，还有一定要会Vue!（Vue2\Vue3）都要会！！！不然不好懂

博主作为大二前端小白，刚刚接触前端微信小程序开发时选择的是基于“微信开发者工具”开发的【原生开发】，然后在上手真正项目的时候头都大了，那么多鬼布局、组件都要自己搞，虽然微信有自带的一些组件插件、也有外部插件，但是我发现都不够美观，而且打比赛跟别人团队一起的时候，才知道人家都是用uniapp开发，你搞个微信开发者工具.......人家懒得鸟你，于是这里开始正式学习uniapp。

一、搭建写uniapp的工具、环境

为了加快我自己以及各位尊贵看官的学习速度，这里不多加阐述，很简单，下载HBuilder：HBuilderX-高效极客技巧，然后安装好，把里面绿了吧唧的那个软件创建快捷方式到桌面，直接点开用就行了，安装都免了，贼方便，不懂自己查视频。

点开之后创建项目，然后根据你自己的喜好，选择vue2、vue3都行

二、认识一下各个文件结构

不认识文件结构的话，你连写代码在哪写你都不知道：

另外还有别的文件夹需要后期我们自己手动添加配置的，比如

【component】：学过vue的知道，存放“组件”文件用的文件夹

【node_modules】：环境依赖，后面装uView这些插件需要用到的

【uni_modules】：以后安装了外部的uView组件后会有的文件夹


components                      // 组件目录
api                             // 封装接口目录
node_modules                    // 环境依赖
pages                           // 页面文件目录
    index                       // index 页面文件夹
        index.vue               // index 页面
static                          // 静态资源目录
uni_modules                     // uniapp 环境依赖
unpackage                       // 打包文件目录
common                          // 公共文件目录
App.vue                         // 根组件
index.html                      // 入口页面
main.js                         // 入口文件
manifest.json                   // 应用配置文件
pages.json                      // 页面配置文件
package.json                    // 插件管理文件
package-lock.json               // 插件版本锁定文件
uni.scss                        // 内置样式文件

而且注意看，有没有很眼熟的感觉？看看Vue工程化开发项目、微信小程序原生开发：

基本很像，虽然有区别的大致换汤不换药，一个道理。

三、一个“页面”的结构：.vue文件的结构

先简单看一下一个.vue文件的结构：

简单例子：


<template>
	<!-- 这个view标签，就等于以前的div -->
 
	<!-- view被叫做“组件”、区别于div的是因为，它有一些新增的属性 -->
    <!-- 比如有一个属性叫做hover-class，是当你去按view标签的时候，会添加这个class的样式 -->
	<view hover-class="hover">这是一个view标签</view>
    <!-- 这样我们给view标签添加了hover-class以后，当我们按它的时候，就会给添加里面的hover类的样式了 -->
	
	<!-- scroll-view：滚动效果  
					scroll-y 允许纵向滚动  
					scroll-x 允许横向滚动 
	注意“纵向”滚动盒子要有【高度】！！“横向”要有【宽度】（可视范围）里面嵌套view -->
	<scroll-view class="content" scroll-y>
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</scroll-view>
	
	<!-- text 这个标签相当于span
	(没有其他样式影响的情况下，不会独占一行，宽和高由内容撑开，这个时候你设置宽高是没有用的)； -->
	<text>这是一个text标签</text>
</template>
 
<script>
	export default {
		data(){
			return {
				
			}
		}
	}
</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>

可以看出跟HTML文件基本上是一样的，也是三个语言分三块写，只不过少了一些标签，值得注意的是：

1、在HTML部分，需要用一个<template>标签包裹，相当于HTML里的<body>，然后vue2里只能有一个【最大】的<view>父容器，不能有同级别的；vue3无所谓。

2、script部分需要有export default { ... }来把vue导出，有他才可以在里面写vue代码

3、<style>部分如果在<style>里面加上scoped，设置的样式就不会受影响。该属性的作用是将当前标签下的样式私有化，仅对当前组件起作用，如果不设置，比如你全局样式的配置里配置了view标签，然后你在你某个页面没有用类名选择器，而是用view来直接设置样式，那么就会被受影响

4、有的人会写less或者是scss来代替css（我本人只会css），那么你需要在<style>里加入：lang="scss" 或者 lang="less"

四、组件

跟微信小程序基本一样，学过微信小程序原生开发的，这一块可以简单看一下略过

1、view和text

<view>约等于<div>，<text>约等于<span>

<view>就是div，只不过比它还多一些功能，下面我把它的特有属性放下面，简单看看有需要就用

比如：

那么鼠标悬浮的时候，就会获得.boxHover的样式变成橘色，同时一松开后0秒就恢复原样

<text>就是<span>啦，多的不说，他有这么几个属性，按自己需求可以在<text>标签里写上

那么这里的space有三个值：

自己看吧

2、scroll-view可滚动视图区域

<scroll-view>就是里面内容超出了容器的时候，容器可以有滚动条往左右或者上下划

具体属性有

具体例子：


<template>
	<!-- scroll-view：滚动效果  
					scroll-y 允许纵向滚动  
					scroll-x 允许横向滚动 
	注意“纵向”滚动盒子要有【高度】！！“横向”要有【宽度】（可视范围）里面嵌套view -->
	<scroll-view class="content" scroll-y>
		<view class="text-area">
			<text class="title">
                哈哈哈哈哈哈哈哈啊哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈啊哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈啊哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈
            </text>
		</view>
	</scroll-view>
</template>
 
<style>
	.content {
		height: 220px;
	}
 
	.text-area {
		display: flex;
		justify-content: center;
	}
 
	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>