小程序开发要点

一、创建小程序实例（主要是定义、配置及页面执行关联）（不是必要）。

即编写3个app前缀的文件，它们共同描述了整个小程序的主体逻辑、生命周期及页面的构成、样式等。创建的实例将由appServer执行。若使用微信官方开发工具的话，创建项目时会自动创建app.js、app.json、app.wxss三个带有app前缀的文件。

二、创建页面

在小程序中一个完整的页面是由.js、.json、.wxml、.wxss四个文件组成，如图2，每个界面的.js和.wxml是必须要有的，其他两项是可选项。小程序页面由view线程执行。

小程序中的每一个页面的“路径+页面名”都需要写在app.json的“pages[]”属性中，而且”pages[]”里的第一个页面路径就为小程序的首页。这里有个小窍门创建新的页面，在”pages[]”直接输入路径+页面名，然后按ctrl+S保存，那么微信小程序开发工具将会自动创建页面所需要的4个文件.

三、小程序结构拆解

与大多数程序一样，为了更好的了解小程序，可将小程序分为逻辑层、视图层和数据层。

1. 逻辑层
   顾名思义，逻辑层就是程序处理逻辑的地方，包括什么时候需要干什么，怎么干等。在小程序中，逻辑层的代码都写在.js文件中，小程序的逻辑层将数据进行处理后发送给视图层，视图层显示数据，同时接受视图层的事件反馈，如按钮点击等。小程序的逻辑层由javaScript编写，但由于不是单纯运行在浏览器中，因此在web中的一些能力都将无法使用，如document、window等。

2. 视图层
   视图层即为用户看到的东西，由WXML(WeiXin Markup Language)和WXSS（WeiXin Style Sheet）编写。视图层代码都写在.wxml和.wxss文件中.
   其中.wxml文件用于描述页面的结构，.wxss文件用于描述页面的样式。视图层主要将逻辑层传递的数据展示出来，同时会将用户操作的事件反馈给逻辑层处理。

3. 数据层
   数据层即包括临时数据或缓存、文件存储、网络存储与调用。

   • 临时数据
     临时主要是指在内存中数据，在代码中主要是通过在.js文件里用this.setData()函数来将数据从逻辑层发送到视图层。setData函数的参数接受一个对象，以key,value的形式表示将this.data中的key对应的值改变成value，如下图。this代表的是调用函数的页面，需要注意的是单次设置的数据不能超过1024KB，因此尽量避免一次设置过多的数据。
     

   • 文件存储（本地存储）
     主要是使用微信提供的API接口，如下所示：
     wx.getStorage: 获取本地数据缓存
     wx.setStorage: 设置本地数据缓存
     wx.clearStorage: 清理本地数据缓存

   • 网络存储或调用
     使用微信提供的上传或下载文件API接口，如下：
     wx.request: 发起网络请求
     wx.uploadFile: 上传文件
     wx.downloadFile: 下载文件
     调用URL的API接口如下：
     wx.navigateTo: 新窗口打开页面
     wx.redirectTo: 原窗口打开页面