小程序开发之【前端开发】【学习第二节】【一】

学习前必须了解的：

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

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

如果不太了解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

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

大概的图例就是：

                      视图层

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

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

 ↓  关事件方法                        丨

                     逻辑层

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

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

我们在index.wxml中写上一句

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

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

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

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

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

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

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

框架主体文件：

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

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

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

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

配置文件（app.json）：

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

pages配置：

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

window配置：

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

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

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

navigationBarTitleText：导航栏标题文字内容

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

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

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

tabBar配置：

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

可配置的属性：

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

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

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

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

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

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

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

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

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

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

一个例子，我们将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": "搜索"
}
]
}
}

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

networkTimeout配置：

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

deug配置：

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

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