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

3.1.1 制作原理

微信小程序是依托微信作为平台运行的程序,它主要由HTML代码构成。得益于微信提供的API,它拥有比普通Web应用更多的权限,能够实现类似App的功能。微信小程序不使用传统的HTML标签,而是创建了新的标签,但是它仍然是Web应用。从构成上分为前端和后端,如图3-1所示。

3-1  小程序构成

1. 前端

前端是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。

1)页面

    一个页面由描述WXML、代码JS、样式WCSS三部分构成。在页面中即可以调用服务,实现访问数据库等动态能力;又可以调用微信API,使用微信提供的能力,如获取用户信息,本地存储,支付功能等。牛刀云将小程序提供的组件和API封装成更好用的组件,因此页面的描述部分由多个组件构成。

 

2)组件

    组件是将小程序标签和API进行封装,实现更强能力的可视化对象。组件有属性、事件、方法、操作和样式等。

    一个页面分为数据、展现和功能3个部分,组件也对应分为数据服务组件、展现组件和功能组件(如图3-2)。使用数据组件存储页面中的数据;使用展现组件将页面展现出来。数据组件和展现组件使用双向数据绑定(Two-Way Data Binding)。数据源或绑定目标对象的属性的值发生改变时会互相通知,也就是界面的操作能实时反映到数据,数据的变更能实时展现到界面。

3-2  组件分类

 

2. 后端

后端包括数据库,以及与数据库进行交互处理相应业务逻辑的服务。

1)数据

数据是具有一定意义的文字、字母、数字符号的组合、图形、图像、视频、音频等。例如,“012...`”、“阴、雨、下降、气温”、“学生的档案记录、货物的运输情况”等都是数据。数据通常存储在数据库中,按照信息分类原则,分成一个个数据集,每个数据集只包含一个主题的信息,如图3-3所示。

 

3-3  数据库中的数据集

2)服务

服务是自定义的业务逻辑,用来实现特定功能。例如加入购物车就是一个服务,实现将选中的商品加入到购物车的功能,如图3-4所示。业务逻辑为判断如果购物车中没有该商品,则在购物车中添加商品,如果有该商品,则只增加数量.

3-4  服务就是业务逻辑