m8-framework-mcp 1.0.0

package/docs/m8mpdoc-develop/001-/351/241/265/351/235/242/345/274/200/345/217/221/004-/345/274/200/345/247/213/345/274/200/345/217/221.md

@@ -0,0 +1,105 @@
+# 快速上手
+
+M8 跨端项目中，一个页面就是一个符合`Vue SFC规范`的`.vue`文件。
+
+## 新建页面
+
+M8 跨端框架中的页面，通常会保存在工程根目录下的`pages`目录下。
+
+每次新建页面，均需在模块下的`router.js`中配置`pages`列表；`router.js`中配置的内容会在编译时合并进`pages.json`中的`pages`字段，未配置的页面，框架会在编译阶段进行忽略。
+
+`pages.json`的完整配置参考：[pages.json](/m8mpdoc/index.html?file=0001-前期准备/005-pages)。
+
+## 应用首页
+
+M8 跨端框架会将`router.js`配置项中的第一个页面，作为当前模块的首页（启动页）。
+
+## 页面API
+
+### getApp()
+
+`getApp()` 函数用于获取当前应用实例，一般用于获取 globalData 。
+
+**实例**
+
+```javascript
+const app = getApp();
+console.log(app.globalData);
+```
+
+**注意：**
+
+-   不要在定义于 `App()` 内的函数中，或调用 `App` 前调用 `getApp()` ，可以通过 `this.$scope` 获取对应的 app 实例
+-   通过 `getApp()` 获取实例之后，不要私自调用生命周期函数。
+
+### getCurrentPages()
+
+`getCurrentPages()` 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
+
+**注意：** `getCurrentPages()`仅用于展示页面栈的情况，请勿修改页面栈，以免造成页面状态错误。
+
+每个页面实例的方法属性列表：
+
+| 方法                  | 描述                            | 平台说明 |
+| --------------------- | ------------------------------- | -------- |
+| page.$getAppWebview() | 获取当前页面的 webview 对象实例 | App      |
+| page.route            | 获取当前页面的路由              |     |
+
+Tips：
+
+-   `ejs.page.open`, `ejs.page.replace` 只能打开非 tabBar 页面。
+-   页面底部的 `tabBar` 由页面决定，即只要是定义为 `tabBar` 的页面，底部都有 `tabBar`。
+-   不能在 `App.vue` 里面进行页面跳转。
+
+## 路由
+
+页面路由为框架统一管理，开发者需要在模块下的`router.js`里配置每个路由页面的路径及页面样式。类似平台小程序在 `app.json` 中配置页面路由一样。所以 M8 跨端框架 的路由用法与 `Vue Router` 不同。
+
+### 路由跳转
+
+框架页面路由跳转一般调用`EJSAPI`跳转。
+
+## 页面栈
+
+框架以栈的形式管理当前所有页面， 当发生路由切换的时候，页面栈的表现如下：
+
+| 路由方式   | 页面栈表现                   | 触发时机                                                                    |
+| ---------- | ---------------------------- | --------------------------------------------------------------------------- |
+| 初始化     | 新页面入栈                   | 框架 打开的第一个页面                                                       |
+| 打开新页面 | 新页面入栈                   | 调用 API `ejs.page.open`                                                    |
+| 页面重定向 | 当前页面出栈，新页面入栈     | 调用 API `ejs.page.replace`                                                 |
+| 页面返回   | 页面不断出栈，直到目标返回页 | 调用 API `ejs.page.close`、用户按左上角返回按钮、安卓用户点击物理 back 按键 |
+
+## 页面代码规范介绍 @template-block
+
+框架 支持在 template 模板中嵌套 `<template/>` 和 `<block/>`，用来进行列表渲染 和 条件渲染。
+
+`<template/>` 和 `<block/>` 并不是一个组件，它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
+
+`<block/>` 在不同的平台表现存在一定差异，推荐统一使用 `<template/>`。
+
+**代码示例**
+
+```html
+<template>
+    <view>
+        <template v-if="test">
+            <view>test 为 true 时显示</view>
+        </template>
+        <template v-else>
+            <view>test 为 false 时显示</view>
+        </template>
+    </view>
+</template>
+```
+
+```html
+<template>
+    <view>
+        <block v-for="(item,index) in list" :key="index">
+            <view>{{item}} - {{index}}</view>
+        </block>
+    </view>
+</template>
+```
+

package/docs/m8mpdoc-develop/001-/351/241/265/351/235/242/345/274/200/345/217/221/006-Boot/345/205/261/347/224/250/350/265/204/346/272/220.md

@@ -0,0 +1,13 @@
+# Boot共用资源
+
+## 前言
+
+`boot` 是每一个业务模块入口中必须要引入的资源，其中引入了开发必须依赖的资源，不需要开发人员繁琐的一个个去进行引入
+
+## 说明
+
+`boot` 中根据打包命令及`config`配置，为开发人员预先引入了如下资源：
+
+- `@build/resolution/mock/index.tool`
+
+- 打包为H5端应用时，引入`src/static/lib/performance.js` 及 `src/static/lib/vconsole.min.js`

package/docs/m8mpdoc-develop/001-/351/241/265/351/235/242/345/274/200/345/217/221/007-Config/344/270/232/345/212/241/351/205/215/347/275/256.md

@@ -0,0 +1,325 @@
+# Config 配置
+
+## 前言
+
+这里是一些移动前端工程相关的配置项，默认全局引用，模块无需单独 import 引用，可以直接使用 Config 变量。
+
+## 文件位置
+
+M8 跨端框架 config.js 文件路径在框架 `ejs.m8.project -> src -> shared -> config.js`
+
+## 配置内容
+
+### ajax 请求配置
+
+```js
+/**
+* 请求配置
+*/
+ajax: {
+    // 是否开启错误状态码自动弹窗提示
+    isAutoErrToast: false,
+    // v8.3.13开始，当开启isAutoErrToast后，根据对应错误关键字toast提示文字
+    // 低于v8.3.13的版本，需要更新 @epoint-mrc/utils至8.3.13版本，然后在该文件中添加以下 ajax.errMsg 字段
+    errMsg: {
+        'fail': '请求失败',
+        'timeout': '请求超时',
+        'abort': '请求中断'
+    },
+    // 每次 ajax时，也可以增加isAutoProxy:false，来让本次请求不代理
+    // 是否自动代理，如果开启，所有的请求会默认带上用户相关信息，h5是cookie中，app是headers中
+    // 如果非新点标准后台，请关闭，否则会影响正常请求
+    isAutoProxy: true,
+    // v8.3.14开始，只有 isAutoProxy 开启时才会生效
+    // 每次 ajax时，也可以增加isAutoFingerprint:false，来让本次请求不添加染色体
+    // 是否添加染色体，如果开启，会在所有ajax请求的请求头中增加User-Token请求头
+    // 如果非新点标准后台，请关闭，否则会影响正常请求
+    // 该配置开启会去请求token，如果请求无需token请关闭
+    isAutoFingerprint: true,
+    // 锁定token的时长，单位ms
+    // ajax两次请求间隔小于该时长，第二次请求不会去请求token，而是直接使用上一次请求的token
+    // 每次 ajax时，也可以传递 lockTokenDuration，修改上一次请求token锁定时长
+    // 支持版本：M83 >= v8.3.22-beta.0、M84 >= v8.4.0-beta.6
+    lockTokenDuration: 1000
+},
+```
+
+注：开启染色请求后，会在 ajax 请求头上携带 User-Token 和 MobileFrame-Info 请求头。
+
+需要关注如果跨域的情况下，需要服务端允许 User-Token 和 MobileFrame-Info 请求头。http://app.epoint.com.cn/h5/sdoc/dist/index.html#/guide_chapter3
+
+### token 用户身份配置
+
+```js
+/**
+ * token 用户身份配置
+ */
+token: {
+    // 是否使用自定义token，可以用于非ejs环境下的token赋值刷新，影响到所有Util.ajax与下拉刷新请求
+    isUseSelfToken: false,
+    // 可以是字符串，也可以是方法
+    // 非ejs环境下有效，ejs下默认就是容器的token，不容改变
+    // 非ejs环境环境下isUseSelfToken为true生效
+    getToken() {
+        return Promise.resolve('a4bf8be66c4e45a3ccb79634aff575d8');
+    },
+    //非ejs环境下isUseSelfToken为true生效
+    refreshToken: function () {
+        // 自定义刷新token之后，请求的token仍然是从自定义getToken中获取token。
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                // 更新存储在本地的token
+                // ...
+                resolve();
+            }, 1000);
+        });
+    },
+    // 自定义刷新失败处理
+    // 非ejs环境下isUseSelfToken为true生效
+    // 超过允许最大刷新token次数后请求接口的响应状态码仍然403|401触发，可以在这里进行处理后续逻辑
+    // 该配置项从框架`v8.3.11`版本开始支持
+    refreshTokenCountExceeded: function () {
+        ejs.ui.alert({
+            title: '提醒',
+            message: '用户身份失效，请重新登录',
+            buttonName: '确定',
+            success() {
+                // ...
+            }
+        });
+    }
+},
+```
+
+注意： 在 config.js 中无法直接使用 Util 相关 API，因为 Util 库需要依赖 config.js 文件，无法互相依赖使用。如果需要在 config.js 中使用 Util，需要将 Util 和相关方法逻辑提取出来，在 config.js 中 require 引入，然后使用。
+
+### isDebugPanel 调试面板
+
+```js
+/**
+ * 是否开启 调试面板， 开启可以在移动端捕获log
+ * 仅在H5端生效
+ */
+isDebugPanel: 1,
+```
+
+### Mock 模拟数据
+
+```js
+/**
+ * 是否进行mock模拟数据请求
+ * isProductionExternalMock 为 true 时仅在 dev 环境生效
+ */
+isMock: true,
+```
+
+### isProductionExternalMock 排除 mockjs 库
+
+```js
+/**
+ * 是否在生产环境下排除mockjs库
+ * 防止构建后带mockjs资源过大
+ * isMock: true时生效
+ */
+isProductionExternalMock: true,
+```
+
+### isTestPerformance 性能检测
+
+```js
+/**
+ * 是否开启性能检测，仅在H5端生效
+ */
+isTestPerformance: 0,
+```
+
+主要对页面以下几项进行性能检测：
+
+-   `准备新页面时间耗时`
+
+-   `Appcache 耗时`
+
+-   `DNS 查询耗时`
+
+-   `TCP连接耗时`
+
+-   `request请求耗时`
+
+-   `请求完毕至DOM加载`
+
+-   `解释dom树耗时`
+
+-   `load事件耗时`
+
+-   `从开始至load完成`
+
+-   `页面加载耗时`
+
+将 `isTestPerformance` 设置为 `1` 后，效果如下图所示：
+
+![](assets/001/006tNc79gy1g5r44unci7j30wv0u0wyg.jpg)
+
+### isUseEjsFetchAjax 是否使用原生请求代理 ajax 请求
+
+```js
+/**
+ * 是否使用原生请求代理ajax请求
+ */
+isUseEjsFetchAjax: false,
+```
+
+### isCustomize 是否使用个性化定制目录 [文档](http://app.epoint.com.cn/m8mpdoc/?file=015-%E5%B7%A5%E7%A8%8B%E5%8C%96/customize)
+
+该配置项从框架`v8.3.10`版本开始支持
+
+```js
+/**
+ * 是否使用个性化定制目录
+ * 开启后，代码在构建时将会响应customize目录下的个性化代码
+ * 修改后需重启服务或重新构建
+ */
+isCustomize: false,
+```
+
+### isH5Multiple H5 下是否开启多模块构建 [文档](http://app.epoint.com.cn/m8mpdoc/?file=015-%E5%B7%A5%E7%A8%8B%E5%8C%96/multiple)
+
+该配置项从框架`v8.3.11`版本开始支持
+
+```js
+/**
+ * H5下是否开启多模块构建
+ */
+isH5Multiple: false,
+```
+
+### isExternalConfig 是否在 dist 下独立 config.js 文件，仅 H5 环境生效
+
+该配置项从框架`v8.3.13`版本开始支持
+
+```js
+// 是否在dist下独立config.js文件，仅H5环境生效
+isExternalConfig: false,
+```
+
+### configReady ejs 初始化
+
+```js
+/**
+ * 统一ejs初始化
+ * @param {Array} jsApiList 自定义api列表
+ * @param {Function} successCallback 成功回调，非必填
+ * @param {Function} errorCallback 失败回调，非必填
+ */
+configReady: (jsApiList, successCallback, errorCallback) => {
+    const tmpApiList = jsApiList || [];
+    const isFormal = false;
+
+    ejs.config({
+        // 注，jsApiList中key代表模块，其中value为对应类的包名，Android和iOS下有区别
+        jsApiList: tmpApiList
+    });
+    ejs.error((error) => {
+        // 说明: 可以捕获相应的错误，例如，验证失败会触发error，安卓原生容器捕获到图片加载异常错误也会触发
+        errorCallback && errorCallback(error);
+    });
+    ejs.ready(() => {
+        Config.serverUrl = isFormal ? 'http://ip/rest/' : 'http://127.0.0.1/rest/mock/';
+        successCallback && successCallback();
+    });
+};
+```
+
+此配置主要方便产品项目使用 ejs.config 初始化，同时可以定义不同的 Config.serverUrl 环境接口，方便环境切换。
+
+### env 环境参数
+
+```js
+/**
+ * 开发环境常量，ejs、dingtalk
+ * 在编译h5环境下的包时，会根据该参数引入不同环境支持度的ejs库
+ */
+env: (function () {
+    var ENV_H5 = 'uni';
+    var ENV_EJS = 'native';
+    var ENV_DD = 'dd';
+    var ENV_EJS_H5 = 'native_uni';
+    var ENV_DD_H5 = 'dd_uni';
+    var ENV_ALL = 'native_dd_uni';
+
+    return ENV_EJS_H5;
+})();
+```
+
+根据 return 的参数不同，ejs 会引入不同的环境 ejs-jssdk。
+
+例如：
+
+`ejs_h5`会引入支持`ejs`环境和支持`h5`环境的跨端库文件；
+
+`ejs_dd_h5`会引入支持`ejs`、`dd`和 `h5`环境的跨端库文件；
+
+### isAsyncPackages 是否使用异步化分包
+
+该配置项从框架`v8.3.5-beta.0`版本开始支持
+
+```js
+/**
+ * 编译到微信小程序时，是否将框架组件库设置为异步化分包
+ * 该配置可用于减小主包大小
+ */
+isAsyncPackages: 0;
+```
+
+该配置开启时，在微信小程序中，会将`node-modules/@epoint-mrc/em-components/src/`下的 `components` 及 `sub_components`目录设置为异步化分包目录。
+
+只有在使用到该目录下的资源时，微信小程序才会去加载该分包。
+
+该配置可用于减小主包大小。
+
+### customAsyncPackages 自定义异步化分包目录
+
+该配置项从框架`v8.3.15-beta.0`版本开始支持
+
+```js
+/**
+ * 自定义异步化分包目录，isAsyncPackages开启时有效
+ * 示例：customAsyncPackages: ['components/custom_components']
+ * 注意，默认是src目录下的路径，建议将异步化分包放在 src/components 目录下
+ */
+customAsyncPackages: []
+```
+
+该配置可用于减小主包大小。
+
+### isExternalCommon H5 端是否剥离公共资源
+
+该配置项从框架`v8.3.9-beta.4`版本开始支持
+
+```js
+/**
+ * H5端打包新点小程序或低码组件时，是否需要剥离公共资源
+ */
+isExternalCommon: 0;
+```
+
+该配置开启后，通过命令`npm run build:common`即可打包 H5 端公共资源。
+
+打包后的公共资源输出路径：`dist/mccommon/mccommon.umd.js`。
+
+H5 端公共资源包含：
+
+1. 跨端组件库
+
+2. `EJS`
+
+3. `Util`
+
+4. `core-js`
+
+5. `@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/runtime/componentNormalizer.js`
+
+6. `@dcloudio/vue-cli-plugin-uni/packages/h5-vue-style-loader/lib/addStylesClient.js`
+
+7. `uniapp`框架 H5 端资源
+
+其中 `EJS`、`Util` 放在 `window` 全局供调用，其他资源放在 `window.mccommon` 下供调用。例如跨端选择组件通过 `window.mccommon.emComponents.Picker` 调用。`uniapp`框架 H5 端资源提供 `uni` 全局变量。

package/docs/m8mpdoc-develop/001-/351/241/265/351/235/242/345/274/200/345/217/221/008-/345/267/245/345/205/267/347/261/273/346/240/267/345/274/217.md

@@ -0,0 +1,91 @@
+# 工具类样式
+
+## 说明
+
+`M8` 跨端框架中集成了 `M7` 中的工具类样式，并且还提供了其他工具类样式
+
+[M7 工具类样式地址](https://fe.epoint.com.cn/m7fedoc/index/index.php#page=util_style_class)
+
+## 扩展内置样式说明
+
+M8 跨端框架提供了一批内置的样式变量，方便开发者使用。
+
+### 内置 CSS 变量
+
+| CSS 变量            | 描述                   | App                                                                                                                 | 平台小程序 | H5                   |
+| :------------------ | :--------------------- | :------------------------------------------------------------------------------------------------------------------ | :----- | :------------------- |
+| --status-bar-height | 系统状态栏高度         | [系统状态栏高度](http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.getStatusbarHeight)，其他注意见下 | 25px   | 0                    |
+| --window-top        | 内容区域距离顶部的距离 | 0                                                                                                                   | 0      | NavigationBar 的高度 |
+| --window-bottom     | 内容区域距离底部的距离 | 0                                                                                                                   | 0      | TabBar 的高度        |
+
+**注意：**
+
+-   `var(--status-bar-height)` 此变量在微信小程序环境为固定 `25px`。
+-   当设置 `"navigationStyle":"custom"` 取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使用一个高度为 `var(--status-bar-height)` 的 view 放在页面顶部，避免页面内容出现在状态栏。
+-   由于在 H5 端，不存在原生导航栏和 tabbar，也是前端 div 模拟。如果设置了一个固定位置的居底 view，在平台小程序端是在 tabbar 上方，但在 H5 端会与 tabbar 重叠。此时可使用`--window-bottom`，不管在哪个端，都是固定在 tabbar 上方。
+
+**代码块**
+
+示例 1 - 普通页面使用 css 变量：
+
+```html
+<template>
+    <page-meta>
+        <navigation-bar />
+    </page-meta>
+    <view>
+        <view class="status_bar">
+            <!-- 这里是状态栏 -->
+        </view>
+        <view>状态栏下的文字</view>
+    </view>
+</template>
+<style>
+    .status_bar {
+        height: var(--status-bar-height);
+        width: 100%;
+    }
+</style>
+```
+
+```html
+<template>
+    <view>
+        <view class="toTop">
+            <!-- 这里可以放一个向上箭头，它距离底部tabbar上浮10px-->
+        </view>
+    </view>
+</template>
+<style>
+    .toTop {
+        bottom: calc(var(--window-bottom) + 10px);
+    }
+</style>
+```
+
+示例 2 - 页面获取状态栏高度
+
+```html
+<template>
+    <view class="content">
+        <view :style="{ height: iStatusBarHeight + 'px'}"></view>
+    </view>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                iStatusBarHeight: 0
+            };
+        },
+        onLoad() {
+            this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
+        }
+    };
+</script>
+```
+
+### uni.scss 全局变量
+
+M8 跨端框架中的 `uni.scss` 文件，默认全局引用，其中默认配置了一批 css 变量，这些变量可以在 css 代码中直接使用。我们的跨端组件库也都使用了这些变量，开发者也可以在文件中添加自己需要的全局变量。具体内容请查看框架中的 `src/uni.scss`文件。

package/docs/m8mpdoc-develop/001-/351/241/265/351/235/242/345/274/200/345/217/221/009-/347/224/237/345/221/275/345/221/250/346/234/237.md

@@ -0,0 +1,119 @@
+# 生命周期
+
+## 页面生命周期
+
+**M8 跨端框架 支持如下页面生命周期函数：**
+
+注：对于跨端框架来说，在 EJS 容器内的应用也是打包为 H5 端的包，故以下 H5 端支持的内容，EJS 中同样支持。
+
+| 函数名                              | 说明                                                                                                                                                                                                                                                                                                                          | 平台差异说明                   |
+| :---------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------- |
+| onLoad                              | 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）                                                                                                                                                                                                                                                   |                                |
+| onShow                              | 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面                                                                                                                                                                                                                                                    |                                |
+| onReady                             | 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发                                                                                                                                                                                                                                                          |                                |
+| onHide                              | 监听页面隐藏                                                                                                                                                                                                                                                                                                                  |                                |
+| onUnload                            | 监听页面卸载                                                                                                                                                                                                                                                                                                                  |                                |
+| onResize                            | 监听窗口尺寸变化                                                                                                                                                                                                                                                                                                              | 仅微信小程序支持               |
+| onReachBottom                       | 页面滚动到底部的事件（不是 scroll-view 滚到底），常用于下拉下一页数据。具体见下方注意事项                                                                                                                                                                                                                                     |                                |
+| onTabItemTap                        | 点击 tab 时触发，参数为 Object，具体见下方注意事项                                                                                                                                                                                                                                                                            |                                |
+| onShareAppMessage                   | 用户点击右上角分享                                                                                                                                                                                                                                                                                                            | 仅微信小程序、支付宝小程序支持 |
+| onPageScroll                        | 监听页面滚动，参数为 Object                                                                                                                                                                                                                                                                                                   |                                |
+| onNavigationBarButtonTap            | 监听原生标题栏按钮点击事件，参数为 Object                                                                                                                                                                                                                                                                                     | 仅 H5 端支持                   |
+| onBackPress                         | 监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack 表示来源是 uni.navigateBack ；详细说明及使用：[onBackPress 详解](http://ask.dcloud.net.cn/article/35120)。支付宝小程序只有真机能触发，只能监听非 navigateBack 引起的返回，不可阻止默认行为。 | 仅 H5、支付宝小程序支持        |
+| onShareTimeline                     | 监听用户点击右上角转发到朋友圈                                                                                                                                                                                                                                                                                                | 仅微信小程序支持               |
+| onAddToFavorites                    | 监听用户点击右上角收藏                                                                                                                                                                                                                                                                                                        | 仅微信小程序支持               |
+
+**`onReachBottom`使用注意**
+
+可在 `pages.json` 里定义具体页面底部的触发距离`onReachBottomDistance`(具体可查看`pages.json`中的`globalStyle`字段)，比如设为 50，那么滚动页面到距离底部 50px 时，就会触发 `onReachBottom` 事件。
+
+如使用 `scroll-view` 导致页面没有滚动，则触底事件不会被触发。`scroll-view` 滚动到底部的事件请参考 `scroll-view` 的文档[scroll-view](/m8mpdoc/index.html?file=017-内置组件/002-scroll-view 'scroll-view')
+
+**`onPageScroll` （监听滚动、滚动监听、滚动事件）参数说明：**
+
+| 属性      | 类型   | 说明                                  |
+| --------- | ------ | ------------------------------------- |
+| scrollTop | Number | 页面在垂直方向已滚动的距离（单位 px） |
+
+**注意**
+
+-   `onPageScroll`里不要写交互复杂的 js，比如频繁修改页面。因为这个生命周期是在渲染层触发的，在非 h5 端，js 是在逻辑层执行的，两层之间通信是有损耗的。如果在滚动过程中，频发触发两层之间的数据交换，可能会造成卡顿。
+-   如果需要滚动吸顶固定某些元素，推荐使用 css 的粘性布局。插件市场也有其他 js 实现的吸顶插件，但性能不佳，需要时可自行搜索。
+-   在 微信小程序、H5 中，也可以使用 wxs 监听滚动，[参考](https://uniapp.dcloud.io/tutorial/miniprogram-subject#wxs)。
+-   `onBackPress`上不可使用`async`，会导致无法阻止默认返回
+
+```js
+onPageScroll : function(e) {
+	console.log("滚动距离为：" + e.scrollTop);
+},
+```
+
+**`onTabItemTap` 返回的 json 对象说明：**
+
+| 属性     | 类型   | 说明                             |
+| -------- | ------ | -------------------------------- |
+| index    | String | 被点击 tabItem 的序号，从 0 开始 |
+| pagePath | String | 被点击 tabItem 的页面路径        |
+| text     | String | 被点击 tabItem 的按钮文字        |
+
+**注意**
+
+-   onTabItemTap 常用于点击当前 tabitem，滚动或刷新当前页面。如果是点击不同的 tabitem，一定会触发页面切换。
+-   支付宝小程序平台 onTabItemTap 表现为点击非当前 tabitem 后触发，因此不能用于实现点击返回顶部这种操作
+
+```js
+onTabItemTap : function(e) {
+	console.log(e);
+	// e的返回格式为json对象： {"index":0,"text":"首页","pagePath":"pages/index/index"}
+},
+```
+
+**`onNavigationBarButtonTap` 参数说明：**
+
+| 属性  | 类型   | 说明                     |
+| ----- | ------ | ------------------------ |
+| index | Number | 原生标题栏按钮数组的下标 |
+
+```js
+onNavigationBarButtonTap : function (e) {
+	console.log(e);
+	// e的返回格式为json对象：{"text":"测试","index":0}
+}
+```
+
+**`onBackPress` 回调参数对象说明：**
+
+| 属性 | 类型   | 说明                                                                                                                                        |
+| ---- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| from | String | 触发返回行为的来源：'backbutton'——左上角导航栏按钮及安卓返回键；'navigateBack'——uni.navigateBack() 方法。**支付宝小程序端不支持返回此字段** |
+
+```javascript
+export default {
+    data() {
+        return {};
+    },
+    onBackPress(options) {
+        console.log('from:' + options.from);
+    }
+};
+```
+
+**注意**
+
+-   支付宝小程序真机可以监听到非`navigateBack`引发的返回事件（使用小程序开发工具时不会触发`onBackPress`），不可以阻止默认返回行为
+
+
+## 组件生命周期@componentlifecycle
+
+自定义组件支持的生命周期，与 vue 标准组件的生命周期相同。这里没有页面级的 onLoad 等生命周期：
+
+| 函数名        | 说明                                                                                                                                                                                                                        | 平台差异说明   | 最低版本 |
+| :------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------- | :------- |
+| beforeCreate  | 在实例初始化之前被调用。[详见](https://cn.vuejs.org/v2/api/#beforeCreate)                                                                                                                                                   |                |          |
+| created       | 在实例创建完成后被立即调用。[详见](https://cn.vuejs.org/v2/api/#created)                                                                                                                                                    |                |          |
+| beforeMount   | 在挂载开始之前被调用。[详见](https://cn.vuejs.org/v2/api/#beforeMount)                                                                                                                                                      |                |          |
+| mounted       | 挂载到实例上去之后调用。[详见](https://cn.vuejs.org/v2/api/#mounted) 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用`$nextTick`[Vue 官方文档](https://cn.vuejs.org/v2/api/#Vue-nextTick) |                |          |
+| beforeUpdate  | 数据更新时调用，发生在虚拟 DOM 打补丁之前。[详见](https://cn.vuejs.org/v2/api/#beforeUpdate)                                                                                                                                | 仅 H5 平台支持 |          |
+| updated       | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。[详见](https://cn.vuejs.org/v2/api/#updated)                                                                                                             | 仅 H5 平台支持 |          |
+| beforeDestroy | 实例销毁之前调用。在这一步，实例仍然完全可用。[详见](https://cn.vuejs.org/v2/api/#beforeDestroy)                                                                                                                            |                |          |
+| destroyed     | Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。[详见](https://cn.vuejs.org/v2/api/#destroyed)                                                              |                |          |