3.1.2 制作过程
小程序制作分为四个方面:创建小程序、页面制作、数据制作和服务制作。
1、创建小程序
在“2.1.1 创建小程序”一节中,介绍了在“我的市场”中通过应用模版创建小程序的过程。其实小程序还可以在“我的制作”中创建。在制作中心左侧的功能树上,选择“我的制作”→“小程序/ APP /公众号”菜单命令,打开“牛刀云-小程序/ APP /公众号”页面,如图3-5所示。单击“创建小程序”图片,打开“选择模版”对话框。
图3-5 我的制作-小程序
在“选择模版”对话框中可以选择一个应用模版创建小程序,也可以选择“空白模版”创建空白应用,如图3-6所示。将鼠标滑动到空白模版的上方,出现两个按钮,单击“使用”按钮,打开“创建小程序”对话框,输入“项目名称”和“项目标识”,单击“确定”按钮创建小程序。
图3-6 空白模版
刚刚创建的小程序显示在“创建小程序”图片的右侧。将鼠标滑动到新建的小程序上,会显示出3个按钮,如图3-7所示,它们的作用是:
l “制作”按钮:进入制作台,制作小程序
l “设置”按钮:修改项目名称、设置小程序封面
l “删除”按钮:删除小程序
图3-7 新建的小程序
单击“制作”按钮,打开“制作台”页面。在制作台中可以进行页面制作、数据制作和服务制作。
2、页面制作
在制作台的“页面”制作区,通过拖拽组件的方式进行页面制作,定义小程序的前端展现,具体过程如下:
(1)制作页面
通过添加组件,设置组件的属性和样式,在组件的事件中调用组件的操作,完成页面的制作。
l 页面结构
页面是由组件构成的,组件的层叠摆放形成了页面的树形结构。每个页面里面有且只有一个页面组件,作为页面树形结构的根节点。展现组件依据显示效果,在页面组件下形成特定的层次。数据组件、服务组件和功能组件不具备层次,为了避免界面散乱,它们都放在“数据|服务|功能组件容器”(界面中的黄色小图标)中。
l 添加组件
添加组件有两种方法:一是单击“组件栏”中的组件,松开鼠标左键,然后再单击组件要放置的位置。注意不需要进行拖曳操作;二是先单击组件要放置的位置,即选择组件的父组件,再在“组件栏”中双击要添加的组件,组件就会被添加到父组件中。如果要改变组件的位置,可以通过鼠标拖曳组件实现。
添加组件之后,就可以设置组件的属性、样式和事件。方法是在“页面设计器”中,选择某个组件,即可在“属性编辑器”中编辑该组件的属性、样式和事件。
(2)新建页面
创建空白应用后,应用中有一个默认的页面——主页,这个页面就是小程序运行时的主页。根据小程序的复杂程度,还可以创建新的页面。
新建页面有两种方法,一种是在分组上新建页面,另一种是添加页面时选择分组。这说明页面都是属于某个分组的。例如“主页”在“默认”分组下,在“默认”分组的右侧有一个“新建页面”按钮,单击这个按钮就可以在“默认”分组下新建页面。
(2)预览页面
虽然页面设计器是所见即所得的,但是对于显示动态数据、调用服务等功能还是需要运行来查看效果的。预览页面的方法是单击制作台右上角的“预览”按钮,打开“预览”页面。左边显示页面列表,可以单击某个页面,只预览这个页面的效果;也可以单击主页,预览从主页开始运行的完整效果。
3、数据制作
(1)添加数据集
在制作台的“数据”制作区,通过添加数据集、给数据集添加列的方式进行数据制作,定义小程序的后端数据,
(2)在页面中访问数据集
在“数据”制作区添加数据集后,在“页面”制作区的数据栏中,会显示出新添加的数据集。这里显示的数据集就是数据组件,包括获取数据和保存的能力。添加到页面后,页面即可访问这个数据集。
4、服务制作
(1)添加服务
在制作台的“服务”制作区,通过画代码实现服务逻辑的方式进行服务制作,定义小程序的后端服务,
(2)在页面中发送服务请求
在“服务”制作区添加服务后,在“页面”制作区的服务栏中,会显示出新添加的服务。这里显示的服务就是服务组件,包括发送服务请求和获取返回值的能力。添加到页面后,页面即可访问这个服务。