遵循“开放是一种能力”的理念。
4.1 组件
目前支持的组件有以下7种：
- 视图容器：视图容器、可滚动视图容器、滑块视图容器。
- 基础内容：图标、文字、进度条
- 表单：按钮、表单、输入框、多项选择器、单项选择器、列表选择器、内嵌列表选择器、滚动选择器、开关选择器、标签
- 导航：页面跳转与应用链接
- 多媒体：音频、图片、视频。
- 地图：地图map。
- 画布：画布canvas。
- 客服会话：进入客服会话按钮。
目前，前端开发趋向于组件化开发，如twitter开源的Bootstrap框架支持下拉菜单、导航、分页、标签、警告框、进度条等组件。笔者总结了HTML5与小程序组件之间的区别：
视图容器view：盒模型的基础元素。小程序一般采用Flex布局
scroll-view类似于CSS语法中的overflow:scroll，规定了元素溢出容器时滚动条的显示。适合制作列表、瀑布流、横幅等模块。
swiper是滑块视图容器，可以滑动以切换swiper-item。可以制作幻灯片、焦点图等模块。
基础内容：
icon：一组微信风格的图标。
text：只支持text嵌套，不能在嵌套view标签。支持长按选中。
progress：展示进度条。
表单组件：from表单提供了众多组件。
导航：跳转到新页面（navigate）、在当前页打开（redirect）、切换Tab（switchTab）。属性见表
媒体组件：音频、图片和视频。
其他组件：地图map组件可以显示给定经纬度位置的地图，还可以显示标记点、线路、圆、控件。画布canvas组件可以在页面创建canvas，利用canvas丰富的功能作画。客服会话按钮组件在页面上显示一个客服会话按钮，用户点击该按钮后进入客服会话。
4.2 API
目前开放的API有以下8种：
- 网络：发起请求、上传、下载、WebSocket。
- 媒体：图片、录音、音频、视频
- 文件：保存文件、删除文件、打开文档。
- 数据缓存：存储数据、读取数据、删除数据、清除数据。
- 位置：获取位置、查看位置、地图组件控制。
- 设备：系统信息、网络状态、重力感应、罗盘、拨打电话、扫码。
- 界面：交互反馈、设置导航条、导航、动画、绘图、下拉刷新。
- 开放接口：登录、用户信息、微信支付、模板消息、客服消息、分享、获取二维码。
网络：类似HTML5中的Ajax请求。wx.request必须是HTTPS请求，而且不能指定端口（默认端口必须为80端口）。url的域名必须与管理后台设置的相同。
文件：wx.saveFile实现保存文件到本地。wx.downloadFile实现下载文件资源到本地，但文件的保存路径为临时路径。wx.openDocument可实现文档预览功能。
模板消息：通知或提醒。
4.3 Flex布局
在网页布局的技术史上有3种比较流行的方法：表格布局、盒式模型和Flex布局。
2000年之前，表格布局非常流行。该方法将网页上的各个模块设计成表格的单元格，各个模块的位置由单元格在表格中的位置决定，其大小由单元格的大小决定。每个模块或显示文字，或显示图片，共同组成方方正正的网页。这种方法的缺点是不易维护，在网页上新增一个模块就可能改变整个网页的布局，所以渐渐地淘汰了。
2000年之后，互联网发展迅速，网页需要呈现的信息越来越复杂，于是就出现了盒式模型。该方法利用div分离各个模块，由定位方式（position）、浮动方式（float）、外边距（margin）、内边距（padding）等确定位置，由宽度、高度确定大小。这种方法易于维护，至今仍大量应用。
2010年之后，移动互联网高速发展，各种上网设备层出不穷，这就要求网页布局能适应各种尺寸、类型的屏幕，于是出现了响应式布局。Flex布局就是流式响应式布局的方法。这种方法能够轻松完成页面元素的排列、对齐、换行，能够适配不同屏幕大小、不同显示设备，适用于移动端网页设计。
在Flex布局中，最外层的边框称为Flex容器（flex container）。所有子元素为容器成员，称为Flex项目（flex item）。
Flex概念解析：
介绍Flex布局的相关属性。
flex-direction属性：主轴方向
flex-wrap属性：项目在轴线上的换行，nowrap（不换行）、wrap（换行）
flex-flow属性：flex-direction属性和flex-wrap属性的组合
justify-content属性：项目在主轴上的对齐方式
align-items属性：项目在交叉轴，即垂直方向对齐的方式
align-content属性：修改了flex-wrap属性的行为。
扫一扫
1446
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
