第一章小程序入门-Toy模板网

这篇具有很好参考价值的文章主要介绍了第一章小程序入门。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

一、❎ 环境搭建

1、AppID

第一章小程序入门

2、设置外观和代理

第一章小程序入门

3、小程序项目构成

小程序的基本结构

第一章小程序入门

小程序的页面组成部分

第一章小程序入门

4、JSON 配置文件

JSON 配置文件的作用

第一章小程序入门

app.json 配置文件

第一章小程序入门

project.config.json 配置文件

第一章小程序入门

sitemap.json 配置文件

第一章小程序入门

页面 .json 配置文件

第一章小程序入门

5、WXML 模板

什么是 wxml

第一章小程序入门

wxml 和 html 的区别

第一章小程序入门

6、WXSS 样式

什么是 wxss

第一章小程序入门

wxss 和 css 的区别

第一章小程序入门

7、小程序中的 JS

第一章小程序入门

8、小程序宿主环境

第一章小程序入门

通信模型

第一章小程序入门

小程序的启动过程

第一章小程序入门

页面渲染过程

第一章小程序入门

二、🛂 组件

1、小程序组件的分类

第一章小程序入门

2、视图容器类组件

第一章小程序入门

3、view 组件实现横向分散布局

第一章小程序入门

<!--pages/list/list.wxml-->
<view class="list">
  <view>
    A
  </view>
  <view>
    B
  </view>

  <view>
    C
  </view>
</view>

/* pages/list/list.wxss */

.list{
  /* 设置弹性布局 */
  display: flex;
  /* 设置横向分散布局 */
  justify-content: space-around;
  /* 很诡异，margin-top有时会失效 */
  margin-top: 30rpx;
}

.list view{
  width: 200rpx;
  height: 200rpx;
  text-align: center;
  /* 设置文字行高 */
  line-height: 200rpx;
  
}


/* 设置子元素的背景颜色 */
.list view:nth-child(1){
  background-color: teal;
}

.list view:nth-child(2){
  background-color: rgb(57, 24, 150);
}


.list view:nth-child(3){
  background-color: rgb(189, 236, 236);
}

4、scroll-view 组件实现侧边栏

第一章小程序入门

<!--pages/list/list.wxml-->
<!-- scroll-y 允许纵向滚动 -x 允许横向滚动 -->
<!-- 注意：使用竖向滚动时必须给 scroll-view 一个固定高度-->
<scroll-view class="list" scroll-y>
  <view>
    A
  </view>
  <view>
    B
  </view>

  <view>
    C
  </view>
</scroll-view>

/* pages/list/list.wxss */

.list{
  /* 给一个边框方便显示容器 */
  border: 1rpx solid red;
  /* 调整容器宽度 */
  width: 200rpx;
  /* scroll-view 一个固定高度 */
  height: 230rpx;
  margin-top: 30rpx;
}

.list view{
  width: 200rpx;
  height: 200rpx;
  text-align: center;
  /* 设置文字行高 */
  line-height: 200rpx;
  
}


/* 设置子元素的背景颜色 */
.list view:nth-child(1){
  background-color: teal;
}

.list view:nth-child(2){
  background-color: rgb(57, 24, 150);
}


.list view:nth-child(3){
  background-color: rgb(189, 236, 236);
}

5、swiper 组件实现轮播图及常用属性

第一章小程序入门

<!-- 轮播图的结构 -->
<swiper class="swiper-container">

<!-- 第一个轮播图 -->
  <swiper-item>
    <view class="item">
      A
    </view>
  </swiper-item>

<!-- 第二个轮播图 -->
  <swiper-item>
    <view class="item">
      B
    </view>
  </swiper-item>

<!-- 第三个轮播图 -->
  <swiper-item>
    <view class="item">
      C
    </view>
  </swiper-item>
</swiper>

.swiper-container{
  margin-top: 30rpx;
}
.swiper-container swiper-item view{
  text-align: center;
  line-height:300rpx;
}

swiper-item:nth-child(1) .item {
  background-color: teal;
}

swiper-item:nth-child(2) .item {
  background-color: rgb(68, 192, 43);
}

swiper-item:nth-child(3) .item {
  background-color: rgb(145, 50, 168);
}