支付寶小程序開發——踩坑實錄


 富文本組件直接內嵌html代碼不展示、內嵌超鏈接點擊無反應

非小程序前端跳轉小程序無法獲取頁面參數

 小程序后台生成帶參數的二維碼無法正常打開頁面

支付寶小程序中不支持concat方法

 

一.富文本組件直接內嵌html代碼遇到的問題:

異常情況:

  • 內嵌html完全不展示而且沒報錯
  • 內嵌html超鏈接點擊無反應(已加入白名單)

1.不支持超鏈接:

正常的超鏈接點擊無反應,已反映給支付寶小程序技術支持,確認bug,待修復。

2.不支持<br>這種寫法:

需要按照嚴格模式編寫,如非閉合標簽,需要再標簽內部完成閉合,不然會造成所有html都無法解析渲染。

注:如果html數據已經無法修改,那么也可以自己封裝方法進行轉換,將所有用到的需要閉合但是未閉合的但標簽進行替換(替換多種標簽可以根據需要編寫正則表達式):

/**
 * html代碼轉換(單標簽一定要閉合)
 */
function transHtmlCode(html){        
    return html.replace(/<br>/g,"<br/>")
}
//調用
parse(self.transHtmlCode(goods_info.remark), (err, htmlNodesRemark) => {
    if (!err) {
        self.setData({
            htmlNodesRemark
        });
    }
})

二.非小程序前端——跳轉小程序的鏈接拼接問題:

異常情況:

  • 按官方文檔方式拼接鏈接無法正常打開帶有參數的頁面

官方文檔:

官方提供的解決方法詳見如何跳小程序

踩坑實操:

如果配置的頁面沒有參數還好,不會出問題,如果有參數,很可能配出來的鏈接無法正常獲取到攜帶參數的,坑在這里:

1.page參數:剛開始以為是頁面path路徑(也就是app.json中的路徑),因為后邊還有query參數,理所當然的會認為這里只需要path;

2.query參數:雖然看到“啟動參數”四個字,但是這種路徑沒有配過小程序app的啟動參數的,微信小程序也不是這么玩的,所以這里就理所當然的被認為是頁面參數了;

然后拼接出來的路徑是這樣的:

window.location.href="alipays://platformapi/startapp?appId=xxx&page=pages/goodDetail/goodDetail&query=goods_id%3d101"

很顯然,這樣是無法正常獲取頁面參數了。

正確操作:

//有頁面參數(沒有啟動參數)
location.href = "alipays://platformapi/startapp?appId=xxx&page=pages/goodDetail/goodDetail"+encodeURIComponent("?goods_id="+goods_id)
//有頁面參數,有啟動參數(如渠道號、平台號等打開小程序就需要傳過來的參數)
location.href = "alipays://platformapi/startapp?appId=xxx&page=pages/goodDetail/goodDetail"+encodeURIComponent("?goods_id="+goods_id)+&query=encodeURIComponent("appParams="+xx)

總結:

官方文檔突出了啟動參數,卻壓根兒沒提頁面參數,初次接觸,踩坑難免,畢竟支付寶小程序還在成長中,我們自己也得多多實踐,多多嘗試。

三.小程序后台生成帶參數的二維碼無法正常打開頁面:

異常描述:

  • 小程序后台的碼管理功能中,生成的不帶參數的二維碼可以正常訪問,帶參數的則無法正常訪問頁面(參數獲取不到)

踩坑實操:

 

如上,習慣性的按照開發工具自定義編譯模式進行配置頁面地址和參數,然后坑就出現了——總共三個配置參數:

頁面地址——需要和 app.json pages 中的地址保持一致;

啟動參數——很顯然並不是頁面參數(跟前邊跳轉小程序一樣的問題),頁面參數又被忽略了(好沒有存在感的頁面參數);

碼描述——這個就不用說了。

按照這種方式配置,沒有頁面參數,自然是無法正常訪問頁面的了。

正確配置:

頁面地址中填寫完整頁面路徑,同時把頁面參數也追加后邊(無需轉碼),啟動參數必填(即使沒有也得填個參數),如下:

這樣配置就可以了。

拓展用法:

小程序后台生成的二維碼解碼后是  https://qr.alipay.com/s6x041d3str6e1tr35h13s 之類的超鏈接,經驗證,可以直接在手機瀏覽器中調起支付寶小程序,因此可以直接替代上邊alipay協議的拼接路徑,而且這種方式更直接,更簡單,還不容易出錯(前提是碼的配置要正確,能正常訪問頁面)。

四.支付寶小程序中不支持concat方法

經驗證,支付寶小程序中對數據進行數據追加,使用concat無效,如下demo:

var arr=[1,2,3]
var arr2=["a","b"]
arr.concat(arr2)
console.log(arr)

結果輸出 [1,2,3]。

解決方法就是使用push方法:

var arr=[1,2,3]
var arr2=["a","b"]
arr.push(...arr2)
console.log(arr)

結果輸出 [1, 2, 3, "a", "b"]


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM