支付宝小程序如何使用 Antmove 小程序组件库

介绍

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

编译命令：antmove alipay-compiler

使用概览

第一步

引入组件库到项目中（推荐直接拷贝到项目中）

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

如上两个目录是必须的，也可以直接拷贝组件代码整体支付宝小程序使用 Antmove 组件库指南 - 图5，小程序组件代码可整体拷贝到项目中，小程序打包上线会按需打包，所以不用担心引用了不必要的组件

第二步

执行 Antmove 编译命令

运行如下命令（运行前请先安装 antmove 工具）

  1. antmove alipay-compiler

使用详情

组件库代码引入

直接下载代码使用

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

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

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

通过 npm 安装使用

  1. npm i vant-aliapp -S --production

组件使用示例

json 组件依赖引入

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

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

  1. "usingComponents": {
  2.     "i-button": "../../alipay/vant-app/dist/button/index"
  3. }

npm 安装方式使用绝对路径

  1. "usingComponents": {
  2.     "i-button": "../../alipay/vant-app/dist/button/index"
  3. }

axml 中使用组件：

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

执行 alipay-compiler 命令

  • antmove alipay-compiler

参考链接