支付寶小程序擴(kuò)展能力 AntBuilder 安裝運(yùn)行手冊(cè)

AntBuilder 介紹

AntBuilder 是支付寶行業(yè)技術(shù)部產(chǎn)出的官方小程序框架，結(jié)合行業(yè)場(chǎng)景沉淀了多種頁(yè)面組件，同時(shí)內(nèi)嵌多種常用模塊及能力，用于幫助各行業(yè)合作伙伴快速上手開(kāi)發(fā)自己的小程序。同時(shí)該框架也十分適合將現(xiàn)有的 H5 頁(yè)面快速低成本遷移至支付寶小程序，以便業(yè)務(wù)主更快速體驗(yàn)到小程序運(yùn)營(yíng)的魅力。

注意：AntBuilder 目前僅支持企業(yè)系統(tǒng)服務(wù)商（ISV）。

請(qǐng)需要接入的企業(yè)系統(tǒng)服務(wù)商（ISV）掃碼加入釘釘群，獲取官方技術(shù)指導(dǎo)和支持。

獲取源碼&安裝包

1. 企業(yè)賬號(hào)登錄支付寶，搜索 伙伴通 進(jìn)入服務(wù)，點(diǎn)擊 AntBuilder > 立即獲取。

1. 掃描上方二維碼，進(jìn)群聯(lián)系官方技術(shù)人員獲取支持。
2. 申請(qǐng)后獲取到服務(wù)碼，該服務(wù)碼在后續(xù)安裝軟件的時(shí)用于軟件激活用。

???

安裝工具

下載安裝工具，支持 Windows / Linux / MAC。

Linux 安裝

解壓安裝文件，進(jìn)入目錄執(zhí)行。

sh install.sh

Windows 安裝

解壓安裝文件，進(jìn)入目錄雙擊 install.bat 文件執(zhí)行。

啟動(dòng)安裝工具

通過(guò)瀏覽器訪問(wèn)服務(wù)器 http://服務(wù)器ip:16888，或登錄到服務(wù)器上訪問(wèn) http://127.0.0.1:16888 打開(kāi)主頁(yè)，輸入從郵件獲取的激活碼。

注意：如果用外部機(jī)器訪問(wèn)，且目標(biāo)服務(wù)器開(kāi)啟了防火墻，注意檢查端口是否允許訪問(wèn)。

?

啟動(dòng)程序

安裝和啟動(dòng)小程序后臺(tái)、管理后臺(tái)（任意順序）。

注意：檢測(cè)端口和數(shù)據(jù)庫(kù)連接，數(shù)據(jù)庫(kù)和加密密鑰在兩個(gè)系統(tǒng)里面需要保持一致。

如果數(shù)據(jù)庫(kù)和表結(jié)構(gòu)已經(jīng)創(chuàng)建的情況下，不用重復(fù)創(chuàng)建（初始化數(shù)據(jù)去掉勾選）。

注意事項(xiàng)

• web-min 小程序后臺(tái)工程需要部署在 https 域名對(duì)應(yīng)的服務(wù)器上，暴露外網(wǎng)訪問(wèn)權(quán)限；
• web-management 管理后臺(tái)需要部署在內(nèi)網(wǎng)，且和 web-min 需要使用同一個(gè)數(shù)據(jù)庫(kù)。

啟動(dòng)系統(tǒng)

創(chuàng)建小程序應(yīng)用

參見(jiàn) 創(chuàng)建小程序。

配置小程序公私鑰

進(jìn)入小程序詳情頁(yè)，配置并記錄 支付寶公鑰、應(yīng)用公鑰、應(yīng)用私鑰 備用。

添加小程序開(kāi)發(fā)者

添加開(kāi)發(fā)人員的支付寶賬號(hào)為開(kāi)發(fā)者。被添加的賬號(hào)需登錄支付寶，在 服務(wù)提醒 中，確認(rèn)添加申請(qǐng)。

添加域名白名單

• 服務(wù)器域名白名單添加 https 域名；
• H5 域名配置添加頁(yè)面地址和后臺(tái)地址。

?

3.5 管理員配置小程序

1. 新建小程序。??

1. 配置小程序。

• 應(yīng)用 ID：小程序的 APPID，在 開(kāi)放平臺(tái) > 控制臺(tái) 中可獲取；

• 支付寶公鑰：步驟 3.2 中配置的小程序應(yīng)用的支付寶公鑰；

• 應(yīng)用私鑰：步驟 3.2 中配置的小程序應(yīng)用的應(yīng)用私鑰。

說(shuō)明：支付寶公鑰是從之前的配置那里拷貝下來(lái)的，應(yīng)用私鑰是本地生成后復(fù)制過(guò)來(lái)的。

1. 點(diǎn)擊 模板管理 > 新建模板，可以先創(chuàng)建一個(gè)模板測(cè)試。點(diǎn)擊 上架，可用支付寶測(cè)試。

小程序效果調(diào)試及預(yù)覽

前提條件

• 已從支付寶技術(shù)人員處獲取到小程序源碼包（onemini.zip）；
• 已添加小程序開(kāi)發(fā)者；
• 已添加域名白名單；
• 已創(chuàng)建小程序應(yīng)用且模板已存在。 ??

操作步驟

1. 登錄并訪問(wèn) 小程序在線開(kāi)發(fā)平臺(tái)。??
2. 點(diǎn)擊 添加新項(xiàng)目 > 導(dǎo)入已有項(xiàng)目。
3. 關(guān)聯(lián)應(yīng)用，選擇前面已創(chuàng)建的小程序。
4. 更改 ext.json 文件中的小程序訪問(wèn)地址為 web-mini 指定的域名，查看配置的小程序效果。
5. 真機(jī)預(yù)覽。

系統(tǒng)部署圖

一共有三個(gè)系統(tǒng)：

• 原有的H5頁(yè)面
• 剛安裝的 web-mini
• 剛安裝 web-mangement

原有 H5 系統(tǒng)獲取當(dāng)前登錄用戶方法

請(qǐng)參見(jiàn) AntBuilder 用戶信息對(duì)接指南。

發(fā)送消息功能

請(qǐng)參見(jiàn) 消息組件使用手冊(cè)。

支付功能接入

前提條件

在應(yīng)用的開(kāi)發(fā)配置的功能列表中已添加 當(dāng)面付 功能包（小程序應(yīng)用中請(qǐng)?zhí)砑?小程序支付 功能包），并完成簽約。

服務(wù)端接入

對(duì)接支付寶開(kāi)放平臺(tái)統(tǒng)一收單交易創(chuàng)建接口。

前端接入

接入示例

<h1>點(diǎn)擊以下按鈕喚起收銀臺(tái)支付</h1>
<a href="javascript:void(0)" class="btn tradenoPay">支付寶交易號(hào)喚起支付</a>
<script>function ready(callback) {
  // 如果jsbridge已經(jīng)注入則直接調(diào)用
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // 如果沒(méi)有注入則監(jiān)聽(tīng)注入的事件
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}
ready(function(){
  document.querySelector('.tradeno').addEventListener('click', function() {
    AlipayJSBridge.call("tradePay", {
      //此處交易號(hào)為第一步接口調(diào)用返回的trade_no
      tradeNO: "201802282100100427058809844"
    }, function(result) {
      alert(JSON.stringify(result));
    });
  });
});
</script>

常見(jiàn)問(wèn)題

Q1：微信公眾號(hào) H5 遷移，接入 AntBuilder 后，原有系統(tǒng)需要求修改什么？

• 一般需要將微信公眾號(hào)的登錄改為支付寶登錄；
• 微信支付改為支付寶JSAPI喚起收銀臺(tái)支付。

Q2：web-mini 和 web-management 都需要 https 的域名訪問(wèn)嗎？

推薦 web-mini 對(duì)公網(wǎng)暴露在 https 域名上。web-management 放在內(nèi)網(wǎng)環(huán)境，僅用于內(nèi)部員工登錄使用。但是這兩個(gè)服務(wù)需要使用相同的數(shù)據(jù)庫(kù)。

Q3：如何確認(rèn) web-mini 和 web-management 都已經(jīng)啟動(dòng)？

• web-mini：訪問(wèn) web-mini 地址，出現(xiàn)顯示 hello alipay 的頁(yè)面。
• web-management：訪問(wèn) web-management 地址，出現(xiàn)登錄界面。

Q4：拿到前端代碼后如何使用？

參考 步驟 3.6，正常情況下，前端代碼無(wú)需改動(dòng)，只需在 web-management 管理后臺(tái)配置頁(yè)面即可立即生效。