微信小程序的启动和渲染过程(加组件分类和组件的基本使用以及API分类)_微信小程序 自定义组件在请求前渲染

导航路线

关于微信小程序知识点一共做了六个博客,涵盖大部分内容,有想学习的可以按照以下顺序查看
1.微信小程序的启动和渲染过程(加组件分类和组件的基本使用以及API分类)
2.微信小程序wxml的数据和事件的绑定,以及条件和列表的渲染
3.微信小程序wxss相关介绍、全局配置和tabbar知识以及发送网络数据请求(post,get)
4.微信小程序页面导航、编程式导航、页面事件、生命周期和WXS脚本
5.微信小程序自定义组件、组件的生命周期和组件通信(插槽)
6.微信小程序使用npm包、全局数据共享和分包

小程序的启动过程

1. 把小程序的代码包下载到本地
2. 解析app.json全局配置文件
3. 执行app.js小程序入口文件,调用App()创建小程序实例
4. 渲染小程序首页
5. 小程序启动完成

小程序页面渲染的过程

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

小程序中组件的分类有九大类

• 视图容器
• 基础内容
• 表单组件
• 导航组件
• 媒体组件
• map地图组件
• canvas画布组件
• 开放能力
• 无障碍访问
  上面加粗的为常用的

常用的视图容器类组件

1. view
   • 普通视图区域
   • 类似于html中的div,是一个块级元素
   • 常用来实现页面的布局效果
2. scroll-view
   • 可滚动的视图区域
   • 常用来实现滚动列表效果

下列分别为wxml和wxss的代码,可用于查看效果

<scroll-view class="container1" scroll-y>
  <view>a</view>
  <view>b</view>
  <view>c</view>
</scroll-view>
1
2
3
4
5

.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  background-color: pink;
}
.container1 view:nth-child(1){
  background-color:green;
}
.container1 view:nth-child(2){
  background-color: lightskyblue;
}
.container1 view:nth-child(3){
  background-color: lightpink;
}
.container1{
  border: 1px solid red;
  width: 100px;
  height: 120px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

3. swiper和swiper-item
   • 轮播图容器组件和轮播图item组件

下列分别为wxml和wxss的代码,可用于查看效果

<swiper>
  <swiper-item class="swiper-container">  
    <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>
1
2
3
4
5
6
7
8
9
10
11

.swiper-container{
  height: 150px;
}
.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1) .item{
  background-color: pink;
}
swiper-item:nth-child(2) .item{
  background-color: green;
}
swiper-item:nth-child(3) .item{
  background-color: orange;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

swiper组件常用属性

使用如下,这里就演示了两个属性,各位没事干的可以挨个测试一下,wxss代码和上面一样

<swiper indicator-dots indicator-color="white">
  <swiper-item class="swiper-container">  
    <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>
1
2
3
4
5
6
7
8
9
10
11

4. text
   • 文本组件
   • 类似于HTML中的span标签
     text组件可以通过selectable属性,实现长按选中文本内容的效果

<view>
	手机号支持长按选中效果
	<text selectable>13800005056</text>
</view>
1
2
3
4

效果图:(这个效果在开发者工具模拟器实现不了,可以通过手机真机实现)

5. rich-text
   • 富文本组件
   • 支持把HTML字符串渲染为WXML结构
     通过rich-text组件的nodes属性节点,把HTML字符串渲染为对应的UI结构:

应用场景:商品详情页的结构渲染

<rich-text nodes="<h2 style='color:red;'>这是标题</h2>"/>
1

6. button
   • 按钮组件
   • 功能比HTML中的button按钮丰富
   • 通过open-type属性可以调用微信提供的各种功能(客服,转发,获取用户授权,获取用户信息等)
     以下是小程序按钮的种类

<button>普通按钮</button>
<!-- 通过type属性指定按钮的颜色和类型 -->
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<!-- size="mini" 小尺寸按钮-->
<button size="mini">普通小尺寸按钮</button>
<button type="primary" size="mini">主色调小尺寸按钮</button>
<button type="warn" size="mini">警告小尺寸按钮</button>
<!-- plain 镂空按钮 -->
<button size="mini" plain>普通小尺寸镂空按钮</button>
<button type="primary" size="mini" plain>主色调小尺寸镂空按钮</button>
<button type="warn" size="mini" plain>警告小尺寸镂空按钮</button>
1
2
3
4
5
6
7
8
9
10
11
12

效果图:

7. image
   • 图片组件
   • image组件默认宽度约300px,高度约为240px(给了标签不引入图片也会占位)

<image src="" mode=""/>
<image src="/img/1.jpg" mode=""/>
1
2

效果图:

image组件的mode属性用来指定图片的裁剪和缩放模式,常用的mode属性如下

8. navigator
   • 页面导航组件
   • 类似于HTML中的a链接

小程序宿主环境-API

小程序官方把API分为了如下三大类

1. 事件监听API
   • 特点: 以on开头,用来监听某些事件的触发
   • 举例: wx.onWindowResize(function callback) 监听窗口尺寸变化的事件
2. 同步API
   • 特点一: 以Sync结尾的API都是同步API
   • 特点二: 同步API的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常
   • 举例: wx.setStorageSync(‘key’,‘value’) 向本地存储中写入内容
3. 异步API
   • 特点: 类似于jQuery中的$.ajax(options)函数,需要通过success、fail、complete接收调用的结果
   • 举例: wx.request() 发起网络请求,通过success回调函数接收数据