小程序 前端 實現生成分享二維碼(可帶參數 無需配置)(後端可借鑑)

    生成可帶參數小程序二維碼前後端都可以實現,但是最好還是由後端來生成傳遞給前端這邊我是前端的主要介紹前端生成的方法,攜帶的參數scene 有長度限制 正常分享的需求可以實現,官方文檔都有說明。

    首先獲取access_token 是開發小程序後端的必要參數,同樣前端也是通過請求官方提供的接口來獲取,取得token就很簡單了,直接調用官方的接口,獲取帶參數的小程序二維碼(注意返回的格式 由於是前端處理的會有格式問題 如果是後端的話  就可以直接存儲數據庫) 前端及轉換格式 image 承接顯示圖片   

要在有權限的小程序開發者裏面測試

獲取    access_token

/** * 獲取access_token * * @paramappid * @paramappsecret * @return*/

官方文檔 獲取 access_token

wx.request({

      url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx9743427e009a5d0&secret=decff2504655b08ec20260e3699039c',

      method: 'get',

      success: function (res) {

        console.log(res)

      }

    })

拿到access_token 獲取 小程序二維碼 (原數據爲二進制圖片)請求方法設置返回格式 爲arraybuffer 

官方文檔 獲取小程序二維碼

let data = {

      scene: '123456',要傳遞的參數

      page: 'pages/hotinfo/hotinfo',掃碼進入的小程序頁面

    }

wx.request({

      url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=31_92uKEw2joJRdBP75gViNwBwZu-LGZ4-99EwkjpOy-iT3yW4B4Q7e_iscapbVQ3uIBoJXdo5sv0IJVyz8e6XfxAZHAbmmSFi8W1Fhu-OTSNJBQ57_h0aOlfjUIxChman-gaxZy_XOQVgdwpJ8DTRaAFAJZX',

      method: 'post',

      data:data,

      // dataType: 'json',

      responseType: 'arraybuffer',         //將返回數據 按文本解析修改爲arraybuffer

      success: function (res) {

        console.log()

        self.setData({

           //再arraybuffer轉爲base64  顯示圖片

          url: 'data:image/png;base64,'+wx.arrayBufferToBase64(res.data)

        })

      }

    })

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章