前言
工作之余，尝试学习了一些小程序的相关知识，也做了几个demo，对小程序的开发有了一个基础的了解与认识，下面我简单说下我理解的小程序，也算是对自己这段时间的一个总结。
从几个demo中以及官方快递集成的代码来看，小程序的架构很清晰，类似MVVM的思想。JS负责相应的逻辑，WXML和WXSS来共同相应的视图，其中wxml类似xml，wxss类似css，对于有前端基础的人来说，学习起来难度不大。
项目结构
在新建的一个小程序的列表中，可以看到根目录有这几个文件。
project.config.json，其中
| 文件 | 描述 |
|---|---|
| app.js | 全局的逻辑 |
| app.json | 全局的公共设置，包括所有的页面以及tab、默认的标题等 |
| app.wxss | 公共样式 |
每个页面由四部分组成
| 文件 | 描述 |
|---|---|
| .js | 页面的逻辑（包括生命周期监听） |
| .json | 页面的配置(标题、使用的component等) |
| .wxml | 页面结构，框架设计的一种标签语言，结合基础组件、事件系统，可以构建出页面的结构 |
| .wxss | 样式 几乎支持所有的css样式 |
跟目录还有一个project.config.json,它可以做一些个性化的配置，比如界面颜色、编译配置等等。其中的es6写法深得我心。
生命周期
小程序的生命周期分为两个部分：应用生命周期和页面生命周期，先说一下页面的生命周期：
应用生命周期
//app.js
App({
onLaunch: function () {
}
})
这是初始化小程序项目中app的相关代码，可以看到主要是在onLaunch中做一些初始化的操作。这里简单说下应用的生命周期流程：
- 打开小程序时，会启动
onLaunch方法，该方法只会执行一次，适合在这个方法中做一些初始化操作。 - 初始化完成后会走
onShow方法来监听小程序的显示，该方法是会多次执行的，比如从后台切换到前台就会触发该方法。 - 相应的从前台切换到后台就会
onHide方法，该方法也是会被多次调用的。 - 如果我们要打开的页面不存在就会触发
onPageNotFound方法。
页面的生命周期
页面的生命周期要比应用的生命周期相对来说复杂一点，我们先来看下官方给的图：
- 页面注册完成之后，加载页面会触发
onLoad方法，一般会在这个方法中做一些网络请求或者是初步刷新数据的操作。 - 在页面载入之后会触发
onShow方法，在后台切换到前台时也会触发onShow,前提是该页面可见。 - 在页面初次渲染完成会触发
onReady方法。 - 当小程序从前台切换到后台时就会触发
onHide方法。 - 当使用重定向方法wx.redirectTo(object)或关闭当前页返回上一页wx.navigateBack()，触发onUnload。同时，应用生命周期会影响到页面生命周期。
数据绑定以及渲染
学过react的应该知道在使用数据时要先声明，才能使用，不然就会报错。而小程序中的数据声明是在js中的data里，就像这样
Page({
data: {
message
}
})
<text>{{message}}</text>
条件渲染和列表渲染在这里也有特别之处：
条件渲染
<view wx:if="{{isShow}}"></view>
列表渲染
<view wx:for="{{array}}" wx:for-item="item" wx:for-index="index">
<text>{{item}}</text>
</view>
-
wx:for制定数据的列表 -
wx:for-item`可以指定数组当前元素的变量名，
-
wx:for-index`可以指定数组当前下标的变量名
自定义组件
有时候我们需要自己定制一些组件，以让多数页面使用，这个时候就需要自定义组件。
比如我们要自定义一个dialogzu j组件，那么其json文件中要有这样的属性
{
"component": true
}
还有就是dialog.js的不同，不再是Page来注册，也是要用Component来注册。
Component({
/**
* 组件的属性列表
*/
properties: {
title: String
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
在要使用的页面的json中要这样：
{
"usingComponents": {
"别名": "路径"
}
}
如果要使用第三方的组件也要如此写。
总结
路漫漫而修远兮，我将上下而求索。知识无穷而学不止，自己学的还是一些基础，没有涉及到深层次的原理，需不断学习。
