引子
微信小程序总体上来说，如果你有一些HTML CSS JavaScript 的基础的话，很快就可以入门了。刚开始学习的时候可能会迷茫一些，因为小程序相对于前端来说，标签和事件绑定都有或多或少的不一样，但是坚持几天之后你会发现，小程序可能比你想象的要友好的多。
官方文档
无论学习什么，官方文档都会是我们最好的老师。链接：https://developers.weixin.qq.com/miniprogram/dev/framework/
开发工具
下载微信开发者工具即可，传送门：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
小程序代码构成
下载了开发者工具，打开之后你会发现，相比于我们以前面对的html、css、js，小程序就开始有一些不一样，他多了一个json文件。
JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。
JSON配置
app.json
app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
我们点开会发现有一些都是开发者工具中自带的代码，如
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
先说明一下各个字段是控制什么的：
1、pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
2、window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
注：具体各个属性可在官方文档轻松查阅。
WXML
有过前端经验的人们可以知道，平时的网页构成=HTML+CSS+JS，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。
同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。打开开发者工具中的 pages/index/index.wxml，你会看到以下的内容:
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}">获取头像昵称</button>
<block wx:else>
<image src="{{userInfo.avatarUrl}}"background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
可以看到，小程序的代码和HTML还是有些不一样的，下面就来一一解释一下：
1、标签名字
html中我们常用的div、span，在小程序中叫做view、text，此外有很多组件例如，地图、视频、音频都是有官方包装好的组件供我们调用，大大的减少了开发时间。
2、多了 wx:if 和{ { } }这些东西
在小程序中，如果想让一个 Hello World 的字符串显示在界面上。需要用到数据绑定这个操作，
WXML中这样写
<text> {{msg}} </text>
JS这样写
this.setData({ msg: "Hello World" })
通过 {{ }} 的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。
wx: 开头的属性更多用在与判断满足某种状态，或者是在特定某种情况，来控制当时的页面显示情况。
WXSS 样式
WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。
1、有了一个会自动换算的单位：rpx，算是对我们开发人员超级友好的一个东西了，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。
2、提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
3、此外 WXSS 仅支持部分 CSS 选择器（这个本小白还没有遇见，先不多说明，日后遇见会加上的）
JS 逻辑交互
一个小程序仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。
<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button> //bindtap是事件绑定所用
点击 button 按钮的时候，我们希望把界面上 msg 显示成 "Hello World"，于是我们在 button 上声明一个属性: bindtap ，在 JS 文件里边声明了 clickMe 方法来响应这次点击操作：
Page({
clickMe:function(){
this.setData({msg:"Hello World"})
}
})
此外你还可以在 JS 中调用小程序提供的丰富的 API，利用这些 API 可以很方便的调起微信提供的能力，例如获取用户信息、本地存储、微信支付等。在前边的 QuickStart 例子中，在 pages/index/index.js 就调用了
wx.getUserInfo 获取微信用户的头像和昵称，最后通过 setData 把获取到的信息显示到界面上。更多 API 可以参考文档
