1、前言
小程序开发的安装、注册和接入等流程就不罗列了，在小程序接入指南已经写得很清楚了。
2、app.json
app.json配置是当前小程序的全局配置，包括小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。每一项都对应一个页面的 路径+文件名 信息。文件名不需要写文件后缀，框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理。
3、project.config.json
工具配置在小程序的根目录，对工具做的任何配置都会写入这个文件，使得只要载入同一个项目代码包，开发则工具会自动恢复当时你开发项目时的个性设置。
4、page.json
页面配置 是小程序页面相关的配置，让开发者可以独立定义每个页面的一些属性，比如顶部颜色，是否下拉等。
5、WXML 模板
数据绑定：<view>{{ message }}</view>小程序和Vue的数据绑定都使用 Mustache 语法，双括号将变量包起来。区别是 Vue 中使用 Mustache 语法不能作用在 HTML 特性上，而小程序作用在标签属性上：<view id="item-{{id}}">{{msg}}</view>
列表渲染：<view wx:for="{{array}}">{{index}}: {{item.message}}</view>
也可以用 wx:for-item 指定数组当前元素的变量名，用 wx:for-index 指定数组当前下标的变量名：
<view wx:for="{{items}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input> 中的输入内容，<switch> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。
条件渲染：
<view wx:if="{{length > 5}}">1</view>
<view wx:elif="{{length > 2}}">2</view>
<view wx:else>3</view>
因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。
<block wx:if="{{true}}">
<view>view1</view>
<view>view2</view>
</block>
注意： <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
事件绑定：
<!-- 单击事件冒泡继续传播 --> <view bindtap="doThis">bindtap</view> <!-- 阻止单击事件冒泡继续传播 --> <view catchtap="doThis">bindtap</view>
WXML的冒泡事件：
touchstart 手指触摸动作开始 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断，如来电提醒，弹窗 touchend 手指触摸动作结束 tap 手指触摸后马上离开 longpress 手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发 longtap 手指触摸后，超过350ms再离开（推荐使用longpress事件代替） transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发 animationstart 会在一个 WXSS animation 动画开始时触发 animationiteration 会在一个 WXSS animation 一次迭代结束时触发 animationend 会在一个 WXSS animation 动画完成时触发 touchforcechange 在支持 3D Touch 的 iPhone 设备，重按时会触发
引用：
在 Vue 中引用用于组件的服用引入：import ComponentA from './ComponentA'
在小程序中， WXML 提供两种引用方式 import 和 include。
在 item.wxml 中定义了一个叫item的template：
<template name="item">
<text> {{text}} </text>
</template>
在 index.wxml 中引用了 item.wxml，就可以使用item模板：
<import src="item.wxml"/><template is="item" data="{{text: 'forbar'}}"/>
include 可以将目标文件除了 <template> <wxs> 外整个代码引入：
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>
6、WXSS样式
WXSS(WeiXin Style Sheets) 具有 CSS 大部分的特性，也做了一些扩充和修改。
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
iPhone6上，换算相对最简单，1rpx = 0.5px = 1物理像素，建议设计师以 iPhone6 为设计稿。
样式导入
使用 @import 语句导入外联样式表，注意路径为相对路径。
全局样式与局部样式： app.wxss中的样式为全局样式，在 Page （或 Component） 的 wxss文件中定义的样式为局部样式，自作用在对应页面，并会覆盖 app.wxss 中相同选择器。