1.

学习前必须了解的：

2.

得了解到小程序视图层WXML，WXSS，以及逻辑层JS，这些是小程序开发的核心内容。

3.

小程序框架将整个系统划分为视图层和逻辑层，视图层由框架设计的标签语言（WeiXinMarkupLanguage）和用于描述WXML组件样式的WXSS（WeiXinStyleSheets）组成，它们的关系就像HTML和CSS的关系。WXML和WXSS在渲染时会被框架解析为不同端的本地渲染文件，这样就能保证一套代码能在多处运行，并且能最大化地接近原生App。渲染原理和RN（ReactNative）、Weex相近。小程序逻辑层是一套运行在本地JavaScript引擎的JavaScript代码，在此基础上框架实现了一套模块化机制，让每个JS文件有独立的作用域和模块化能力，这套模块化机制CommonJS规范。

4.

如果不太了解JS模块化，有个知乎问答上讲的很清楚https://www.zhihu.com/question/39825164，模块化写法http://www.ruanyifeng.com/blog/2012/10/javascript_module.html，不了解CommonJS，AMD，CMD区别的，也有一篇文章讲的比较清楚https://www.jianshu.com/p/09ffac7a3b2c

5.

小程序整体开发流程非常接近前端HTML+CSS+JavaScript开发模式，与其不同的是，小程序没有DOM的概念（什么是DOM：https://www.zhihu.com/question/34219998），在本地的JavaScript引擎中也没有window、document对象，我们则不能通过操作DOM来操作页面，小程序的视图层和逻辑层的交互是通过数据绑定和事件响应实现的，这是一种单项绑定的机制。这套机制需要首先将逻辑层和视图层的数据和事件绑定，当需要修改页面时，逻辑层只需要调用特定的setData方法修改已绑定的数据，这时框架会自动触发WXML重新渲染，达到逻辑层对视图层的控制，当框架收到用户交互操作时，也是如此，只不过是根据绑定的事件，来达到逻辑层对视图层的控制。

6.

大概的图例就是：

7.

视图层

8.

丨用户交互行为↑逻辑层调用setData()

9.

丨调用逻辑层相丨触发视图层渲染

10.

↓关事件方法丨

11.

逻辑层

12.

手打的图例。。。自行体会

13.

通过实例了解视图层与逻辑层的关系：

14.

我们在index.wxml中写上一句

viewbindtap"countClick"测试实例，你点击了{{count}}次/view我们再在index.js中加入事件data:{motto:'HelloWorld',userInfo:{},//加入的变量count:0,hasUserInfo:false,canIUse:wx.canIUse('button.open-type.getUserInfo')},//加入的计算点击次数函数countClick:function(){this.setData({count:this.data.count+1})},15.

放在Page中效果图就是这样：

16.

这样，当我们点击文字时，点击次数也会增加。这就是最简单的小程序，所有复杂的项目都是围绕这个结构展开的。有人可能会问，那app.json是干什么的？这是项目的配置文件，当运行这个项目时，框架首先是解析配置文件，通过pages设置找到默认首页mypages/index/index（pages第一个路径默认为首页），然后加载mypages/index目录中index.wxml、index.wxss、index.js、index.json这四个文件进行页面渲染。

17.

在index.wxml文件中，我们简单使用了view/组件，页面渲染时，框架将逻辑层中data的count属性与视图层的count进行了绑定，所以一打开页面会显示点击次数为0，点击view/时，则会触发tap事件，这时视图层根据view/组件bindtap属性值，将绑定的countClick事件发送给逻辑层，逻辑层根据方法名找到对应事件处理函数countClick并执行。我们再调用setData方法修改count值，然后重新渲染视图层，所以页面数字点击次数增加。这就是小程序的数据绑定和事件响应系统。

18.

这里说的比较详细，就是为了理解这种响应机制，如果有一点前端开发基础，很容易就能理解，之后这种机制不会再细说了。

19.

这里还需要解释一下，一个完整的小程序分为框架程序主题文件和页面文件：框架主体文件只有一份，app.json、app.js、app.wxss，它们分别控制小程序整体配置，逻辑和样式。小程序启动时只会执行一次。

20.

页面文件：小程序每个页面都会有：.wxml、.wxss、.js和json四个文件。它们分别控制结构、样式、逻辑和配置。其中.wxml、.wxss是必须得。框架规定，同一个页面的这4个文件必须具有相同的路径和文件名，所以在这个项目重我们将它们放置在pages/index路径下，且文件名统一为index。

21.

框架主体文件：

22.

app.json：小程序公共设置，配置小程序全局设置

23.

app.js：小程序逻辑文件，主要用于注册小程序全局实例，编译时会和其他页面逻辑文件打包成一份JavaScript文件

24.

app.wxss：小程序公共样式表，对所有页面的布局文件都有效。

25.

app.json和app.js是必须存在的，app.wxss不是必须创建的。

26.

配置文件（app.json）：

27.

app.json是小程序配置文件，编写时要遵循json格式规范。app.json在程序加载时加载，负责对小程序的全局配置。它的配置项包括pages（设置页面路径）、window（设置默认页面的窗口表现）、tabBar（设置tab的表现，tab导航栏，可以放置于顶部或底部，用于不同功能页面的切换，有篇博客介绍得很好http://blog.csdn.net/lecepin/article/details/54380814）networkTimeout（设置网络超时时间）

28.

pages配置：

29.

这就不介绍了。。。很简单，需要提醒的就是不需要填写后缀名，渲染页面时框架会自动寻找路径。

30.

window配置：

31.

负责小程序状态栏、导航条、标题、窗口背景色等系统样式。属性什么的，网上轻松能搜到。不过，我还是写一下。

32.

navigationBarBackgroundColor：导航栏背景颜色，值为HexColor（十六进制颜色值），如#ff83fa，默认值为#000000

33.

navigationBarTextStyle：导航栏标题颜色，仅支持black/white，默认为white

34.

navigationBarTitleText：导航栏标题文字内容

35.

backgroundColor：窗口背景色，值为HexColor（十六进制颜色值），如#ff83fa，默认值为#ffffff

36.

backgroundTextStyle：下拉背景字体、Loading图的样式，仅支持dark/light

37.

enablePullDownRefresh：是否开启下拉刷新，默认为false，开启后，当用户下拉时，会触发页面onPullDownRefresh事件

38.

tabBar配置：

39.

小程序顶部或者底部需要菜单栏时，我们可以通过配置tabBar快速实现，tabBar是个非必填的项目。

40.

可配置的属性：

41.

color：tab上的文字默认颜色，值为HexColor（十六进制颜色值），必填项。

42.

selectedColor：tab上的文字选中时的颜色，HexColor。必填

43.

backgroundColor：tab的背景色，HexColor，必填。

44.

borderStyle：tabbar上边框颜色，仅支持black/white，默认值为black。

45.

list：tab的列表，必填。值为一个数组，最少2个，最多5个tab，数组中每个项是一个对象，代表一个tab的相关配置，每项配置：

46.

pagePath：页面路径，页面跳转，必须在pages中先定义，必填项。

47.

text：tab上按钮的文字，必填

48.

iconPath：tab上icon图片相对路径。大小限制40Kb，必填

49.

selectedIconPath：选中时图片的相对路径，icon同上

50.

position：tab在顶部还是底部显示，可选值为bottom，top，默认为bottom

51.

一个例子，我们将app.json的配置文件改写成

{"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#fff","navigationBarTitleText":"WeChat","navigationBarTextStyle":"black"},"tabBar":{"color":"#000000","selectedColor":"#ff7f50","backgroundColor":"#ffffff","borderStyle":"black","list":[{"iconPath":"images/1.png","selectedIconPath":"images/1.png","pagePath":"pages/index/index","text":"首页"},{"iconPath":"images/1.png","selectedIconPath":"images/1.png","pagePath":"pages/index/index","text":"搜索"}]}}52.

效果图（其中的icon...）：

53.

networkTimeout配置：

54.

小程序各种网络请求API的超时时间只能通过networkTimeout统一设置，不能在API中单独设置。

55.

deug配置：

56.

配置项是否开启debug模式，默认关闭。开启debug模式后，在开发者工具的控制面板，调试信息info的形式输出，其中信息有page的注册，页面路由，数据更新，事件触发，可以帮助开发者快速定位一些常见问题。

57.

以上就是app.json的5类配置项。这些配置项是全局的，当路由到对应页面时，页面配置文件的配置项会覆盖全局配置。