自定义组件互转

okam-plugin-wx2swan

当在百度小程序中想引入已有的微信小程序自定义时组件时 ，可通过引入及配置此插件来进行转换，其中，微信小程序自定义组件可为 微信官方支持的开发第三方自定义组件,
也可为常规的 npm 包的写法；

!> 限制：在百度小程序中引入微信自定义组件，不支持 wxs、模板引用，只做了语法上的转换；swan框架、API和组件功能上的差异，待原生小程序层支持中

安装

npm install okam-plugin-wx2swan --save-dev

配置

swan.config.js 加上如下配置：

  1. {
  3.     processors: {
  4.         // babel: {
  5.         //    extnames: ['js']
  6.         // },
  8.         wx2swan: {
  9.             // 注册 及 配置 wxml、wxss 文件转换
  10.             extnames: ['wxml', 'wxss']
  11.         }
  12.     },
  13.     rules: [
  14.         {
  15.             // 配置 js 文件转换
  16.             match(file) {
  17.                 return file.isNpmWxCompScript;
  18.             },
  19.             processors: ['wx2swan']
  20.         }
  21.     ]
  23. }

引用

page 中的引入方式和其他自定义组件引入相同；

  1. node_modules
  3. min-components
  4. ├── components
  5. │   │
  6. │   ├── one
  7. │   │   ├── comp.js    comp 组件逻辑
  8. │   │   ├── comp.json  comp 组件配置
  9. │   │   ├── comp.wxml  comp 组件结构
  10. │   │   └── comp.wxss   comp 组件样式
  11. │   │ 
  12. │   └── another
  13. │       ├── comp.js    comp 组件逻辑
  14. │       ├── comp.json  comp 组件配置
  15. │       ├── comp.wxml  comp 组件结构
  16. │       └── comp.wxss   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-wx-comp out-text="百度小程序中依赖 min-componen 中的微信原生的组件">
  5.         </origin-npm-wx-comp>
  6.     </view>
  7. </template>
  9. <script>
  10. import OriginNpmWXComp from 'min-component/components/one/comp';
  12. export default {
  13.     config: {
  14.         navigationBarTitleText: '自定义组件示例'
  15.     },
  17.     components: {
  18.         OriginNpmWXComp
  19.     },
  21.     data: {
  22.     },
  24.     methods: {
  25.     }
  26. };
  27. </script>
  29. <style lang="css">
  30. </style>