Dcloud 全栈之旅1-1 组件-基础

uni app 组件入门

适合对象：对 java script css html 和官方框架有一定了解的小伙伴

梦想做一个让小盆友到老盆友都能秒懂的免费教程，带领小伙伴从最基础开始走上全栈之路，一个人开发前后端一体app。祖国新基建数字化建设战略的基础是代码,房子建筑修得够多了 ,打卡网红地偶尔偶尔就行了。

解决的痛点：首先官方的文档很长很专业如同连续剧，官方是标杆是权威。非常感谢官方的贡献功德无量。但是现在的生活节奏太快各种杂事太多，人们学习很零散，特别对不是做这行但也想学习的小伙伴带来了学习的门槛和成本。

解决方案：本教程主要用樊登读书APP 讲解每本书精华思路大概框架的方法和类似抖音讲解电影的方法，来让基础小白先有一个大概认识有一个思路，快速了解避免蒙圈，并且用乐器考级的方式分成1到10级由浅入深，最后达到全栈的水平，这样更容易学习。因为作者自己才开始学的时候就蒙圈了几个月才慢慢有了思路，所以希望新入门的小伙伴们能通过这个教程事半功倍，提高效率。然后作者也想为社区做贡献尽一点绵薄之力！

我们学习要用的框架是国内目前最火的前后一体多段编译框架uni app 大家可以这里下载了解

https://www.dcloud.io/hbuilderx.html

框架进去以后新建目录后我们会发现界面有3个操作部分我们一一讲解先上代码

<!-- 1 这里面如同一个画布我们所有东西都放里面 -->
<template>比如 <text class="a"> hello word <text>
</template><!-- 2这里写所有逻辑比如点击一个按钮可以做什么 -->
<script>data() {return {
这里面写数据内容
};},methods: {
这个大括号里面写函数
}
};</script><!-- 3 这里面写所有样式 颜色 位置在哪里 -->
<style>
写法举例
.a{
width:100rpx；  这里是设置宽度100rpx
height:100rpx;  这里设置高度100rpx
}
</style>

先来看一个视频教学

uni app 入门指南

template 模板

所有界面什么轮播图你看到的按钮都必须写在 template里面，template必须用 <> </>这样包裹如同一个画板我们就在这里面画画，如同也清水房我们可以任意装修！

<template>如同一个画板 我们可以在里面画任何东西 大家看到的APP 界面里面的所有功能 都是在这里面实现
</template>

首先开发一个APP，用户看到的打开后的操作界面叫前端。前端由多个组件组成，那么什么叫组件，我们先来看一段代码

1 image 图片组件

我们只需要在画板里面写上图片组件代码就可以加入图片在界面里看代码

<template><view style="background-color: #cfd0d3; height:2000rpx;">这里添加的图片组件image
<image src="../../static/logo.png" mode="heightFix"></image>这里是按钮button组件 以后可以做成购买按钮功能
<button style="width:450rpx;border-radius:20rpx;"type=" warn">购买 特斯拉</button></view></template>

手机效果

下面我们来解构下代码只要在模板里面写上image 组件，src是图片地址的意思写上地址就可以显示图片。图片可以放到编辑器里面也可以来自网络图片

2 button按钮组件

实现的基本效果就是一个按钮，比如点击登录比如够买确定的意思。当然这只是基础代码实现更细致功能还需要更多代码，但这是一个基础如同一个没有装修的房子-清水房

<template><view><button>马上抢</button>  <!-- 按钮功能 --><!-- 中间里写  -->加两个斜杠是注释意识 APP上线不会显示 帮助自己查看用的
</template>

手机效果

3 map地图组件

写上 <map></map> 就可以在界面生成地图

<template><view><button>马上抢 我是按钮</button><map></map> <!-- 生成地图布局 这里面可以添加自己想要功能 --></view>
</template>

手机效果

4 video视频组件

写上 <video></video> 就可以生成视频

<template><view><button>马上抢 我是按钮</button> <!-- 按钮功能 --><map></map>  <!-- 生成地图 --><video></video> <!-- 这是一个视频播放组件 --><!-- 这样写了以后就可以在界面生成一个视频 --><!-- 然后我们就可以添加视频 和功能样式 --></view>
</template>

手机效果

这样我们就可以在这个房间位置添加布置其他你想要的功能视频课程弹幕等等就是用这个基础功能开发的

小伙伴们可能会发现这太丑了也只是一个界面，对的，下个连载我们将会讲解怎么实现样式颜色形状布局的功能，后面连载将会讲解怎么实现逻辑方法，就是这个点击以后该做什么是与非

欢迎加QQ群免费学习沟通交流. 群号 982792631