小程序项目组件的基本应用

宿主环境：程序运行必须依赖的环境

小程序的宿主环境 ---->手机微信(定位、扫码、支付等)

小程序的通信模型：

•  渲染层和逻辑层之间的通信(微信客户端转发)
• 逻辑层和第三方服务器之间的通信(微信客户端转发)

小程序的运行机制：

   启动：

1. 下载代码包
2. 解析app.json全局配置文件
3. 执行app.js入口文件
4. 渲染页面
5. 启动完成

   渲染：

1. 加载 .json配置文件
2. 加载 .xml模板 .wxss样式
3. 执行.js文件,调用page创建页面实例
4. 渲染完成

小程序的组件

        视图容器、基础内容、表单组件、导航组件、媒体组件、map地图组件、canvas画布组件、开放能力、无障碍访问

视图容器: 

         view(布局)，scroll-view(滚动)，swiper和swiper-item(轮播图)

 实现页面的横向布局

1.编写页面

A
B
C

 2.编写样式

.a view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.a view:nth-child(1){
  background-color: lightblue;
}
.a view:nth-child(2){
  background-color: orangered;
}
.a view:nth-child(3){
  background-color: indigo;
}
.a {
  display: flex;
  justify-content: space-between;
}

 3.查看效果

 

实现页面的滚动效果：scroll-view

1.在上面横向布局的基础上实现

A
B
C

.a {
  border: 1px solid red;
  height: 200px;
  width: 50px;
  display: flex;
  justify-content: space-between;
}

2.布局可以进行滚动，需要给我给定固定的宽度和高度 

实现页面的轮播图效果：swiper和swiper-item

1.编写页面

第一个页面
 


第二个页面
 


第三个页面
 

2.编写样式

.s{
  height: 150px;
}
.item{
  width: 100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1){
  background-color: lawngreen;
}
swiper-item:nth-child(2){
  background-color: rosybrown;
}
swiper-item:nth-child(3){
  background-color: aqua;
}

3.查看效果

 

 4.轮播图的常用属性

        indicator-dots="true"                   显示面板指示点

        indicator-color="white"                指示点颜色

        indicator-active-color="yellow"     当前选中指示点颜色

        autoplay                                    自动切换

        interval="3000                            切换的时间间隔，毫秒

        " circular="true"                          采用链接滑动