介绍

按照小程序的文件规范,app & page & component 的组成部分都是四个文件,js, wxss, wxml, json; 多文件的形式在开发上体验并不是特别友好,使用过vue的同学都知道,单文件的开发模式更内聚,更可维护。因此mpx也提供了单文件开发模式,文件扩展名为 .mpx

通过 webpack 构建工具和 mpx-loader 可以将文件扩展名为 .mpx 的 single file component 转换成小程序所需要的四个文件。

这四个文件对应于单文件中的四个区域

基础例子

  1. <!--对应wxml文件-->
  2. <template>
  3. <view>hello mpx</view>
  4. </template>
  5. <!--对应js文件-->
  6. <script>
  7. </script>
  8. <!--对应wxss文件-->
  9. <style lang="stylus">
  10. </style>
  11. <!--对应json文件-->
  12. <script type="application/json">
  13. </script>