首頁 > 微信小程式 > 小程式開發 > 微信小程式使用者點擊按鈕產生帶參二維碼的範例程式碼

微信小程式使用者點擊按鈕產生帶參二維碼的範例程式碼

高洛峰
發布: 2017-03-26 15:28:19
原創
4128 人瀏覽過

目標: 
請求二維碼並展示 
步驟: 
使用者點選按鈕產生二維碼 
步驟: 
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快取是否存在,存在則直接取值展示,不存在則向後台請求二維碼 

### #

以上是微信小程式使用者點擊按鈕產生帶參二維碼的範例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板