第五章总结

双栏组件用来布局整体,它可以把一个区块分为两部分,操作时显示一个分隔的标志,便于操作,预览时则不会出现。双栏组件默认设置每个栏占50％总宽,也可以按实际需要调整比例。双栏里面可以添加基本的组件,从而达到整体的布局效果。双栏还可以嵌套双栏, 即可以在其中的一个栏里嵌入一个双栏,从而将整体分成３部分(若需要将整体分成４部分,就再嵌套一个双栏,依次类推)。双栏组件的属性面板如图所示。

2.面板组件

面板组件相当于一个大画板,用户可以将很多基本(甚至高级) 的组件(如文本组件、图片组件、按钮组件、标题组件、分类组件、音频组件、双栏组件、计数组件等) 放进面板组件里一起管理。面板组件的属性面板如图所示。

3.自由面板组件

自由面板组件是指放置在该面板内的组件可以自由拖动,调节组件大小。用户既可以向自由面板内拖入部分组件(包括文本组件、图片组件和按钮组件),也可以拖入任意相关容器组件,用于不规则布局。自由面板组件的属性面板如图所示。

4.顶部导航组件

顶部导航组件固定于页面顶部,用于编辑顶部的导航。常用的手机应用在顶部有一条导航,上面写有手机应用App的名称或logo,以及返回键等。

5.底部导航组件

底部导航组件固定于页面底部,用于编辑底部的导航。底部导航组件的属性面板设置如图所示。

通过底部导航组件可以添加标签、删除标签,同时可以分别设置每个标签的名称、原始图片、点击图片及链接至某一页面; 通过组件面板可以进行组件背景色、图片及文字的设置。

6.分割线组件

分割线组件被放置于任意组件之间,用于实现分割。分割线组件的属性面板如图所示。

7.动态分类组件

动态分类组件仅适用于电商、到店类小程序。用户通过选择动态分类组件的样式, 可以实现顶部分类、侧边栏分类来展示应用数据、商品数据等。动态分类的二级有图模式只适用于电商类小程序。动态分类组件的属性面板如图所示。

2.2基本组件

基本组件是小程序页面常用的组件,包括文本、图片、按钮、标题、轮播、分类、图片列表、图文集和视频,如图所示。

1.文本组件

文本组件用于展示文字、设置点击事件,是小程序页面中最常用的组件。文本组件的属性面板如图所示。

2.图片组件

图片组件用于在页面中展示图片, 其属性面板如图所示。

3.按钮组件

按钮组件用于在页面中设置按钮, 其属性面板如图所示。

4.标题组件

标题组件用于在页面中设置标题, 其属性面板如图所示。

5.轮播组件

轮播组件用于实现图片的轮播展示, 其属性面板如图所示。

单击“添加轮播分组” 按钮进入管理后台,然后单击“轮播管理”→ “新建分组” 选项可以创建轮播分组,如图所示。

分别填写“分组名称” 和“分组描述”, 单击“确定” 按钮进入如图所示的轮播管理界面。

单击“轮播项” 按钮, 进入如图所示的页面。

单击“添加轮播” 按钮, 在如图所示的页面进行轮播项的设置。

根据需要添加相应的轮播后, 轮播项界面如图所示。

单击图 (ａ) 中的“编辑” 按钮, 在图 (ｂ) 所示的绑定轮播分组中选定“banner” 轮播分组, 单击“预览” 按钮, 将出现预览效果, 如图 (ｃ) 所示。

6.分类组件

分类组件可以设置不同内容展示在不同类别中, 还可以添加、删除分类的个数及进行相应的设置。分类组件的属性面板如图所示。

7.图片列表组件

图片列表组件可以将图片以列表的形式展示, 还可以设置图片的名称、标题和点击事件。图片列表组件的属性面板如图所示。

8.图文集组件

图文集组件用于展示图片、标题和简介, 其属性面板如图所示。

9.视频组件

视频组件用于展示视频, 其属性面板如图所示。

视频组件提供网页应用、小程序和云服务３种视频来源。网页应用使用视频通用代码来确定视频来源。

2.3高级组件

高级组件通常需要后台数据, 通过设置后台数据来实现数据后台化, 让小程序的数据随时更新, 及时修改, 如图所示。下面介绍其中的几种常用组件。

1.动态列表组件

动态列表组件是容纳基础组件来展示后台数据的容器, 通过添加基础组件来展示对应的后台数据, 其属性面板如图所示。

要使用动态列表组件, 必须在后台进行数据管理, 单击“管理对象” 按钮, 进入管理后台, 如图所示。

单击“新增数据对象” 按钮, 进入“数据对象列表” 页面, 如图所示。

单击“添加字段” 按钮, 添加相应字段, 如图所示。

单击“保存” 按钮并返回, 进入“对象管理” 页面, 如图所示。

单击“数据管理” 按钮, 进入“数据管理” 页面, 如图所示。

单击“ ＋添加数据” 按钮新建数据, 进入“添加数据” 页面, 如图所示。

添加相应数据并保存, 继续添加所需数据, “数据管理” 页面如图所示。

在动态列表属性面板的绑定数据对象中选择“羽绒服” 数据对象, 同时图片组件绑定数据对象样式字段, 文本组件分别绑定数据对象的名称和价格字段。

2.个人中心组件

个人中心组件显示个人相关信息的组件, 包括图像、昵称、我的订单、收货地址、购物车等, 如图所示。

个人中心组件的属性面板如图所示。

3.动态表单组件

动态表单组件相当于HTML中的<form> 标签, 是一个容器组件, 可以添加子表单组件和基本组件, 用来收集用户提交的相关信息给后台数据对象。动态表单组件的属性面板如图所示。

在编辑页面, 添加相应的动态表单子组件(如“评分”), 如图所示。

单击如图所示属性面板中的“管理对象” 按钮,添加数据对象列表, 如图所示。

前端提交相关数据, 可以通过后台进行查看并统计, 如图所示。

4.评论组件

评论组件提供信息发布或回复信息的组件, 评论组件的属性面板如图所示。

5.计数组件

计数组件可以用于点赞、统计浏览量等类似的计数功能。计数组件的属性面板如图所示。

6.地图组件

地图组件用于显示指定地址的地图, 常用于实现定位及导航功能, 地图组件的属性面板如图所示。

7.城市定位组件

城市定位组件通常与列表类组件搭配使用, 常见搭配有动态列表和商品列表。例如, 城市定位组件与商品列表搭配, 可以实现通过城市定位来搜索出某具体位置信息下的商品列表。

城市定位组件的属性面板如图所示。

8.悬浮窗组件

悬浮窗组件的固定搭配有: 客服、我的订单、购物车、回到顶部。悬浮窗组件通常出现在个人中心或商品列表页面, 其属性面板如图所示。

2.4其他组件

其他组件包括音频组件和动态容器组件

1.音频组件

音频组件用于播放音乐(每个页面有一个音频组件即可), 手动点击播放按钮后即可实现播放。音频文件可以选择音频库中的音乐, 也可以上传本地音频进行更换, 音频组件的属性面板如图所示。

2.动态容器组件
动态容器组件用于动态页面, 即所在页面绑定了数据对象。动态容器组件中可以添加多种组件———文本组件、图片组件、按钮组件、标题组件、分类组件、音频组件、双栏组件、计数组件。其中, 文本组件和图片组件可以绑定相应的数据对象字段(填充相应动态数据), 若有计数组件, 则会自动与动态容器关联。动态容器组件的属性面板如图所示。