手把手教你系列- 实现多态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对于方法进行增强,获得更好的体验。