常州小程序，小程序代码的构成

通过开发者工具快速创建了一个QuickStart项目 。你可以留意到这个项目里边生成了不同类型的文件:

　　.json后缀的JSON配置文件

　　.wxml后缀的WXML模板文件

　　.wxss后缀的WXSS样式文件

　　.js后缀的JS脚本逻辑文件

　　接下来我们分别看看这4种文件的作用 。

　　JSON配置

　　我们可以看到在项目的根目录有一个app.json和project.config.json ，此外在pages/logs目录下还有一个logs.json ，我们依次来说明一下它们的用途 。

　　小程序配置app.json

　　app.json是当前小程序的全局配置 ，包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等 。QuickStart项目里边的app.json配置内容如下：

　　{

　　"pages":[

　　"pages/index/index",

　　"pages/logs/logs"

　　],

　　"window":{

　　"backgroundTextStyle":"light",

　　"navigationBarBackgroundColor":"#fff",

　　"navigationBarTitleText":"WeChat",

　　"navigationBarTextStyle":"black"

　　}

　　}

　　我们简单说一下这个配置各个项的含义:

　　pages字段——用于描述当前小程序所有页面路径 ，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录 。

　　window字段——定义小程序所有页面的顶部背景颜色 ，文字颜色定义等 。

　　其他配置项细节可以参考文档小程序的配置app.json 。

　　工具配置project.config.json

　　通常大家在使用一个工具的时候 ，都会针对各自喜好做一些个性化配置 ，例如界面颜色、编译配置等等 ，当你换了另外一台电脑重新安装工具的时候 ，你还要重新配置 。

　　考虑到这点 ，小程序开发者工具在每个项目的根目录都会生成一个project.config.json ，你在工具上做的任何配置都会写入到这个文件 ，当你重新安装工具或者换电脑工作时 ，你只要载入同一个项目的代码包 ，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置 ，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项 。

　　其他配置项细节可以参考文档开发者工具的配置 。

　　页面配置page.json

　　这里的page.json其实用来表示pages/logs目录下的logs.json这类和小程序页面相关的配置 。

　　如果你整个小程序的风格是蓝色调 ，那么你可以在app.json里边声明顶部颜色是蓝色即可 。实际情况可能不是这样 ，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块 ，因此我们提供了page.json ，让开发者可以独立定义每个页面的一些属性 ，例如刚刚说的顶部颜色、是否允许下拉刷新等等 。

　　其他配置项细节可以参考文档页面配置 。

　　WXML模板

　　从事过网页编程的人知道 ，网页编程采用的是HTML+CSS+JS这样的组合 ，其中HTML是用来描述当前这个页面的结构 ，CSS用来描述页面的样子 ，JS通常是用来处理这个页面和用户的交互 。

　　同样道理 ，在小程序中也有同样的角色 ，其中WXML充当的就是类似HTML的角色 。打开pages/index/index.wxml ，你会看到以下的内容:

　　<viewclass="container">

　　<viewclass="userinfo">

　　<buttonwx:if="{{!hasUserInfo&&canIUse}}">获取头像昵称</button>

　　<blockwx:else>

　　<imagesrc="{{userInfo.avatarUrl}}"background-size="cover"></image>

　　<textclass="userinfo-nickname">{{userInfo.nickName}}</text>

　　</block>

　　</view>

　　<viewclass="usermotto">

　　<textclass="user-motto">{{motto}}</text>

　　</view>

　　</view>

　　和HTML非常相似 ，WXML由标签、属性等等构成 。但是也有很多不一样的地方 ，我们来一一阐述一下：

　　标签名字有点不一样

　　往往写HTML的时候 ，经常会用到的标签是div,p,span ，开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件 ，例如日历、弹窗等等 。换个思路 ，既然大家都需要这些组件 ，为什么我们不能把这些常用的组件包装起来 ，大大提高我们的开发效率 。

　　从上边的例子可以看到 ，小程序的WXML用的标签是view,button,text等等 ，这些标签就是小程序给开发者包装好的基本能力 ，我们还提供了地图、视频、音频等等组件能力 。

　　更多详细的组件讲述参考下个章节小程序的能力

　　多了一些wx:if这样的属性以及{{}}这样的表达式

　　在网页的一般开发流程中 ，我们通常会通过JS操作DOM(对应HTML的描述产生的树) ，以引起界面的一些变化响应用户的行为 。例如 ，用户点击某个按钮的时候 ，JS会记录一些状态到JS变量里边 ，同时通过DOMAPI操控DOM的属性或者行为 ，进而引起界面一些变化 。当项目越来越大的时候 ，你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量 ，显然这不是一个很好的开发模式 ，因此就有了MVVM的开发模式（例如React,Vue） ，提倡把渲染和逻辑分离 。简单来说就是不要再让JS直接操控DOM ，JS只需要管理状态即可 ，然后再通过一种模板语法来描述状态和界面结构的关系即可 。

　　小程序的框架也是用到了这个思路 ，如果你需要把一个HelloWorld的字符串显示在界面上 。

　　WXML是这么写:

　　<text>{{msg}}</text>

　　JS只需要管理状态即可:

　　this.setData({msg:"HelloWorld"})

　　通过{{}}的语法把一个变量绑定到界面上 ，我们称为数据绑定 。仅仅通过数据绑定还不够完整的描述状态和界面的关系 ，还需要if/else,for等控制能力 ，在小程序里边 ，这些控制能力都用wx:开头的属性来表达 。

　　更详细的文档可以参考WXML

　　WXSS样式

　　WXSS具有CSS大部分的特性 ，小程序在WXSS也做了一些扩充和修改 。

　　新增了尺寸单位 。在写CSS样式时 ，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比 ，采用一些技巧来换算一些像素单位 。WXSS在底层支持新的尺寸单位rpx ，开发者可以免去换算的烦恼 ，只要交给小程序底层来换算即可 ，由于换算采用的浮点数运算 ，所以运算结果会和预期结果有一点点偏差 。

　　提供了全局的样式和局部样式 。和前边app.json,page.json的概念相同 ，你可以写一个app.wxss作为全局样式 ，会作用于当前小程序的所有页面 ，局部页面样式page.wxss仅对当前页面生效 。

　　此外WXSS仅支持部分CSS选择器

　　更详细的文档可以参考WXSS 。

　　JS交互逻辑

　　一个服务仅仅只有界面展示是不够的 ，还需要和用户做交互：响应用户的点击、获取用户的位置等等 。在小程序里边 ，我们就通过编写JS脚本文件来处理用户的操作 。

　　<view>{{msg}}</view>

　　<buttonbindtap="clickMe">点击我</button>

　　点击button按钮的时候 ，我们希望把界面上msg显示成"HelloWorld" ，于是我们在button上声明一个属性:bindtap ，在JS文件里边声明了clickMe方法来响应这次点击操作：

　　Page({

　　clickMe:function(){

　　this.setData({msg:"HelloWorld"})

　　}

　　})

　　响应用户的操作就是这么简单 ，更详细的事件可以参考文档WXML-事件 。

　　此外你还可以在JS中调用小程序提供的丰富的API ，利用这些API可以很方便的调起微信提供的能力 ，例如获取用户信息、本地存储、微信支付等 。在前边的QuickStart例子中 ，在pages/index/index.js就调用了wx.getUserInfo获取微信用户的头像和昵称 ，最后通过setData把获取到的信息显示到界面上 。更多API可以参考文档小程序的API 。