开发者文档：https://mp.weixin.qq.com/debug/wxadoc/dev/index.html

开发工具：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=20171130

如果要发布小程序，需要申请AppID。如果不申请的话也可以开发小程序，有些功能可能会用不了，但常用的大部分都是一样的。

新建项目，最后勾选 "创建 QuickStart 项目" (注意: 你要选择一个空的目录才会有这个选项)

图片.png

一般修改之后按Ctrl+S 保存左侧会自动显示效果。

文件结构
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

图片.png

一个小程序页面由四个文件组成，分别是：

图片.png

代码构成：
创建QuickStart 项目，会自动生成几种文件

图片.png

JSON
1、app.json
app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
参考文档:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

图片.png

2、project.config.json
你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
参考文档：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/edit.html#%E9%A1%B9%E7%9B%AE%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6

3、page.json
让开发者可以独立定义每个页面的一些属性
参考文档：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

WXML 模板
类似于HTML，有标签属性等等
WXML用的标签都是包装好的组件。
在一般网页开发中，都是通过JS操作DOM。在WXML中是运用数据绑定：

//WXML：
<text></text>

//js：
this.setData({ msg: "Hello World" })

参考文档：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/

数据绑定：
WXML 中的动态数据均来自对应 Page 的 data。
数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：内容、组件属性(需要在双引号之内)、控制属性(需要在双引号之内)、关键字(需要在双引号之内)、运算、组合

模板：template

//定义
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

//调用
<template is="msgItem" data="{{...item}}"/>

事件：

图片.png

除上表之外的其他组件自定义事件如无特殊申明都是非冒泡事件

事件绑定：
key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。
bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

WXSS样式
具有大部分CSS的样式，提供全局样式和局部样式（app.wxss / page.wxss）
rpx : 可以根据屏幕自适应宽度

图片.png

全局样式与局部样式
定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

JS交互逻辑：

//WXML
<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>

//JS
Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})

参考文档：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html

可以通过编写JS来处理用户的操作，还可以调用小程序提供的API，例如获取用户信息、本地存储、微信支付等。

参考文档：https://mp.weixin.qq.com/debug/wxadoc/dev/api/