• 渐进接入
    • 原生自定义组件支持
      • 原理
      • 例子
    • 原生page支持

    渐进接入

    可参考此demo：mpx渐进接入demo

    mpx并不一定要求用户一定要一次性用上框架的所有东西。

    若是 已有项目 期望接入mpx，不需要对原有代码做全局重写。

    可以保持原有代码不变，新的组件、页面期望使用mpx的某些特性才引入mpx。

    原生自定义组件支持

    有些时候，我们需要在mpx工程中使用原生小程序组件:

    • 通过npm引用安装第三包
    • 将第三方包源码拷贝到本地src目录下

    注：mpx并不限制第三方包的格式。开发者可以自己参考小程序官方的开发第三方自定义组件

    原理

    根据unsingComponents中设定的路径，mpx会去查找包的入口js文件。然后提取入口文件所在的目录中的js json wxss wxml进行编译

    编译带来的好处是，常规的拷贝操作，会造成组件内部的依赖缺失，以及冗余代码被打包。而执行了编译，使得mpx可以精确的收集依赖，这表现在：

    • js文件中的依赖也会被打包，没有被加载的依赖库不会打包，减小体积
    • json文件的usingComponents会被解析，因此原生组件内部可以再引用其他原生组件，甚至是mpx组件
    • wxss中引用外部样式
    • wxml中的图片资源会被打包

    例如使用第三方组件库时，很多组件可能并未使用，如果按照组件库官方给出的使用方式，其实会将整个组件库放进你的项目。而采用mpx这种方式则只会引入你使用了的组件，所以如果你喜欢vant的按钮，iview的输入框，ColorUI的布局，欢迎尝试mpx。（本段内容具有时效性，未来微信可能会有优化，毕竟一开始微信连npm都不支持）

    例子

    文件目录

    1.   node_modules
    2.   |-- npm-a-wx-component // npm安装
    3.   |   --package.json
    4.   |   --src
    5.   |     --index.js
    6.   |     --index.json
    7.   |     --index.wxss
    8.   |     --index.wxml
    9.   |-- npm-b-wx-component // npm安装
    10.   |   --package.json
    11.   |   --src
    12.   |     --index.js
    13.   |     --index.json
    14.   |     --index.wxss
    15.   |     --index.wxml
    16.   component
    17.   │-- container.mpx 
    18.   │-- com-a.mpx 
    19.   |-- src-wx-component // 手动拷贝
    20.   |  --index.js
    21.   |  --index.json
    22.   |  --index.wxss
    23.   |  --index.wxml

    container.mpx

    1. <template>
    2.   <view>
    3.     <!-- mpx组件 -->
    4.     <com-a></com-a>
    5.     <!-- npm安装的原生组件 -->
    6.     <npm-a-wx-component></npm-a-wx-component>
    7.     <!-- 手动拷贝到工程的原生组件 -->
    8.     <src-wx-component></src-wx-component>
    9.   </view>
    10. </template>
    12. <script type="application/json">
    13.   "usingComponents": {
    14.     "com-a": "./com-a",
    15.     "npm-a-wx-component": "npm-a-wx-component",
    16.     "src-wx-component": "./src-wx-component"
    17.   }
    18. </script>

    node_modules/npm-a-wx-component/src/index.wxml

    1. <template>
    2.   <view>
    3.     <view>this is a native component</view>
    4.     <!-- 原生组件内部使用原生组件 -->
    5.     <npm-b-wx-component></npm-b-wx-component>
    6.   </view>
    7. </template>

    node_modules/npm-a-wx-component/src/index.json

    1. {
    2.   "usingComponents": {
    3.     "npm-b-wx-component": "npm-b-wx-component"
    4.   }
    5. }

    原生page支持

    原生自定义组件的支持已经基本能保证第三方UI库和mpx的完美结合，但如果是用户存在已经开发好的小程序，在后续的迭代中发现了mpx想使用，就需要用户手工将4个文件变成mpx文件，这不够友好。

    于是我们提供了对原生页面的支持，允许项目中存在原生小程序文件（wxml,js,json,wxss）和mpx文件，两者可以混合使用，通过webpack的构建将两者完美混合在一起生成最终的dist。

    使用方式和组件相似。