1. 程式人生 > >支付寶小程式科普(首發)

支付寶小程式科普(首發)

前言

距離微信小程式上線已經過去一週的時間了,網上關於微信小程式的文章非常多,這裡不再對其進行介紹。在微信小程式上線後,網上流傳著一些文章說支付寶也在搞小程式了,但是並沒有一篇文章介紹過支付寶小程式。作為一隻在16年7月份就開始接觸支付寶小程式的程式猿,我打算給大家科普一下。

什麼是支付寶小程式?

  • Hybrid模式,通過web相關技術,靈活構建移動端App
  • 通過和Native協同(jsBridge),提升web能力邊界和體驗
  • 快取HTML/JS/CSS/圖片等資源,執行時只傳輸必要的動態資料,儘可能降低對網路的依賴

支付寶小程式的前世今生

支付寶小程式原名Hybrid離線包,大概是在16年11月更名為支付寶小程式

支付寶小程式提供了哪些介面?

支付寶內部有一個小程式的JSAPI文件,由於還沒有對外公開,我這裡也不便寫出來。

小程式的介面大部分都可以直接通過JSAPI直接呼叫,部分介面需要開通許可權。

github上面有一個容器介面文件,這裡面所介紹的介面全部收錄到了支付寶小程式介面中(除此之外,又新增了一些介面)

支付寶小程式的介面只需要在支付寶客戶端裡面執行頁面就可以使用了(比如掃一掃頁面的二維碼)。

支付寶小程式介面呼叫方式

bridge使用方法一

<h1>請點選標題檢視效果</h1>
<script src="https://as.alipayobjects.com/g/component/antbridge/1.1.1/antbridge.min.js"
>
</script> <script> ant.on('titleClick', function (e) { alert('title clicked') }); </script>

bridge使用方法二

<h1>請點選標題檢視效果</h1>
<script>
    document.addEventListener('titleClick', function (e) {
        alert('title clicked')
    }, false);
</script
>

第一種方法需要引入一個js檔案,而小程式官網上面已經說明這個js檔案已經包含在容器中,使用<script src="https://as.alipayobjects.com/g/component/antbridge/1.1.1/antbridge.min.js"></script>不會產生網路流量。所以兩種使用方法我覺得並沒有什麼區別。

如何入駐?

小程式官網上介紹了入駐流程,是比較容易的(認證、籤協議就可以了)。具體的流程就不說了。目前除了支付寶內部外,只對支付寶的第三方合作伙伴提供入駐。

小程式的體驗上限?

可以參考支付寶內的螞蟻森林、遊戲中心、我的快遞、生活繳費、充值中心,它們都是用類似小程式的方案進行開發部署。

原創文章,轉載請註明出處!