微信小程序怎么做 用戶點(diǎn)擊按鈕生成二維碼
微信小程序怎么做已經(jīng)是當(dāng)下最熱門的話題,下面將從多方面來(lái)談?wù)動(dòng)脩酎c(diǎn)擊按鈕生成二維碼 相關(guān)的內(nèi)容。
目標(biāo):
請(qǐng)求二維碼并展示
步驟:
用戶點(diǎn)擊按鈕生成二維碼
步驟:
1、微信小程序往后臺(tái)請(qǐng)求二維碼
2、后臺(tái)(java/php) 根據(jù)微信小程序信息往微信端請(qǐng)求tonken
3、后臺(tái)得到tonken后往微信端請(qǐng)求二維碼圖片
4、后臺(tái)得到圖片后保存在服務(wù)器上,將路徑返回給微信小程序
5、微信小程序得到路徑后,根據(jù)路徑下載圖片
6、下載圖片成功后再保存至本地
7、保存成功后將路徑給予image標(biāo)簽里面展示
代碼:
wxml
<image class="scanimg" src="{{filePath}}" bindtap="getAgain"></image>
<button type="primary" bindtap="primary">點(diǎn)擊生成二維碼</button>
s代碼
primary:function (e) {
var _url = '后臺(tái)地址';
wx.request({
url: _url,
//請(qǐng)求報(bào)文體
data: [{
id: agentCode
}],
method: 'POST',
header: {
'content-type': 'application/json'
},
success: function (res) {
//為00時(shí)表示成功,得到二維碼的地址
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("錯(cuò)誤", "通訊失敗")
console.log(res)
}
})
} else {
console.log("錯(cuò)誤")
util.msg("錯(cuò)誤", res.data.msg)
}
},
fail: function () {
util.msg("錯(cuò)誤", "通訊失敗")
console.log(res)
}
})
}
java端代碼
// 訪問微信后臺(tái)的URL
String URL = systemConfig.getString("LoginOrRegisterUrl");
// 請(qǐng)求類型
String grant_type = systemConfig.getString("grant_type");
// 第三方用戶唯一憑證密鑰
String secret = systemConfig.getString("secret");
// 第三方用戶唯一憑證
String appId = systemConfig.getString("appid");
// 請(qǐng)求token時(shí)用到的URL
String tokenUrl = systemConfig.getString("tokenUrl");
// 向微信后臺(tái)請(qǐng)求獲取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 則返回錯(cuò)誤碼和錯(cuò)誤信息
agentDTO.setCode("0002");
agentDTO.setDesc("獲取tokenId失敗");
return agentDTO;
}
System.out.println(access_token);
// 訪問微信后臺(tái)帶的json參數(shù)
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");
// 返回給前端的后臺(tái)服務(wù)器文件讀取路徑
String downloadUrl = systemConfig
.getString("agentImgDownloadUrl")
+ id
+ "max"
+ "/";
// 返回給前端的后臺(tái)服務(wù)器文件下載路徑
String downloadfileUrl = downloadUrl + id + "max" + ".jpg";
agentResView.setURL(downloadfileUrl);
agentDTO.setAgentResView(agentResView);
agentDTO.setCode("00");
agentDTO.setDesc("成功");
return agentDTO;
tip
1、這是申請(qǐng)一張二維碼的代碼,申請(qǐng)多張可以用for或者其他的方法
2、當(dāng)id為定量時(shí),每次點(diǎn)擊按鈕判斷filePath緩存是否存在,存在則直接取值展示,不存在則向后臺(tái)請(qǐng)求二維碼
-
微信小程序商城系統(tǒng)開發(fā)其實(shí)很簡(jiǎn)單
微信小程序商城系統(tǒng)開發(fā)其實(shí)很簡(jiǎn)單,只需要五步就可以完成,整個(gè)過程包括開發(fā)、上線、發(fā)布都可以輕松搞定...詳情
第二部分:如何開通一個(gè)小商店