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

 富文本組件直接內嵌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"]