微信小程序-卡券開發（前端）

剛完成一個微信小程序卡券開發的項目。下面記錄開發前，自己困惑的幾個問題。

因為我只負責了前端。所以下面主要是前端的工作。

項目概述：按照設計圖開發好首頁上的優惠券列表，點擊某個優惠券，輸入手機號，點擊領取，調用 wx.addCard()接口，跳到微信的領取卡券頁面。

點擊首頁的某處按鈕，點擊后，調用wx.openCard()接口，打開已領取的卡券列表頁。

1、小程序提供的 wx.addCard() ，如果調用成功，打開的界面，長下面這個樣子。（微信本身就有的頁面）

如果點擊了返回，沒有點擊“領取到卡包”。此時是沒有領取成功的。

2、小程序提供的 wx.openCard() ，如果調用成功，打開的界面，長下面這個樣子。（微信本身就有的頁面）

 

 

3、開發流程（后續補充）：

1) 獲取openId。

在app.json文件中，前端調用wx.request()，發送code至自己公司后台提供的接口，獲取openId，存到緩存中，為了確保其他頁面能獲取到。我也存到了一個公共變量中。

2) 按照微信提供的API說明，傳必要參數。

　領取卡券的前端處理：
　① 先判斷當前微信版本是否支持領取卡券這個api
　if ( wx.addCard ) { 如果支持的話，就調用領取卡券的接口 } else { 不支持的話，彈出更新提示 }
　② 調用領取卡券的接口
　下面是我實際調用這個接口時，傳入的參數

                       if (wx.addCard) {
                            //領取卡券接口
                            wx.addCard({
                                cardList: [
                                    {
                                        cardId: card_id,
                                        cardExt: '{"nonce_str": "'+ result.data.sign.nonce_str +'", "openid": "'+ openid +'", "timestamp": "'+ result.data.sign.timestamp +'", "signature":"'+ result.data.sign.signature +'"}'
                                    }
                                ],
                                success: function(res) {
                                    if(res.cardList.length > 0) {
                                        if(res.cardList[0].isSuccess) {
                                            var get_card_id = res.cardList[0].cardId;
                                            var get_code = res.cardList[0].code;
                                            //將領取成功結果返回至服務器
                                            wx.request({
                                                url: '服務器接口地址',
                                                method: 'POST',
                                                data: {
                                                    mobile: user_phone,
                                                    openid: openid,
                                                    card_id: get_card_id,
                                                    code: get_code
                                                },
                                                header: {
                                                    'content-type': 'application/x-www-form-urlencoded'
                                                },
                                                success: function(result) {
                                                    if(result.data.error_code != 200) {
                                                        //error處理
                                                    }
                                                    //領取完，跳回首頁
                                                    wx.reLaunch({
                                                        url: '../index/index'
                                                    })
                                                }
                                            })
                                        }
                                    }
                                },
                                fail: function() {
                                    //領取失敗，跳回首頁
                                    wx.reLaunch({
                                        url: '../index/index'
                                    })
                                }
                            })
                        } else {
                            // 如果希望用戶在最新版本的客戶端上體驗您的小程序，可以這樣子提示
                            wx.showModal({
                                title: '提示',
                                content: '當前微信版本過低，無法使用該功能，請升級到最新微信版本后重試。'
                            })
                        }                        

參數說明：
cardId：是從后台接口獲取到的數據。
timestamp：是從后台獲取的時間戳。
nonce_str： 是從后台獲取的數據。
openid：在小程序app.js文件中，調用 wx.login()接口，發送code至后台，獲取openId，保存到緩存中。（為了防止取不到，我也存到了自定義的全局變量中）
在這里需要用時，就取出openId
signature： 是從后台獲取的數據。
success：在這個函數中，我將領取成功結果返回至了服務器（后台提供的接口，參數因項目而異。我們是要求傳回手機號，openId，card_id，和code 。這里的card_id 和 code，是success函數中返回的結果）
success, 其實也就是點擊“領取到卡包”后觸發的函數。

 

凡是需要調用 api.weixin.qq.com這個接口獲取的數據，都要由后台調用，返回給前端。前端無法直接調用。

 

4、踩的坑

1）點擊領取后，接口調用成功，就要設置按鈕不可點擊。否則多次快速點擊，微信卡包中，卡券列表里會出現多次重復領取的卡券。

2）用自己的appId登錄開發者工具，查看公司的小程序項目時，會報錯。因為后台服務器使用的是公司小程序的 appsecret 獲取的 accesstoken。和自己的appId對不上，就調不了接口。

解決：開通公司小程序的開發權限，用公司的appId登錄開發者工具。注意，先選擇小程序文件，然后再輸入appId。因為如果之前已經打開過這個小程序，再次導入小程序文件時，appId會自動輸入之前的appId記錄。先輸入appId ，有可能會被自動改掉。

3)  注意遇到的幾個code的含義，注意區分。 

......做項目時，想寫的很多，做完了，突然詞窮了。等有人問，或者我自己想，再慢慢補充吧 ==||

 

 

 

 

①