一、代码构成
1、.json 后缀的 JSON 配置文件 页面配置。2、.wxml 后缀的 WXML 模板文件 页面结构。3、.wxss 后缀的 WXSS 样式文件 页面样式表。4、.js 后缀的 JS 脚本逻辑文件 页面逻辑。二、JSON 配置
1、pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。2、window字段 —— 小程序所有页面的顶部背景颜色，文字颜色定义在这里的。1、 project.config.json
通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。
2、page.json 具体看官网
这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。
3、WXML 模版
view, button, text等
4、WXSS 样式
新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx
5、JS 交互逻辑
view{{ msg }}/viewbutton bindtap="clickMe"点击我/buttonPage({ clickMe: function() { this.setData({ msg: "Hello World" }) }})6、小程序启动方式
1、紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径:
{ "pages":[ "pages/index/index", "pages/logs/logs" ]}分别位于 pages/index/index 和 pages/logs/logs 目录。而写在 pages 字段的第一个页面就是这个小程序的首页(打开小程序看到的第一个页面)。
2、小程序启动之后 app.js中 触发 onLaunch
App({ onLaunch: function () { // 小程序启动之后 触发 }})7、程序和页面
Page 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构，于是就得到了你看到的小程序的样子。
Page({ data: { // 参与页面渲染的数据 logs: [] }, onLoad: function () { // 页面渲染后 执行 这个回调处理你的逻辑。 }})8、组件
map/mapmap longitude="广州经度" latitude="广州纬度"/map9、Api
1、要获取用户的地理位置时，只需要：
wx.getLocation({ type: 'wgs84', success: (res) = { var latitude = res.latitude // 经度 var longitude = res.longitude // 纬度 }})1、调用微信扫一扫能力，只需要：
wx.scanCode({ success: (res) = { console.log(res) }})二、框架 —— 配置 是整个小程序的总配置项
1、app.json
文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
{"pages": [ // 设置页面路径 "pages/index/index", "pages/logs/index"],"window": { // 设置默认页面的窗口表现 "navigationBarTitleText": "Demo"},"tabBar": { // 设置底部tab表现 "list": [{ "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": "日志" }]},"networkTimeout": { // 设置网络超时时间 "request": 10000, "downloadFile": 10000},"debug": true // 是否开启debug模式}1）、pages
接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。
{"pages":[ "pages/index/index", "pages/logs/logs"]}2)、window
用于设置小程序的状态栏、导航条、标题、窗口背景色
navigationBarBackgroundColor 导航栏背景颜色navigationBarTextStyle 导航栏标题颜色navigationBarTitleText 导航栏标题文字内容navigationStyle 导航栏样式 只在app.json中生效backgroundColor 窗口颜色backgroundTextStyle 下拉 loading 的样式 支持 dark/lightbackgroundColorTop 顶部窗口背景色 仅iOSbackgroundColorBottom 底部窗口的背景色 仅iOSenablePullDownRefresh 是否开启下拉刷新 onReachBottomDistance 页面上拉触底事件触发时距页面底部的距离3)、tabBar
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
color tab上的文字默认颜色selectedColor tab上的文字选中时的颜色backgroundColor tab背景色borderStyle tabbar 上边框的颜色，仅支持black/whitelist tab 的列表position 可选值 bottom/top注：list接受一个数组，数组中的每一项都是一个对象pagePath 页面路径，必须在 pages 中先定义text tab上的按钮文字iconPath 图片路径selectedIconPath 选中时的图片路径4)、networkTimeout
request wx.request的超时时间 connectSocket wx.connectSocket的超时时间 uploadFile wx.uploadFile的上传时间 downloadFile wx.downloadFile 的超时时间5)、debug
可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。 可以帮助开发者快速定位一些常见的问题。
6)、page.json
每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。
navigationBarBackgroundColor 导航栏背景颜色navigationBarTextStyle 导航栏标题颜色navigationTitleText 导航栏标题文字颜色backgroundColor 窗口背景色backgroundTextStyle 下拉 loading 的样式enablePullDownRefresh 是否开启下拉刷新disableScroll 设置为 true 则页面整体不能上下滚动onReachBottomDistance 页面上拉触底事件触发时距页面底部距离总结：这是微信小程序中最基础最细节的部分，也是小程序的骨干部分，多加练习。
这也是我学习微信api文档的笔记，会不定时更新中，业精于勤，荒于嬉。。。
做一个快乐小码农，啊哈哈哈，去写bug咯~~~
