手把手教你系列- 实现多态API

目前chameleon-api提供的是主要的跨端方法，如果你在里面没有找到需要的方法，还可以使用多态协议接口多态来进行扩展。今天我们就手把手来实现一个多态api接口。

举例-创建一个获取一些信息的跨端接口

我们可以在项目根目录下执行cml init component，选择Polymorphic function，输入文件名称，例如getSomeInfo，生成如下文件结构

  1. ├── components
  2. │   ├── getSomeInfo   
  3. │   │   ├── getSomeInfo.interface

文件内容如下：

  1. <script cml-type="interface">
  2. interface GetSomeInfoInterface {
  3.   type Info = {
  4.     env: String,
  5.     extra: String,
  6.     myInput: String,
  7.   }
  8.   getSomeInfo(input: String): Info;
  9. }
  10. </script>
  11. <script cml-type="web">
  12. class Method implements GetSomeInfoInterface {
  13.   getSomeInfo(input) {
  14.     // 一些获取的操作，得到信息
  15.     return {
  16.       env: 'web',
  17.       extra: '其他的信息',
  18.       myInput: input
  19.     }
  20.   }
  21. }
  22. export default new Method();
  23. </script>
  24. <script cml-type="weex">
  25. class Method implements GetSomeInfoInterface {
  26.   getSomeInfo(input) {
  27.     // 一些获取的操作，得到信息
  28.     return {
  29.       env: 'weex',
  30.       extra: '其他的信息',
  31.       myInput: input
  32.     }
  33.   }
  34. }
  35. export default new Method();
  36. </script>
  37. <script cml-type="wx">
  38. class Method implements GetSomeInfoInterface {
  39.   getSomeInfo(input) {
  40.     // 一些获取的操作，得到信息
  41.     return {
  42.       env: 'wx',
  43.       extra: '其他的信息',
  44.       myInput: input
  45.     }
  46.   }
  47. }
  48. export default new Method();
  49. </script>
  50. <script cml-type="alipay">
  51. class Method implements GetSomeInfoInterface {
  52.   getSomeInfo(input) {
  53.     // 一些获取的操作，得到信息
  54.     return {
  55.       env: 'alipay',
  56.       extra: '其他的信息',
  57.       myInput: input
  58.     }
  59.   }
  60. }
  61. export default new Method();
  62. </script>
  63. <script cml-type="baidu">
  64. class Method implements GetSomeInfoInterface {
  65.   getSomeInfo(input) {
  66.     // 一些获取的操作，得到信息
  67.     return {
  68.       env: 'baidu',
  69.       extra: '其他的信息',
  70.       myInput: input
  71.     }
  72.   }
  73. }
  74. export default new Method();
  75. </script>

在interface文件中，在cml-type="interface"部分规定入参和出参的具体类型。在cml-type="web|weex|wx|alipay|baidu"等各自端中实现对应方法。即可实现一个可以跨端使用的多态接口。

使用多态接口

在你的项目中可以通过路径引用到该方法，进行使用。

  1. import myApi from 'components/getSomeInfo/getSomeInfo.interface'
  2. const someInfo = myApi.getSomeInfo();
  3. // 对获得的信息进行使用

值得一提的是，你可以在每个端自由引入在该端所需的库（你的项目库，npm包，jsbridge等），尽情丰富方法的实现，如在web端，当网页在客户端外的时候，你可以使用普通方法进行实现；如果该网页也会出现在客户端内，你可以使用jsbridge对于方法进行增强，获得更好的体验。