单文件组件开发

okam 采用单文件模式进行组件开发

原生小程序要求：

  • app 实例必须有3个文件：
    app.js、app.json、app.css

  • page 页面一般有4个文件：
    page.js、page.json、page.swan、page.css

  • component 组件一般有4个文件：
    component.js、component.json、component.swan、component.css

  • app实例的3个文件以及page页面的4个文件对应的文件名除后缀名外须同名，具体可参看官方目录结构。

使用单文件组件方式开发，可以使项目文件结构更清晰、简洁，具体可以对比下面目录结构。

目录结构

  • 原生小程序目录结构
  1. .
  2. ├── components
  3. │   ├── Hello.css
  4. │   ├── Hello.js
  5. │   ├── Hello.json
  6. │   └── Hello.swan
  7. ├── pages
  8. │   |
  9. │   ├── home
  10. │   │   ├── index.js    index 页面逻辑
  11. │   │   ├── index.json  index 页面配置
  12. │   │   ├── index.swan  index 页面结构
  13. │   │   └── index.css   index 页面样式
  14. │   │ 
  15. │   └── other
  16. │       ├── detail1.js      detail1 页面逻辑
  17. │       ├── detail1.json    detail1 页面配置
  18. │       ├── detail1.swan    detail1 页面结构
  19. │       └── detail1.css     detail1 页面样式
  20. │       |
  21. │       ├── detail2.js      detail2 页面逻辑
  22. │       ├── detail2.json    detail2 页面配置
  23. │       ├── detail2.swan    detail2 页面结构
  24. │       └── detail2.css     detail2 页面样式
  25. │ 
  26. ├── app.js              小程序逻辑
  27. ├── app.json            小程序公共配置
  28. └── app.css             小程序公共样式
  • okam 项目目录结构
  1. .
  2. └── src
  3.     ├── components
  4.     │   └── Hello.okm            Hello 组件逻辑、配置、结构、样式
  5.     │ 
  6.     ├── pages
  7.     │   ├── home
  8.     │   │   └── index.okm        index 页面逻辑、配置、结构、样式
  9.     │   └── other
  10.     │       ├── detail1.okm      detail1 页面逻辑、配置、结构、样式
  11.     │       └── detail2.okm      detail2 页面逻辑、配置、结构、样式
  12.     ├── app.js              小程序逻辑、公共配置
  13.     └── app.css             小程序公共样式

组件文件结构

okam 开发框架里 Page 跟 自定义组件都属于 Component 范畴，默认对应 *.okm 文件，组件文件后缀名可配置，定义类似于 Vue。

主要分三个部分：

  • template: 对应 page 或者 component 的 swan 模板文件，模板语法可以参考 模板定义
  • script：对应 page 或者 component 的脚本文件 及 配置文件，即 script 部分包含 js 和 配置 json 文件两部分内容
    • lang：可通过该属性自定义脚本使用的语言，比如使用 ts: <script lang="typescript"></script>
    • config：对应 json 配置文件
  • style: 对应 page 或者 component 的样式文件
    • lang: 可通过该属性自定义样式的预处理语言
  1. <template>
  2.    <!-- 结构 -->
  3. </template>
  5. <script>
  6. export default {
  7.     // 配置等价于原生的 json 配置
  8.     config: {
  9.     },
  11.     // 数据
  12.     data: {
  13.     },
  15.     // 逻辑
  16.     method: {
  17.     }
  18. };
  19. </script>
  21. <style lang="stylus">
  22.     /* 样式 */
  23. </style>

组件文件后缀名自定义

  • 组件文件后缀名默认为 .okm，可在构建配置文件 swan.config.js 通过 component.extname 配置其它后缀
  1. {
  2.     component: {
  3.         // 配置为 .vue 后缀
  4.         extname: 'vue'
  5.     }
  6. }