1. 配置小程序

1.1 全局配置

小程序根目录下的app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时事件、设置多tab等。
app.json文件中配置项属性(只是一部分，详细的配置项怼一怼文档哈。。。)

属性	类型	描述
entryPagePath	string	小程序默认启动首页
pages	string[]	页面路径列表
window	Object	全局的默认窗口表现
tabBar	Object	底部tab栏的表现
networkTimeout	Object	网络超时时间
functionalPages	boolean	是否启用插件功能页
subpackages	Object[]	分包结构配置

app.json文件中属性解析

entryPagePath：指定小程序的默认启动路径(首页),如果不填，将默认为pages列表的第一项。
pages：用于指定小程序右那些页面组成，每一项对应一个页面的路径信息
window：用于设置小程序的状态栏、导航条、标题、窗口背景色。

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor(十六进制颜色)	#000000	导航栏背景颜色
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持black/ white
navigationBarTitleText	string		导航栏标题文字内容
navigationStyle	string	default	导航栏样式，仅支持：default,custom(自定义导航栏，只保留右上角胶囊按钮)
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉loading的样式，仅支持dark/light
backgroundColorTop	string	#ffffff	顶部窗口的背景色，仅IOS支持
backgroundColorBottom	string	#ffffff	底部窗口的背景色，仅IOS支持
enablePullDownRefresh	boolean	false	是否开启全局的下拉刷新
onReachBottomDistance	number	50	页面上拉触底事件触发时距页面底部距离，单位px
pageOrientation	string	portrait	屏幕旋转设置，支持 auto/ protrait/landscape

tabBar：如果小程序时一个多tab应用，可以通过tabBar配置项指定tab栏的表现，以及tab切换时显示对应的页面。

属性	类型	默认值	描述
color	HexColor		tab上的文字默认颜色，仅支持十六进制颜色
selectedColor	HexColor		tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor	HexColor		tab 的背景色，仅支持十六进制颜色
borderStyle	string		tabbar 上边框的颜色，仅支持 `black` / `white`
list	Array		tab 的列表， `list` 属性说明，最少 2 个、最多 5 个 tab
position	string	bottom	tabBar的位置，仅支持`bottom`,`top`
custom	boolean	false	自定义tabBar

注意： 其中list接收一个数组，只能配置最少2个、最多5个tab，tab按数组的顺序排序，每一项都是一个对象。

属性	类型	说明
pagePath	string	页面路径，必须在pages中先定义
text	string	tab上按钮文字
iconPath	string	图片路径，icon大小限制为40kb,当 `position` 为 `top` 时，不显示 icon。
selectedIconPath	string	选中时的图片路径,icon大小限制为40kb,当 `position` 为 `top` 时，不显示 icon。

networkTimeout：各类网络请求的超时时间，但闻均为毫秒.

属性	类型	默认值	说明
request	number	60000	wx.request的超时时间
connectSocket	number	60000	wx.connnectSocket的超时时间
uploadFile	number	60000	wx.uploadFile的超时时间
downloadFile	number	60000	wx.downloadFile的超时时间

1.2 页面配置

app.json 中的部分配置，也支持对单个页面进行配置，可以在页面对应的 .json 文件来对本页面的表现进行配置。页面中配置项在当前页面会覆盖 app.json 中相同的配置项（样式相关的配置项属于 app.json 中的 window 属性，但这里不需要额外指定 window 字段）

1.3 sitemap配置

sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json ，则默认为所有页面都允许被索引；sitemap.json 有以下属性：
配置项

属性	类型	描述
rules	Object[]	索引规则列表

rules配置项指定了索引规则，每项规则为一个JSON对象，属性如下所示：

属性	类型	取值	取值说明
action	string	allow、disallow	命中该规则的页面是否能被索引
page	string	* 、页面的路径	* 表示所有页面，不能作为通配符使用
params	string		当 page 字段指定的页面在被本规则匹配时可能使用的页面参数名称的列表（不含参数值）
priprity	number		优先级，值越大则规则越早被匹配，否则默认从上到下匹配

2. 小程序框架

整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。
场景值
场景值用来描述用户进入小程序的路径。由于 Android 系统限制，目前还无法获取到按 Home 键退出到桌面，然后从桌面再次进小程序的场景值，对于这种情况，会保留上一次的场景值。
获取场景值

对于小程序，可以在 App 的 onLaunch 和 onShow，或wx.getLaunchOptionsSync 中获取上述场景值。
对于小游戏，可以在 wx.getLaunchOptionsSync) 和 wx.onShow 中获取上述场景值

2.1 逻辑层

2.1.1 介绍

小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
在JavaScript的基础上，增加的一些功能

增加 App 和 Page 方法，进行程序注册和页面注册
增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。
提供丰富的 API如微信用户数据，扫一扫，支付等微信特有能力。
提供模块化能力，每个页面有独立的[作用域]。

2.1.2 注册小程序

每个小程序都需要在app.js中调用App方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。
整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取 App 上的数据或调用开发者注册在 App 上的函数。

// app.js
App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

生命周期回调函数

onLaunch: 小程序初始化完成时触发,全局只触发一次
onShow: 小程序启动，或从后台进入前台显示时触发。
onHide: 小程序从前台进入到后台时触发
onError：小程序发生脚本错误或API调用报错时触发
onPageNotFound：小程序要打开的页面不存在时触发
onThemeChange：系统切换主题时触发。

2.1.3 注册页面

对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。
简单的页面可以使用Page()进行构造。

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  }
})

2.1.4 页面路由

在小程序中所有页面的路由全部由框架进行管理
框架以栈的形式维护了当前的所有页面。当发生路由切换的时候，页面栈的表现如下：路由方式 | 页面栈表现 | | ------ | ------------------- | | 初始化 | 新页面入栈 | | 打开新页面 | 新页面入栈 | | 页面重定向 | 当前页面出栈，新页面入栈 | | 页面返回 | 页面不断出栈，直到目标返回页 | | Tab 切换 | 页面全部出栈，只留下新的 Tab 页面 | | 重加载 | 页面全部出栈，只留下新的页面|

可以使用getCurrentPages()函数获取当前页面栈。 3. 对于路由的触发方式以及页面生命周期函数如下：

路由方式	触发时机	路由前页面	路由后页面
初始化	小程序打开的第一个页面		onLoad, onShow
打开新页面	调用 API wx.navigateTo 使用组件 `<navigator open-type="navigateTo"/>`	onHide	onLoad, onShow
页面重定向	调用 API wx.redirectTo 使用组件 `<navigator open-type="redirectTo"/>`	onUnload	onLoad, onShow
页面返回	调用 API wx.navigateBack 使用组件`<navigator open-type="navigateBack">` 用户按左上角返回按钮	onUnload	onShow
Tab 切换	调用 API wx.switchTab 使用组件 `<navigator open-type="switchTab"/>` 用户切换 Tab		各种情况请参考下表
重启动	调用 API wx.reLaunch 使用组件 `<navigator open-type="reLaunch"/>`	onUnload	onLoad, onShow

注意事项：

navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面。
页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
调用页面路由带的参数可以在目标页面的onLoad中获取

2.1.5 模块化

可以将一些公共的代码抽离成为一个单独的js文件，作为一个模块。模块只有通过module.exports或者exports才能对外暴露接口。

    // 定义公共的模块 common/common.js
    function sayHello(name){
      console.log(`hello ${name}`)
    }
    function sayGoodbye(name){
      console.log(`bye bye ${name}`)
    }

    module.exports.sayHello = sayHello
    module.exports.sayGoodbye = sayGoodbye

   // 在页面中使用
   var common = require("../../common/common.js")
   Page({
       data:{},
       onLoad(options){},
         helloMINA(){
        common.sayHello("MINA")
        },
        goodbyeMINA(){
        common.sayGoodbye("MINA")
        },
   })

2.2 视图层view

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。
将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。
WXML(WeiXin Markup language) 用于描述页面的结构
WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
WXSS(WeiXin Style Sheet) 用于描述页面的样式。
组件(Component)是视图的基本组成单元。

2.2.1 WXML

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合[基础组件]、[事件系统]，可以构建出页面的结构。
WXML的能力：数据绑定、列表渲染、条件渲染、模板、引用

2.2.2 WXSS

用来描述WXML的组件样式，特性有：样式导入，寸尺单位

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

2.2.3 WXS

WXS时小程序的一套脚本语言，结合WXML，可以构建处页面的结构。
注意事项 WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。 WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。 WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API。 WXS 函数不能作为组件的事件回调。由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
在页面渲染的时候使用

<view>{{ m1.msg }}</view>
<wxs module="m1">
  var msg = "hello wxs ...."
  module.exports.msg = msg
</wxs>

2.2.4 事件系统

事件分类

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

WXML的冒泡事件列表类型 | 触发条件 | 最低版本 | | ------------------ | ----------------------------------------------- | --------------------------------------------------------------------------------------- | | touchstart | 手指触摸动作开始 | | | touchmove | 手指触摸后移动 | | | touchcancel | 手指触摸动作被打断，如来电提醒，弹窗 | | | touchend | 手指触摸动作结束 | | | tap | 手指触摸后马上离开 | | | longpress | 手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发 | 1.5.0 | | longtap | 手指触摸后，超过350ms再离开（推荐使用 longpress 事件代替） | | | transitionend | 会在 WXSS transition 或 wx.createAnimation 动画结束后触发 | | | animationstart | 会在一个 WXSS animation 动画开始时触发 | | | animationiteration | 会在一个 WXSS animation 一次迭代结束时触发 | | | animationend | 会在一个 WXSS animation 动画完成时触发 | | | touchforcechange | 在支持 3D Touch 的 iPhone 设备，重按时会触发 | [1.9.90]|
绑定并阻止事件冒泡

除 bind 外，也可以用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡。

事件的捕获阶段

捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。

<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>

事件对象

如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。属性 | 类型 | 说明 |
| -------------------------------------------------------------------------------------------------------------- | ------- | --------------- | | [type] | String | 事件类型 | | | [timeStamp] | Integer | 事件生成时的时间戳 | | | [target] | Object | 触发事件的组件的一些属性值集合 | | | [currentTarget] | Object | 当前组件的一些属性值集合 | | | [mark] | Object | 事件标记数据 |

不高兴就手撕小程序官方文档系列（一）

1. 配置小程序

1.1 全局配置

1.2 页面配置

1.3 sitemap配置

2. 小程序框架

2.1 逻辑层

2.1.1 介绍

2.1.2 注册小程序

2.1.3 注册页面

2.1.4 页面路由

2.1.5 模块化

2.2 视图层view

2.2.1 WXML

2.2.2 WXSS

2.2.3 WXS

2.2.4 事件系统