微信小程序的启动和渲染过程(加组件分类和组件的基本使用以及API分类)

文章目录

导航路线
- 小程序的启动过程
- 小程序页面渲染的过程
- 小程序中组件的分类有九大类
- 常用的视图容器类组件
- 小程序宿主环境-API

导航路线

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

小程序的启动过程

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

小程序页面渲染的过程

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

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

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

常用的视图容器类组件

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

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

<scroll-view class="container1" scroll-y><view>a</view><view>b</view><view>c</view>
</scroll-view>

.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;
}

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>

.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;
}

swiper组件常用属性

属性	类型	默认值	说明
indicator-dots	boolean	false	是否显示面板指示点
indicator-color	color	rgba(0,0,0,.3)	指示点颜色
indicator-active-color	color	#000000	当前选中的指示点颜色
autoplay	boolean	false	是否自动切换
interval	number	5000	自动切换时间间隔
indicator-dots	boolean	false	是否采用衔接滑动

使用如下,这里就演示了两个属性,各位没事干的可以挨个测试一下,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>

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

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

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

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

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

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

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>

效果图:

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

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

效果图:

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

mode值	说明
scaleToFill	(默认值)缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满image元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。(简单来说就是图片填充满整个image为止)
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

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

小程序宿主环境-API

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

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

微信小程序的启动和渲染过程(加组件分类和组件的基本使用以及API分类)相关推荐

微信小程序设置启动页面
微信小程序设置启动页面微信小程序运行成功需要跳转到启动页面: 微信小程序跳转启动页面主要有两种方法: 1.通过配置全局文件page.json进行配置在app.json文件中,pages数组,设置在 ...
php微信小程序向下滑动,微信小程序功能实现：上滑加载下拉刷新
本篇文章给大家带来的内容是关于微信小程序功能实现:上滑加载下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介 ...
17_微信小程序之抖音微视无限滑动视频列表自定义组件编写
微信小程序之抖音微视无限滑动视频列表自定义组件编写一.先上效果图看到上面,你可能首先会想到,使用swiper然后将swiper的circular设置为true,那么,想象一下,假如视频很多的情况下 ...
微信小程序开发之scroll-view上拉加载数据实现
微信小程序开发之scroll-view上拉加载数据实现一.开发思路 1.使用小程序的scroll-view组件中提供了一个bindscrolltolower属性监听组件的滑动到了底部 https:/ ...
[Web] [微信小程序-云开发] 商城无服务器加后台管理
[Web] [微信小程序-云开发] 商城无服务器加后台管理说明: 目前云开发仅针对认证后的公众号使用(每年300的费用那个) wxapp-mall-clouddb 前言如何使用更多说明功能 ...
微信小程序、uni-app使用iconfont-tools将iconfont彩色字体图标组件化并使用
微信小程序.uni-app使用iconfont-tools将iconfont彩色字体图标组件化并使用安装iconfont-tools npm i -g iconfont-tools 全局安装工具下 ...
微信小程序性能测试——启动性能专项测试
微信小程序性能测试主要可以分为两个方面,启动性能和运行时的性能. 其中小程序启动是用户体验中极为重要的一环,启动耗时过长会直接造成小程序用户流失,影响用户体验.一般来说用户等待时间超过3秒,用 ...
微信小程序-设置启动页面
2019独角兽企业重金招聘Python工程师标准>>> 在开发微信小程序的时候,除了tabBar上设置的页面之外,想进入肯定要走跳转之类的进入,但是我们开发的时候肯定想要直接看到该页 ...
微信小程序答题页——swiper渲染优化及swiper分页实现
前言 swiper的加载太多问题,网上资料好像没有一个特别明确的,就拿这个答题页,来讲讲我的解决方案这里实现了如下功能和细节: 保证swiper-item的数量固定,加载大量数据时,大大优化渲染效率 ...