前言：小程序学习笔记，课程来源up主咸虾米_。仅记录笔记，大家想学习可以去关注他。
1.已安装HBuider X（目前是4.36版本），微信开发者工具（但还没注册小程序码），相关配置OK了。
1.16 相关架构学习
1.pages-index-index.vue
<template> <!--模板区 不使用div,在组件的内置组件用那些标签--><view class="layout"><view class="box1">box1</view><view class="box2">box2</view></view>
</template> <!--这个必须放，view 可以放多个节点,vue2的话要包一个 布局是一样的class--><script setup></script>
<!-- 这是逻辑部分，vue2是选项式api，vue3是组合式api--><style lang="scss">.layout{border:1px solid red;.box1{border:1px solid green;}.box2{border:1px solid blue;}}
</style>
<!--这里写一些css的样式。border 像素 solid 实线，layout是最外层，有两个子元素-->
2.建立新页面
路由配置
{"pages": [ {"path": "pages/index/index","style": { ... }}, {"path": "pages/login/login","style": { ... }}]
}<!--JSON对象，包含多个页面对象数组，每个页面对象定义了页面路径和样式设置 -->组件-内置组件- 视图容器-view
所有的视图组件，包括view、swiper等，本身不显示任何可视化元素。它们的用途都是为了包裹其他真正显示的组件。
#view
属性名 类型 默认值 说明 hover-class String none 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 hover-stop-propagation Boolean false 指定是否阻止本节点的祖先节点出现点击态，App、H5、支付宝小程序、百度小程序不支持（支付宝小程序、百度小程序文档中都有此属性，实测未支持） hover-start-time Number 50 按住后多久出现点击态，单位毫秒 hover-stay-time Number 400 手指松开后点击态保留时间，单位毫秒
案例：冒泡and冒泡拦截<template> <!--模板区 不使用div,在组件的内置组件用那些标签--><view class="box" hover-class="boxHover" hover-start-time="120"><view class="inner" hover-class="innerHover" hover-stop-propagation>内部元素</view></view><!-- 可以view.box回车快捷键，view回车以及.box回车都有一些自动补全效果 --> </template> <!--这个必须放，view 可以放多个节点,vue2的话要包一个 布局是一样的class--><script setup></script> <!-- 这是逻辑部分，vue2是选项式api，vue3是组合式api--><!--这里写一些css的样式。border 像素 solid 实线，layout是最外层，有两个子元素--> <style lang="scss"> .box{width: 200px;height:200px;background: #ccc; } .boxHover{background: orange;width: 300px; } .inner{width: 100px;height: 100px;background: green; } .innerHover{background: greenyellow; } </style>
组件-内置组件-视图容器 -scroll-view
可滚动视图区域。用于区域滚动。
属性名 类型 默认值 说明 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许纵向滚动 案例：横向滑动
条件1：scroll-x，条件2：子元素设置行级块样式，条件3：父级设置不换行
<template> <view>----</view><scroll-view scroll-x class="scrollView"><view class="box">scroll子元素</view><view class="box">scroll子元素</view><view class="box">scroll子元素</view><view class="box">scroll子元素</view><view class="box">scroll子元素</view><view class="box">scroll子元素</view><view class="box">scroll子元素</view><view class="box">scroll子元素</view><view class="box">scroll子元素</view><view class="box">scroll子元素</view><view class="box">scroll子元素</view><view class="box">scroll子元素</view><view class="box">scroll子元素</view></scroll-view> </template><script setup></script><style lang="scss"> .scrollView{width: 80%;height: 220px;border: 1px solid red;white-space: nowrap;.box{width: 100px;height: 100px;background: green;display: inline-block;margin: 5px;} }</style>贴个链接：scroll-view | uni-app官网
组件-内置组件-基础内容- text
text组件
文本组件。用于包裹文本内容。
在app-uvue和app-nvue中，文本只能写在text中，而不能写在view的text区域。
虽然app-uvue中写在view的text区域的文字，也会被编译器自动包裹一层text组件，看起来也可以使用。但这样会造成无法修改该text文字的样式
字的可选
空格
<template> <!--模板区 不使用div,在组件的内置组件用那些标签--><view>----</view><text selectable>text文本标签</text> <!--支持拷贝 微信开发工具要长按--><text space="emsp">可以加不同 字符空格</text> </template> <!--这个必须放，view 可以放多个节点,vue2的话要包一个 布局是一样的class--><script setup></script> <!-- 这是逻辑部分，vue2是选项式api，vue3是组合式api--><!--这里写一些css的样式。border 像素 solid 实线，layout是最外层，有两个子元素--> <style lang="scss"></style>
