创作第一个小程序Day1

一、项目的基本组成结构

1.其中app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、窗口外观、页面表现、底部tab等。默认情况下其中有4个配置项，他们的作用如下：

2.project.config.json文件是项目配置文件，用来记录对小程序开发工具所做的个性化配置：

 3.sitemap.json文件用来配置小程序页面是否允许微信索引。

4.页面的.json配置文件用来对本页面的窗口外观进行配置，页面中的配置项会覆盖app.json的window中的相同配置项。

二、view和scroll-view的基本用法

<!--pages/list/list.wxml-->
<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>

/* pages/list/list.wxss */
.container1 view{ 
  width:100px;
  height:100px;
  text-align: center;
  line-height: 100px;
}

.container1 view:nth-child(1){
  background-color: lightgreen;
}
.container1 view:nth-child(2){
  background-color: lightblue;
}
.container1 view:nth-child(3){
  background-color: lightyellow;
}

.container1 {
 border: 1px solid red;
 width: 100px;
 height: 120px;/* 纵向的要加一个强制性的高度*/
}

 三、swiper和swiper-item的基本用法

<!--pages/list/list.wxml-->
<!--轮播图的结构-->
<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="blue" autoplay interval="3000" circular>
<!--第一个轮播图-->
<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>

/* pages/list/list.wxss */
.swiper-container{ 
  height:150px;
}
.item{
  height:100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1) .item{
background-color:lightgreen ;
}
swiper-item:nth-child(2) .item{
background-color:lightblue ;
  }
swiper-item:nth-child(3) .item{
background-color:lightpink ;
    }

效果图为：

 其中组件的常用属性为：

 四、text和rich-text的基本用法

<!--pages/list/list.wxml-->
<view>
手机号支持长按选中结果
<text user-select>1212132132</text>
</view>

通过rich-text组件的nodes属性可以把html字符串渲染为对应的UI结构

<rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>

五、button的基本用法

<!--pages/list/list.wxml-->
<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<!---->
<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>

<!---->

<button size="mini" plain> 普通按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>

六、image的基本用法

首先我们先建立一个images文件夹，然后将照片直接拖进文件夹中。

在这里我们要注意的一点是一定要保证images文件夹和pages文件夹是同级的关系，否则将会报渲染层网络层的错误，如图所示是正确的存放路径

若是错误的路径，则是这样的错误

此时照片中出现了变形，我们可以用image组件的mode属性来指定图片的裁剪和缩放模式

七、小程序中三大API的分类