# 如何使用 Antmove 小程序组件库

# 介绍

Antmove 可以将微信小程序转换为钉钉小程序,同时支持 Vant/iView 小程序组件库的引用,那么原生钉钉小程序是否可以使用 Antmove 版本的小程序组件呢?答案是肯定的,但需要注意的是 Antmove 是编译时的解决方案,所以直接使用组件库也需要运行一次编译命令。

编译命令:antmove alipay-compiler

# 使用概览

# 第一步

# 引入组件库到项目中(推荐直接拷贝到项目中)

  • __antmove 目录 - antmove 编译代码产物
  • dist 目录 - vant 小程序组件代码

如上两个目录是必须的,也可以直接拷贝组件代码整体 (opens new window),小程序组件代码可整体拷贝到项目中,小程序打包上线会按需打包,所以不用担心引用了不必要的组件

# 第二步

# 执行 Antmove 编译命令

运行如下命令(运行前请先安装 antmove 工具)

antmove alipay-compiler

# 使用详情

# 组件库代码引入

# 直接下载代码使用

直接通过 git 下载 Vant Aliapp 源代码,并将 dd/vant-app 代码拷贝到自己的项目中。

git clone https://github.com/ant-move/Vant-Aliapp.git
  • dist - 小程序组件源码
  • __antmove - (这是 Antmove 处理代码,通过它将钉钉小程序和小程序组件连接起来)

dist 和 __antmove 拷贝到小程序项目中要保持目录同级。

# 通过 npm 安装使用

npm i vant-aliapp -S --production 

# 组件使用示例

# json 组件依赖引入

以 Button 为例,其它组件在对应的文档页查看,在引入小程序页面的 json 中配置(路径根据自己项目位置配置):

# 拷贝源码到项目中用相对路径引入

"usingComponents": {
    "i-button": "../../dd/vant-app/dist/button/index"
} 

# npm 安装方式使用绝对路径

"usingComponents": {
    "i-button": "vant-app/dist/button/index"
} 

# axml 中使用组件:

<i-button type="primary" onClick="handleClick">这是一个按钮</i-button>

# 执行 alipay-compiler 命令

  • antmove alipay-compiler

# 参考链接