指南 | 支付宝小程序如何使用 Antmove 组件库？

介绍

支付宝小程序支持使用Vant-Aliapp,iView-Aliapp,WeUI-MiniApp,echarts-Aliapp。

安装

通过 npm 安装使用

npm i vant-aliapp -S --production 

或

npm i iview-aliapp -S --production

通过 yarn 安装使用

yarn add vant-aliapp --production

或

yarn add iview-aliapp --production

下载代码使用

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

git clone https://github.com/ant-move/Vant-Aliapp.git

或

git clone https://github.com/ant-move/iView-Aliapp.git

或

git clone https://github.com/ant-move/WeUI-MiniApp.git

或

git clone https://github.com/ant-move/echarts-Aliapp.git

如何使用

alipay-compiler Antmove 支付宝小程序编译插件，主要解决原生支付宝小程序直接引用 Antmove 转换而来组件。如基于 Antmove 转换得到的 iview-aliapp/vant-aliapp 两大组件库，通过 npm 方式引入该组件库后，需使用该命令进行编译才能正常使用（relations 和 selectComponent 功能依赖 Antmove 编译时数据）

使用npm或yarn安装

• 全局安装

npm install antmove -g

• 本地安装

npm install antmove --save

使用

antmove alipay-compiler

将alipay-compiler编译之后的 alipay/vant-app 或 alipay/view-alipay 或alipay/WeUI-AliApp或 alipay/echarts目录拷贝到自己的项目中。然后按照如下的方式使用组件，以 Button 为例，其它组件在对应的文档页查看：

添加需要的组件。在页面的 json 中配置（路径根据自己项目位置配置）：

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

或

"usingComponents": {
    "i-button": "../../alipay/view-alipay/dist/button/index"
}

或

"usingComponents": {
    "i-button": "../../alipay/WeUI-AliApp/example/button/button"
}

或

"usingComponents": {
     "ec-canvas": "../../alipay/echarts/ec-canvas/ec-canvas"
}

在 axml 中使用组件：

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

使用 echarts-Aliapp 时在 axml 中使用组件:

<view class="container">
  <ec-canvas class="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>