支付寶 H5 頁面的分享轉(zhuǎn)發(fā)的開發(fā)
關(guān)于支付寶的 H5 分享轉(zhuǎn)發(fā)的功能,支付寶開發(fā)文檔寫的非?;靵y
Alipay JSAPI 概覽:https://opendocs.alipay.com/open/025a4p
Alipay JSAPI 使用說明:https://opendocs.alipay.com/open/024kz4
從以上兩篇官方文檔里,很難獲取到直接有用的信息,甚至找不到下手的點(diǎn)
直到看見這篇:
H5 JSAPI DEMO:https://opendocs.alipay.com/common/02kkv6
通過這里下載后的 DEMO 發(fā)現(xiàn),H5 頁面是需要引入:
https://as.alipayobjects.com/g/component/antbridge/1.1.1/antbridge.min.js
在支付寶文檔里搜索“antbridge”關(guān)鍵詞,根本找不對應(yīng)的文檔
---------------------------------
分析 DEMO 里的案例發(fā)現(xiàn),DEMO 里給出的方案是,點(diǎn)擊按鈕后,觸發(fā)?Ali.share 方法,彈出?optionMenu 選項(xiàng)菜單:

可是我的 H5 網(wǎng)頁里,不需要這種分享方式,需要的是右上角用戶自主分享,不是再增加一個占據(jù)頁面空間的“分享按鈕”來點(diǎn)擊,這種方式,DEMO 里沒有給出實(shí)現(xiàn)方法。
再經(jīng)過大量的查閱資料,才找到可行方案,就是監(jiān)聽?optionMenu 事件,監(jiān)聽到用戶點(diǎn)擊右上角導(dǎo)致?optionMenu 事件觸發(fā)的時(shí)候,再觸發(fā)?Ali.share 方法,通過觸發(fā)?Ali.share 方法來給分享賦值:標(biāo)題、圖標(biāo)、描述和鏈接。
但是這會導(dǎo)致另一個離奇效果出現(xiàn),就是會彈出兩次?optionMenu 選項(xiàng)菜單,用戶點(diǎn)右上角彈出一次,Ali.share 方法調(diào)用時(shí)又彈出一次,體驗(yàn)效果完全不對。
這里又要看另一篇文檔
setOptionMenu:https://opendocs.alipay.com/open/02523v
需要用到?preventDefault: true 來實(shí)現(xiàn)阻止默認(rèn)分享功能
以上就是實(shí)現(xiàn)方法,具體代碼可訪問我的項(xiàng)目去體驗(yàn)和查看源碼,
網(wǎng)址可在支付寶、微信、PC 內(nèi)三方平臺訪問打開,做了三方兼容:
https://www.maxbei.com/vx_mxb/