{{$page.frontmatter.heroText}}
+{{$frontmatter.heroText}}
- {{$page.frontmatter.tagline}} + {{$frontmatter.tagline}}
-
-
- +
-
{{item.title}}
{{item.details}}
@@ -39,26 +39,26 @@
+ width="410"
+ height="712"
+ src="https://dpubstatic.udache.com/static/dpubimg/Vx5n_3YCtP/anli_pic_phone.png"
+ alt="phone"
+ loading="lazy" />
{{$page.frontmatter.threeSection.title}}
+{{$frontmatter.threeSection.title}}
扫码体验Mpx版本的
@@ -88,13 +88,13 @@
{{$page.frontmatter.fourSection.title}} {{$frontmatter.fourSection && $frontmatter.fourSection.title}}
- {{$page.frontmatter.fourSection.details}}
+ {{$frontmatter.fourSection.details}}
{{$page.frontmatter.fiveSection.title}} {{$frontmatter.fiveSection.title}}
- {{$page.frontmatter.fiveSection.details}}
+ {{$frontmatter.fiveSection.details}}
{{$page.frontmatter.sixSection.title}} {{$frontmatter.sixSection.title}} {{$page.frontmatter.sevenSection.title}} {{$frontmatter.sevenSection.title}}
@@ -184,7 +184,7 @@
-
-
- 一款具有优秀开发体验和深度性能优化的增强型小程序开发框架。
-
@@ -22,9 +22,9 @@
-
-
-
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
-
-
-#### 扫码进入QQ群
-
-
-
-图片因github网络问题导致不可见的朋友可以点击该链接：https://s.didi.cn/rod
-
-## 招聘
-
-滴滴出行小程序团队绝赞招人中，欢迎各位前端同学加入我们，开发日活过千万的头部小程序应用滴滴出行，并参与Mpx框架技术建设。
-
-感兴趣的同学请将简历投递至[donghongping@didiglobal.com](donghongping@didiglobal.com)，社招校招均可~
diff --git a/docs/migrate.md b/docs/migrate.md
deleted file mode 100644
index 21fee26f08..0000000000
--- a/docs/migrate.md
+++ /dev/null
@@ -1,100 +0,0 @@
-# 2.0迁移指南
-
-mpx2.0是完全兼容1.0版本的，显著的区别是支持了跨小程序平台的支持，
-
-新创建的项目不用关心迁移问题，直接开发即可，使用1.0时期的包等都不受影响。
-
-需要注意的一点是对小程序提供的API调用，我们使用了@mpxjs/api-proxy来抹平差异，同时之前的promisify被整合到了这个包里，所以1.x升级2.x需要替换@mpxjs/promisify为@mpxjs/api-proxy，使用方式为 `mpx.use(apiProxy, {usePromise: true})` ，同时，所有的api调用应从wx.xxx变更为mpx.xxx，比如wx.navigateTo写为mpx.navigateTo，**参数保持和微信一致，平台差异方面api-proxy做了抹平**。
-
-老项目可以有两种升级方式：
-
-## 拷贝升级
-
-如果你的项目是在1.0时期利用脚手架生成的，希望体验2.0的新特性，最简单的方式是升级cli工具后新创建一个项目，删掉src部分，复制老项目的src即可。
-
-一个有所变化的地方在于，新项目的打开项目方式发生了一些变化，原本用微信开发者工具打开项目目录变为了用开发者工具打开构建结果目录（dist或dist/wx，取决于是否用跨平台构建），变化的原因详情见下方 [附录-文件结构区别](#文件结构区别) 部分。
-
-## 手工升级
-
-如果你的项目之前就是手工配置的或者被个性化再次修改过或者对webpack配置非常熟练了解，也可以按照以下内容参考自行手工升级。
-
-### 依赖升级
-
-* `@mpxjs/core`由1.x升级至2.0
-* `@mpxjs/webpack-plugin`由1.x升级至2.0
-
-### 依赖变更
-
-* `@mpxjs/promisify`废弃，使用`@mpxjs/api-proxy`代替
-* `@mpxjs/url-loader`废弃，合入到`@mpxjs/webpack-plugin`中维护
-
-### webpack配置变更
-
-在2.0版本中，为了更好地处理小程序中template和wxs的引用，我们重写了url-loader和file-loader，并且调整了原有的wxs-loader的工作机制，这会导致项目的build/webpack.base.conf.js中的module.rules配置发生一定的变化，调整规则如下：
-
-```js
-const webpackConf = {
- module: {
- rules: [
- {
- test: /\.mpx$/,
- use: MpxWebpackPlugin.loader({
- transRpx: {
- mode: 'only',
- comment: 'use rpx',
- include: resolve('src')
- }
- })
- },
- {
- test: /\.js$/,
- loader: 'babel-loader',
- include: [resolve('src'), resolve('test'), resolve('node_modules/@mpxjs')]
- },
- {
- test: /\.json$/,
- resourceQuery: /__component/,
- type: 'javascript/auto'
- },
- // 1.x版本中的配置
- // {
- // test: /(\.wxs|\.sjs|\.filter\.js)$/,
- // use: MpxWebpackPlugin.wxsLoader(),
- // type: 'javascript/auto',
- // issuer: /(\.wxml|\.axml|\.swan|\.mpx|\.th)$/
- // },
- // {
- // test: /\.(png|jpe?g|gif|svg)$/,
- // loader: '@mpxjs/url-loader',
- // options: {
- // name: 'img/[name].[ext]',
- // limit: 10000
- // }
- // },
-
- // 2.0版本后的配置
- {
- test: /\.(wxs|sjs|filter\.js)$/,
- loader: MpxWebpackPlugin.wxsPreLoader(),
- enforce: 'pre'
- },
- {
- test: /\.(png|jpe?g|gif|svg)$/,
- loader: MpxWebpackPlugin.urlLoader({
- name: 'img/[name].[ext]'
- })
- }
- ]
- }
-}
-```
-
-## 附录
-
-#### 文件结构区别
-
-使用@mpxjs/cli脚手架生成的项目在1.0版本时期和2.0版本时期有些区别。
-
-早先因社区同学的建议使用了在项目根目录下的project.config.json文件中通过指定miniprogramRoot字段为dist，好处是不用复制，在微信小程序开发工具里可以用编辑器直接修改保存project.config.json文件。但跨小程序平台支持下，我们可能会在dist文件夹下再深一个层级区分不同小程序比如会有/dist/wx，/dist/ali，/dist/swan这样，出于打开项目体验的一致性等方面考量，决定这个微信特有的文件还是复制进构建结果里，不通过miniprogramRoot指定。
-
-因此对于微信小程序的开发，1.0时期项目直接拷贝src到迁移2.0生成的新项目需要注意打开方式由打开项目目录改为打开项目构建生成的dist目录，如果是要用到跨平台特性（npm run build:cross），则要打开/dist/wx目录。
diff --git a/docs/platform.md b/docs/platform.md
deleted file mode 100644
index 306ba2181a..0000000000
--- a/docs/platform.md
+++ /dev/null
@@ -1,434 +0,0 @@
-# 多平台支持
-
-目前mpx支持了微信、支付宝、百度、qq、头条小程序平台。
-
-## template增强特性
-
-不同平台上的模板增强指令按照平台的指令风格进行设计，文档和代码示例为了方便统一采用微信小程序下的书写方式。
-
-模板增强指令对应表：
-
-增强指令|微信|支付宝|百度|qq|头条
-----|----|----|----|----|----
-双向绑定|wx:model|a:model|s-model|qq:model|tt:model
-双向绑定辅助属性|wx:model-prop|a:model-prop|s-model-prop|qq:model-prop|tt:model-prop
-双向绑定辅助属性|wx:model-event|a:model-event|s-model-event|qq:model-event|tt:model-event
-双向绑定辅助属性|wx:model-value-path|a:model-value-path|s-model-value-path|qq:model-value-path|tt:model-value-path
-动态样式绑定|wx:class|a:class|s-class|qq:class|暂不支持
-动态样式绑定|wx:style|a:style|s-style|qq:style|暂不支持
-获取节点/组件实例|wx:ref|a:ref|s-ref|qq:ref|tt:ref
-显示/隐藏|wx:show|a:show|s-show|qq:show|tt:show
-
-## script增强特性
-
-增强字段|微信|支付宝|百度|qq|头条
-----|----|----|----|----|----
-computed|支持|支持|支持|支持|部分支持，无法作为props传递(待头条修复生命周期执行顺序可完整支持)
-watch|支持|支持|支持|支持|支持
-mixins|支持|支持|支持|支持|支持
-
-## style增强特性
-
-无平台差异
-
-## json增强特性
-
-增强字段|微信|支付宝|百度|qq|头条
-----|----|----|----|----|----
-packages|支持|支持|支持|支持|部分支持，无法分包
-
-
-# 跨平台编译
-
-自2.0版本开始，mpx开始支持跨小程序平台编译，不同于常规跨平台框架重新定义一套DSL的方式，mpx支持基于现有平台的源码编译为其他已支持平台的目标代码。跨平台编译能力依赖于mpx的多平台支持，目前mpx已经支持将微信小程序跨平台编译为支付宝、百度、qq和头条小程序。
-
-## 使用方法
-
-如果你是使用`mpx init xxx`新生成的项目，package.json里script部分有`npm run build:cross`，直接执行`npm run build:cross`（watch同理），如果仅需构建某几个平台的，可以修改该script，按已有的格式删除或增添某些某些平台
-
-如果你是自行搭建的mpx项目，你只需要进行简单的配置修改，打开项目的webpack配置，找到@mpxjs/webpack-plugin的声明位置，传入mode和srcMode参数即可，示例如下
-
-```js
-// 下面的示例配置能够将mpx微信小程序源码编译为支付宝小程序
-new MpxwebpackPlugin({
- // mode为mpx编译的目标平台，可选值有(wx|ali|swan|qq|tt)
- mode: 'ali',
- // srcMode为mpx编译的源码平台，目前仅支持wx
- srcMode: 'wx'
-})
-```
-
-## 跨平台差异抹平
-
-为了实现小程序的跨平台编译，我们在编译和运行时做了很多工作以抹平小程序开发中各个方面的跨平台差异
-
-### 模板语法差异抹平
-
-对于通用指令/事件处理的差异，mpx提供了统一的编译转换抹平操作；而对于平台组件和组件属性的差异，我们也在力所能及的范围内进行了转换抹平，对于平台差异性过大无法转换的部分会在编译阶段报错指出。
-
-### 组件/页面对象差异抹平
-
-不同平台间组件/页面对象的差异主要体现在生命周期上，我们在支持多平台能力时已经将不同平台的生命周期映射到mpx框架的一套内部生命周期中，基于这个统一的映射，不同平台的生命周期差异也得到了抹平。
-
-此外，我们还进行了一系列运行时增强来模拟微信平台中提供而其他平台中未提供的能力，例如：
-* 在支付宝组件实例中提供了this.triggerEvent方法模拟微信中的自定义组件事件；
-* 提供了this.selectComponent/this.selectAllComponents方法模拟微信中获取子组件实例的能力；
-* 重写了createSelectorQuery方法抹平了微信/支付宝平台间的使用差异；
-* 转换抹平了微信/支付宝中properties定义的差异；
-* 利用mpx本身的数据响应能力模拟了微信中的observers/property observer能力等;
-* 提供了this.getRelationNodes方法并支持了微信中组件间关系relations的能力
-
-对于原生小程序组件的转换，还会进行一些额外的抹平，已兼容一些已有的原生组件库，例如：
-* 将支付宝组件中的props数据挂载到this.data中以模拟微信平台中的表现；
-* 利用mpx本身的mixins能力模拟微信中的behaviors能力。
-
-对于一些无法进行模拟的跨平台差异，会在运行时进行检测并报错指出，例如微信转支付宝时使用moved生命周期等。
-
-### json配置差异抹平
-
-类似于模板语法，会在编译阶段进行转换抹平，无法转换的部分会在编译阶段报错指出。
-
-### api调用差异抹平
-
-对于api调用，mpx提供了一个api调用代理插件来抹平跨平台api调用的差异，使用时需要在项目中安装使用`@mpxjs/api-proxy`，并且在调用小程序api时统一使用mpx对象进行调用，示例如下：
-
-```js
-// 请在app.mpx中安装mpx插件
-import mpx, { createApp } from '@mpxjs/core'
-import apiProxy from '@mpxjs/api-proxy'
-
-mpx.use(apiProxy, {
- // 开启api promisify
- usePromise: true
-})
-
-createApp({
- onLaunch() {
- // 调用小程序api时使用mpx.xxx，而不要使用wx.xxx或者my.xxx
- mpx.request({url: 'xxx'})
- }
-})
-```
-
-对于无法转换抹平的api调用会在运行时阶段报错指出。
-
-### webview bridge差异抹平
-
-对于不同平台中webview bridge的调用，我们封装了一个`@mpxjs/webview-bridge`包，用于抹平不同小程序平台中webview bridge的差异，简单使用示例如下：
-
-```js
-import mpx from '@mpxjs/webview-bridge'
-
-mpx.navigateBack()
-```
-
-对于无法转换抹平的bridge调用会在运行时阶段报错指出，详细使用指南请查看[webview-bridge](/extend/index.md#webview-bridge)
-
-## 跨平台条件编译
-
-Mpx跨平台编译的原则在于，`能转则转，转不了则报错提示`，对于无法抹平差异的部分，我们提供了完善的跨平台条件编译机制便于用户处理因平台差异而无法相互转换的部分，也能够用于实现具有平台差异性的业务逻辑。
-
-mpx中我们支持了三种维度的条件编译，分别是文件维度，区块维度和代码维度，其中，文件维度和区块维度主要用于处理一些大块的平台差异性逻辑，而代码维度主要用于处理一些局部简单的平台差异。
-
-### 文件维度条件编译
-
-文件维度条件编译简单的来说就是文件为维度进行跨平台差异代码的编写，例如在微信->支付宝的项目中存在一个业务地图组件map.mpx，由于微信和支付宝中的原生地图组件标准差异非常大，无法通过框架转译方式直接进行跨平台输出，这时你可以在相同的位置新建一个map.ali.mpx，在其中使用支付宝的技术标准进行开发，编译系统会根据当前编译的mode来加载对应模块，当mode为ali时，会优先加载map.ali.mpx，反之则会加载map.mpx。
-
-文件维度条件编译能够与webpack alias结合使用，对于npm包的文件我们并不方便在原本的文件位置创建.ali的条件编译文件，但我们可以通过webpack alias在相同位置创建一个`虚拟的`.ali文件，并将其指向项目中的其他文件位置。
-
-```js
- // 对于npm包中的文件依赖
- import npmModule from 'somePackage/lib/index'
-
- // 配置以下alias后，当mode为ali时，会优先加载项目目录中定义的projectRoot/somePackage/lib/index文件
- const webpackConf = {
- resolve: {
- alias: {
- 'somePackage/lib/index.ali': 'projectRoot/somePackage/lib/index'
- }
- }
- }
-```
-
-### 区块维度条件编译
-
-在.mpx单文件中一般存在template、js、stlye、json四个区块，mpx的编译系统支持以区块为维度进行条件编译，只需在区块标签中添加`mode`属性定义该区块的目标平台即可，示例如下：
-
-```html
-
-
-
- 组件生命周期扩展
-
-> 2.5.x 起不建议使用
-> 2.6.x 将废弃
-> 早期小程序本身缺乏组件感应所在页面的状态的能力做的增强，在小程序本身提供了 pageLifetimes 后失去意义且有不必要的性能开销，2.5.x为了避免业务异常，换手段hack实现了这两个方法，但同时有在控制台提示不要再使用，2.6.x将彻底去掉。
-
-除了小程序自定义组件本身的生命周期外，`mpx`为组件本身提供了两个生命周期钩子，`pageShow`和`pageHide`，用于监听当前组件所属页面的显示或隐藏状态。
-
-```html
-
-
-