微信小程序开发图解案例第3章课件.pptx

1、3.2 基础内容组件2.3 丰富的表单组件3.4 导航组件3.5 媒体组件3.6 地图组件3.7 画布组件3.8 沙场大练兵：表单登录注册微信小程序目录contents3.1 视图容器组件3.1.1view视图容器view视图容器是WXML界面布局的基础组件，它和HTML里的div功能类似，用来进行界面的布局。view视图容器也有自己的属性，如表所示。3.1.1view视图容器在WXML界面里使用view布局，渲染出界面内容，如图所示。3.1.2scroll-view可滚动视图区域scroll-view可滚动视图区域允许视图区域内容横向滚动或者纵向滚动，类似于浏览器横向滚动条和垂直滚动条的使用

2、。scroll-view拥有自己的属性和事件，如表所示。3.1.2scroll-view可滚动视图区域允 许 内 容 纵 向 滚 动 ， 需 要 给一个固定高度，可以绑定滚动到顶部/左边（bindscrolltoupper）、滚动到底部/右边（bindscrolltolower）、滚动时（bindscroll）触发的事件，也可以滚动到指定的id区域（scroll-into-view）。下面实现纵向滚动，如图所示。1纵向滚动3.1.2scroll-view可滚动视图区域在使用今日头条或腾讯新闻时，在新闻列表的上方都会有新闻频道供我们单击，可以向左滑动和向右滑动来查看相应类别的新闻，可以采用scr

3、oll-view来实现这些新闻频道的横向滚动，如图所示。2横向滚动3.1.3swiper滑块视图容器swiper滑块视图容器用来在指定区域内切换内容的显示，常用于制作海报轮播效果和页签内容的切换效果。它的属性如表所示。3.1.3swiper滑块视图容器海报轮播效果常用来展示商品图片信息或者广告信息，是很多网站或者App软件都会采用的一种布局方式，如图所示。1海报轮播效果3.1.3swiper滑块视图容器swiper滑块视图容器除了可以用来进行海报轮播效果的实现外，还可以进行页签切换效果的实现，常用于多种方式的登录或者多种类别的切换，如图所示。2.页签切换效果3.2 基础内容组件2.3 丰富的表

4、单组件3.4 导航组件3.5 媒体组件3.6 地图组件3.7 画布组件3.8 沙场大练兵：表单登录注册微信小程序目录contents3.1 视图容器组件3.2.1icon图标组件微信小程序提供了丰富的图标组件，应用于不同的场景，有成功、警告、提示、取消、下载等不同含义的图标，如图所示。icon图标组件有3个属性：图标的类型type、图标的大小size和图标的颜色color，如表所示。3.2.2text文本组件text文本组件支持转义符“”，如换行n、空格t， 组件内只支持 嵌套，除了文本节点，其他节点都无法长按选中。3.2.3 progress进度条Progress进度条组件是一种提高用户体验

5、度的组件，就像视频播放一样，可以通过进度条看到完整视频的长度、当前播放的进度，这样让用户能合理的安排自己的时间，提高用户的体验度，微信小程序也提供了progress进度条组件，它的属性如表所示。3.2 基础内容组件2.3 丰富的表单组件3.4 导航组件3.5 媒体组件3.6 地图组件3.7 画布组件3.8 沙场大练兵：表单登录注册微信小程序目录contents3.1 视图容器组件3.3.1button按钮button按钮组件提供3种类型的按钮：基本类型按钮、默认类型按钮和警告类型按钮，同时提供两种大小形状的按钮：默认和mini按钮，如图所示。3.3.1button按钮button按钮组件有很多

6、属性，每个属性有不同的作用，如表所示。3.3.2checkbox多项选择器checkbox多项选择器组件，也就是我们常说的复选框，用来进行多项选择的时候会用到checkbox多项选择器。它的属性如表所示。3.3.4input单行输入框input单行输入框用来输入单行文本内容，其属性如表所示。3.3.5textarea多行输入框textarea多行输入框是与input单行输入框对应的一个组件，它可以输入多行文本内容。它的属性如表所示。3.3.6 label改进表单可用性label组件没有定义for属性时，在label内包含、 、 这些组件，当单击label组件时，会触发label内包含的第一个控

7、件，假如在第一个位置，就会触发对应的事件，假如在第一位，就会触发radio对应的事件。1.label组件没有定义for属性3.3.6 label改进表单可用性label组件定义for属性后，它会根据for属性的值找到组件id一样的值，然后会触发这个组件的相应事件。2.label组件定义for属性3.3.7 picker滚动选择器picker滚动选择器，支持三种滚动选择器：普通选择器，时间选择器，日期选择器，默认是普通选择器，如图所示。3.3.8 slider滑动选择器slider滑动选择器组件，经常用来控制声音的大小、屏幕的亮度等场景的使用，它可以设置滑动步长、显示当前值以及设置最小值/最大值

8、，如右图所示。3.3.8 slider滑动选择器slider滑动选择器组件它的属性如下表所示。3.3.9switch开关选择器switch开关选择器应用得十分普遍，它有两个状态：开或者关，在很多场景都会用到开关这个功能，如微信设置里的“新消息提醒”界面，通过开关来设置是否接收消息、显示消息、是否有声音、是否震动等功能，如图所示。3.3.9switch开关选择器switch开关选择器它的属性可以设置为是否选中、开关类型、颜色以及绑定事件，如表所示。3.3.10form表单form表单组件用来将表单里组件的值提交给Java Script逻辑层进行处理，它可以提交 这些组件的值。提交表单的时候，会借

9、助于button组件的formType为submit的属性，将表单组件中的 value 值进行提交，需要在表单组件中加上name 来作为 key。form表单的属性如表所示。3.2 基础内容组件2.3 丰富的表单组件3.4 导航组件3.5 媒体组件3.6 地图组件3.7 画布组件3.8 沙场大练兵：表单登录注册微信小程序目录contents3.1 视图容器组件3.4.1 navigator页面链接组件navigator页面链接组件是用在WXML页面中跳转的导航，它有3种类型：第1种是保留当前页跳转，跳转后可以返回当前页，它与wx.navigateTo跳转效果是一样的；第2种是关闭当前页跳转，是

10、无法返回当前页，它与wx.redirectTo跳转效果是一样的；第3种是跳转到底部标签导航指定的页面，它与wx.switchTab跳转效果是一样的；navigator页面链接组件的这些跳转效果都是通过open-type属性来控制的，具体属性如表所示。3.4.2wx.navigateTo保留当前页跳转wx.navigateTo保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面，具体属性如表所示。3.4.3wx.redirectTo关闭当前页跳转wx.redirectTo关闭当前页面，跳转到应用内的某个页面，具体属性如表所示。3.4.4wx.switchTab

11、跳转到tabBar页面跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，具体属性如表所示。3.4.5wx.navigateBack返回上一页wx.navigateBack关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。具体属性如表所示。3.4.6设置导航条wx.setNavigationBarTitle(OBJECT)动态设置当前页面的标题。具体属性如表所示。3.2 基础内容组件2.3 丰富的表单组件3.4 导航组件3.5 媒体组件3.6 地图组件3.7 画布组件3.8 沙场大练兵：表单登录注册微信小程序目录

12、contents3.1 视图容器组件3.5.1audio音频audio音频组件需要有唯一的id，根据id使用wx.createAudioContext(myAudio)创建音频播放的环境，其中，src属性是音频播放的资源路径，poster属性是音频播放的图片，name属性为音频名称，还有绑定播放、暂停等事件，具体属性如表所示。3.5.1audio音频MediaError.code错误码如表所示。3.5.2image图片image图片组件有两类展现模式：一类是缩放模式，在缩放模式里又包括4种方式；另一类是裁剪模式，在裁剪模式里又包括9种方式，具体属性如表所示。3.5.2image图片通过mode

13、属性来设置4种缩放模式，如表所示。3.5.2image图片通过mode属性来设置9种裁剪模式，如表所示。3.5.3video视频video视频组件是用来播放视频的组件，这个组件可以控制是否显示默认播放控件（播放/暂停按钮、播放进度、时间），可以发送弹幕信息等功能，video组件的默认宽度为300px、高度为225px，设置宽高需要通过wxss设置width和height，具体属性如表所示。3.2 基础内容组件2.3 丰富的表单组件3.4 导航组件3.5 媒体组件3.6 地图组件3.7 画布组件3.8 沙场大练兵：表单登录注册微信小程序目录contents3.1 视图容器组件3.6 地图组件ma

14、p地图组件用来开发与地图有关的应用，如地图导航、打车软件、京东商城的订单轨迹都会用到地图组件。在地图上可以标记覆盖物以及指定一系列的坐标位置，如京东的仓库和客户的收货地址，如图所示。3.6 地图组件map地图组件具体属性如表所示。3.6 地图组件markers用于在地图上显示标记的位置，如表所示。3.6 地图组件polyline指定一系列坐标点，从数组第一项连线至最后一项，如表所示。3.6 地图组件circles在地图上显示圆，如表所示。3.6 地图组件controls在地图上显示控件，控件不随地图移动，如表所示。3.6 地图组件position控件的位置是相对地图的位置，如表所示。3.2 基

15、础内容组件2.3 丰富的表单组件3.4 导航组件3.5 媒体组件3.6 地图组件3.7 画布组件3.8 沙场大练兵：表单登录注册微信小程序目录contents3.1 视图容器组件3.7 画布组件canvas画布组件用来绘制正方形、圆形或者其他的形状，如图所示。canvas画布组件的默认宽度为300px、高度为225px，在使用的时候需要有唯一的标识。它有手指触摸动作开始、手指触摸后移动、手指触摸动作结束、手指触摸动作被打断等事件，具体属性如表所示。3.2 基础内容组件2.3 丰富的表单组件3.4 导航组件3.5 媒体组件3.6 地图组件3.7 画布组件3.8 沙场大练兵：表单登录注册微信小程序

16、目录contents3.1 视图容器组件沙场大练兵/微信小程序里有丰富的表单组件，可通过这些组件的使用，来完成京东登录界面、手机号注册界面、企业注册界面的注册微信小程序的设计，如图所示。表单登录注册微信小程序3.8.1登录设计在登录表单里，输入账号、密码进行登录，在账号、密码输入框里都有友好的提示信息；登录按钮默认是灰色不可用状态，只有输入内容后，变为可用状态；在按钮的下面提供手机快速注册、企业用户注册、找回密码链接；在最下面是微信、QQ第三方登录方式，如图所示。3.8 沙场大练兵：表单登录注册微信小程序2.9.2宫格导航设计3.8.2 手机号注册设计在手机号注册里，需要设计输入框用来输入手机号，设计同意注册协议以及下一步按钮，如图所示。3.8 沙场大练兵：表单登录注册微信小程序2.9.2宫格导航设计3.8.3 企业用户注册设计在企业用户注册里，有6个表单项：用户名、密码、企业全称、联系人姓名、手机号、短信验证码，有一个注册按钮和注册协议，如图3.71所示。3.8 沙场大练兵：表单登录注册微信小程序2.9.2宫格导航设计