渐进接入

可参考此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>
  11. <script type="application/json">
  12. "usingComponents": {
  13. "com-a": "./com-a",
  14. "npm-a-wx-component": "npm-a-wx-component",
  15. "src-wx-component": "./src-wx-component"
  16. }
  17. </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。

使用方式和组件相似。