首页 >> 牛刀云小程序开发教程 >> 第1篇 制作模式 >> 基础制作 >> 制作概述

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)在页面中发送服务请求

         在“服务”制作区添加服务后,在“页面”制作区的服务栏中,会显示出新添加的服务。这里显示的服务就是服务组件,包括发送服务请求和获取返回值的能力。添加到页面后,页面即可访问这个服务。