微信小程式請求二維碼:使用者點選按鈕生成帶參二維碼
目標:
請求二維碼並展示
步驟:
使用者點選按鈕生成二維碼
步驟:
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快取是否存在,存在則直接取值展示,不存在則向後臺請求二維碼 。