1. 程式人生 > >微信小程式請求二維碼:使用者點選按鈕生成帶參二維碼

微信小程式請求二維碼:使用者點選按鈕生成帶參二維碼

目標: 
請求二維碼並展示 
步驟: 
使用者點選按鈕生成二維碼 
步驟: 
1、微信小程式往後臺請求二維碼 
2、後臺(java/php) 根據微信小程式資訊往微信端請求tonken 
3、後臺得到tonken後往微信端請求二維碼圖片 
4、後臺得到圖片後儲存在伺服器上,將路徑返回給微信小程式 
5、微信小程式得到路徑後,根據路徑下載圖片 
6、下載圖片成功後再儲存至本地 
7、儲存成功後將路徑給予image標籤裡面展示
程式碼: 
wxml

<image class="scanimg" src="{{filePath}}" bindtap="getAgain"></image>

<button type="primary" bindtap="primary">點選生成二維碼</button>

s程式碼

primary:function (e) {

var _url = '後臺地址';

  wx.request({

    url: _url,

//請求報文體

    data: [{

      id: agentCode

    }],

    method: 'POST',

    header: {

      'content-type': 'application/json'

    },

    success: function (res) {

//為00時表示成功,得到二維碼的地址

      if (res.data.code == '00') {

        console.log("成功")

//下載二維碼

        wx.downloadFile({

          url: res.data.body[0].URL,

          success: function (res) {

//如果二維碼中的id為固定值可以將圖片儲存到本地,否則不用儲存

            wx.saveFile({

              tempFilePath: res.tempFilePath,

              success: function (res) {

                console.log("儲存成功")

_that.setData({

filePath: res.savedFilePath

})

console.log(res.savedFilePath)

try {

//id為定值,則將儲存的地址存入快取,非定值則只需要setData就行

wx.setStorageSync('filePath', res.savedFilePath)

} catch (e) {

console.log(e)

}

              },

              fail: function (res) {

                console.log("儲存失敗")

                console.log(res)

              }

            })

          }, fail: function (res) {

            util.msg("錯誤", "通訊失敗")

            console.log(res)

          }

        })

      } else {

        console.log("錯誤")

        util.msg("錯誤", res.data.msg)

      }

    },

    fail: function () {

      util.msg("錯誤", "通訊失敗")

      console.log(res)

    }

  })

}

java端程式碼

// 訪問微信後臺的URL

String URL = systemConfig.getString("LoginOrRegisterUrl");

// 請求型別

String grant_type = systemConfig.getString("grant_type");

// 第三方使用者唯一憑證金鑰

String secret = systemConfig.getString("secret");

// 第三方使用者唯一憑證

String appId = systemConfig.getString("appid");

// 請求token時用到的URL

String tokenUrl = systemConfig.getString("tokenUrl");

// 向微信後臺請求獲取token

                        String sendGet = HttpClientConnectionManager.sendGet(

                                tokenUrl, "grant_type=" + grant_type

                                        + "&secret=" + secret + "&appid="

                                        + appId + "");

                        System.out.println(sendGet);

                        JSONObject json = JSONObject.fromObject(sendGet);

                        access_token = json.get("access_token").toString();

                        if (access_token == null) {

//沒有token 則返回錯誤碼和錯誤資訊

                            agentDTO.setCode("0002");

                            agentDTO.setDesc("獲取tokenId失敗");

                            return agentDTO;

                        }

System.out.println(access_token);

// 訪問微信後臺帶的json引數

                    Map<String, Object> map = new HashMap<String, Object>();

                    map.put("path", "pages/register");//你二維碼中跳向的地址

                    map.put("width", "430");//圖片大小

                    JSONObject json = JSONObject.fromObject(map);

                    HttpClientConnectionManager.httpPostWithJSON(URL

                            + access_token, json.toString(), id + "max");

                    // 返回給前端的後臺伺服器檔案讀取路徑

                    String downloadUrl = systemConfig

                            .getString("agentImgDownloadUrl")

                            + id

                            + "max"

                            + "/";

                    // 返回給前端的後臺伺服器檔案下載路徑

                    String downloadfileUrl = downloadUrl + id + "max" + ".jpg";

                    agentResView.setURL(downloadfileUrl);

                    agentDTO.setAgentResView(agentResView);

agentDTO.setCode("00");

agentDTO.setDesc("成功");

                        return agentDTO;

tip 
1、這是申請一張二維碼的程式碼,申請多張可以用for或者其他的方法 
2、當id為定量時,每次點選按鈕判斷filePath快取是否存在,存在則直接取值展示,不存在則向後臺請求二維碼 。