[学习笔记]微信小程序开发

一个小程序的文件结构：

一个小程序的一个页面的文件结构：

下面对各个文件进行分析：
.json：配置文件，
app.json，包括了小程序的所有页面路径、窗口外观、界面表现、底部tab等
sitemap.json，可以允许哪些页面被检索
project.config.json，对开发者工具的配置，类似于.vscode里的.json

新建页面：在app.json中的pages对象进行修改，新增一个路径即会新建一个页面

WXML：微信中的标签语言，类似于html
WXSS：类似于css
.js：响应用户的操作

view组件：实现横向轮播

view 组件的基本使用：

/* pages/list/list.wxss */

/* set the format of view */
.container1 view {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

/* set the background color of every view */
.container1 view:nth-child(1){
  background-color: lightgreen;
}
.container1 view:nth-child(2){
  background-color: rgb(144, 146, 238);
}
.container1 view:nth-child(3){
  background-color: rgb(00, 102, 255);
}

/* 改变布局 */
.container1 {
  display: flex;
  justify-content: space-around;
}

view-scrool：实现滚屏
注意：第一个小坑，scroll里有多个属性值，需要滚动的话必须把scroll-y或scroll-x人为确定为true

<!--pages/list/list.wxml-->
<text>pages/list/list.wxml</text>


<scroll-view class="container1" scroll-y="true">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

/* pages/list/list.wxss */

/* set the format of view */
.container1 view {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

/* set the background color of every view */
.container1 view:nth-child(1){
  background-color: lightgreen;
}
.container1 view:nth-child(2){
  background-color: rgb(144, 146, 238);
}
.container1 view:nth-child(3){
  background-color: rgb(00, 102, 255);
}

/* 改变布局 */
.container1 {
  display: flex;
  justify-content: space-around;
}

.container1 {
  border: 1px solid red;
  width: 100px;
  height: 120px;
}

swiper：轮播屏

.swiper-container{
  height: 150px;
}

.item{
  height:100%;
  line-height: 150px;
  text-align: center;
}

swiper-item:nth-child(1) .item{/*tmd这个.前面必须有个空格我吐了*/
  background-color: lightgreen;
}

swiper-item:nth-child(2) .item{
  background-color: lightskyblue;
}
swiper-item:nth-child(3) .item{
  background-color: lightpink;
}