第三方组件引入

使用 okam 开发时，除了提供便捷的单文件组件开发模式，还对原生小程序自定义组件进行了支持，即 使用 okam 开发时，想引入其他的原生自定义组件也是可以满足的；
提供了 本地引入 、 npm 引入 两种方式；

!> 不支持原生自定义组件开发的小程序版本，也不支持此功能

本地原生自定义组件引入

在本地创建或将第三方原生自定义组件拷贝至 okam 开发框架项目中

  1. .
  2. ├── components
  3. │   │
  4. │   ├── origin
  5. │   │   ├── comp.js    comp 组件逻辑
  6. │   │   ├── comp.json  comp 组件配置
  7. │   │   ├── comp.swan  comp 组件结构
  8. │   │   └── comp.css   comp 组件样式
  9. │   │ 
  10. │   └── Hello.okm  Hello 组件逻辑、配置、结构、样式
  11. │ 
  12. ├── pages
  13. │   ├── home
  14. │   │   └── index.okm        index 页面逻辑、配置、结构、样式
  15. │   └── other
  16. │       ├── detail1.okm      detail1 页面逻辑、配置、结构、样式
  17. │       └── detail2.okm      detail2 页面逻辑、配置、结构、样式
  18. ├── app.js              小程序逻辑、公共配置
  19. └── app.css             小程序公共样式

components/origin 为原生的小程序自定义组件

在 index.okm 引入 components/origin/comp

  1. <template>
  2.     <view class="comp-page">
  3.         <view class="title">原生自定义组件引入</view>
  4.         <origin-comp out-text="依赖 本项目中 原生的组件">
  5.         </origin-comp>
  6.     </view>
  7. </template>
  9. <script>
  10. import OriginComp from '../../components/origin/Comp';
  12. export default {
  13.     config: {
  14.         navigationBarTitleText: '自定义组件示例'
  15.     },
  17.     components: {
  18.         OriginComp
  19.     },
  21.     data: {
  22.     },
  24.     methods: {
  25.     }
  26. };
  27. </script>
  29. <style lang="css">
  30. </style>

npm 原生自定义组件引入

okam 不仅支持 NPM 包的依赖管理和引用, 还可以对第三方原生小程序自定义组件引入支持;

  1. node_modules
  3. min-components
  4. ├── components
  5. │   │
  6. │   ├── one
  7. │   │   ├── comp.js    comp 组件逻辑
  8. │   │   ├── comp.json  comp 组件配置
  9. │   │   ├── comp.swan  comp 组件结构
  10. │   │   └── comp.css   comp 组件样式
  11. │   │ 
  12. │   └── another
  13. │       ├── comp.js    comp 组件逻辑
  14. │       ├── comp.json  comp 组件配置
  15. │       ├── comp.swan  comp 组件结构
  16. │       └── comp.css   comp 组件样式
  17. ├── index.js
  18. └── package.json         包的相关配置： name 、main
  20. src
  21. ├── components
  22. │   │ 
  23. │   └── Hello.okm  Hello 组件逻辑、配置、结构、样式
  24. │ 
  25. ├── pages
  26. │   ├── home
  27. │   │   └── index.okm        index 页面逻辑、配置、结构、样式
  28. │   └── other
  29. │       ├── detail1.okm      detail1 页面逻辑、配置、结构、样式
  30. │       └── detail2.okm      detail2 页面逻辑、配置、结构、样式
  31. ├── app.js              小程序逻辑、公共配置
  32. └── app.css             小程序公共样式

在 index.okm 引入 node_modules 中的组件
假设包名：min-components ，入口文件为 index.js

  1. <template>
  2.     <view class="comp-page">
  3.         <view class="title">原生自定义组件引入</view>
  4.         <origin-npm-comp out-text="依赖 min-componen 中的原生的组件">
  5.         </origin-npm-comp>
  6.     </view>
  7. </template>
  9. <script>
  10. import OriginNpmComp from 'min-component/components/one/comp';
  12. export default {
  13.     config: {
  14.         navigationBarTitleText: '自定义组件示例'
  15.     },
  17.     components: {
  18.         OriginNpmComp
  19.     },
  21.     data: {
  22.     },
  24.     methods: {
  25.     }
  26. };
  27. </script>
  29. <style lang="css">
  30. </style>

npm 其他小程序自定义组件引入

若想在百度小程序中引入微信小程序自定义组件，可通过添加插件及配置项来支持，详见 okam-plugin-wx2swan 使用