小程序中對鏈接地址生成二維碼

需求:
????動(dòng)態(tài)獲取分享碼地址,生成一個(gè)二維碼,可以保存二維碼圖片二蓝,然后分享給其他人。
解決方法:
????由于小程序中無法對dom操作指厌,所以考慮使用canvas畫出二維碼刊愚,可借助第三方庫weapp-qrcod.js
????下面介紹具體使用方法:

  1. 下載weapp-qrcode.js,且引入頁面中,下載地址https://github.com/tomfriwel/weapp-qrcode/blob/master/dist/weapp-qrcode.js
const QRCode= require('../../utils/qrcode.js')

2.wxml中引入canvas, js中對canvas初始化

 <canvas class='canvas' canvas-id='canvas' style="width: 100%;height: 100%" bindlongtap="save" ></canvas>
wx.request({
      url: '...',
      method:'POST',
      data:{},
      success: function(res) {
        if(res.data.data) {
          if(qrcode) {
            that.setData({
              qrcode:that.data.qrcode.makeCode(res.data.data),
              showLoading: false
            })
          }else{
            that.setData({
              qrcode:new QRCode('canvas', {
                text: res.data.data,
                width: 220,
                height: 220,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H,
              })
            })
            that.setData({
              showLoading:false
            })  
          }
        }
      }
    })

3.實(shí)現(xiàn)長按保存

save: function() {
    let that = this;
    wx.showActionSheet({
      itemList: ['保存圖片'],
      success: function(res) {
          if (res.tapIndex == 0) {
              that.data.qrcode.exportImage(function(path) {
                  wx.saveImageToPhotosAlbum({
                      filePath: path,
                      success: function() {
                        wx.showToast({
                          title:'保存成功'
                        })
                      }
                  })
              })
          }
      }
  })
  },
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末踩验,一起剝皮案震驚了整個(gè)濱河市鸥诽,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌箕憾,老刑警劉巖牡借,帶你破解...
    沈念sama閱讀 221,820評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異袭异,居然都是意外死亡钠龙,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,648評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來碴里,“玉大人沈矿,你說我怎么就攤上這事∫б福” “怎么了羹膳?”我有些...
    開封第一講書人閱讀 168,324評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長根竿。 經(jīng)常有香客問我陵像,道長,這世上最難降的妖魔是什么寇壳? 我笑而不...
    開封第一講書人閱讀 59,714評論 1 297
  • 正文 為了忘掉前任醒颖,我火速辦了婚禮,結(jié)果婚禮上壳炎,老公的妹妹穿的比我還像新娘图贸。我一直安慰自己,他們只是感情好冕广,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,724評論 6 397
  • 文/花漫 我一把揭開白布疏日。 她就那樣靜靜地躺著,像睡著了一般撒汉。 火紅的嫁衣襯著肌膚如雪沟优。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,328評論 1 310
  • 那天睬辐,我揣著相機(jī)與錄音挠阁,去河邊找鬼。 笑死溯饵,一個(gè)胖子當(dāng)著我的面吹牛侵俗,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播丰刊,決...
    沈念sama閱讀 40,897評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼隘谣,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了啄巧?” 一聲冷哼從身側(cè)響起寻歧,我...
    開封第一講書人閱讀 39,804評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎秩仆,沒想到半個(gè)月后码泛,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,345評論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡澄耍,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,431評論 3 340
  • 正文 我和宋清朗相戀三年噪珊,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了晌缘。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,561評論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡痢站,死狀恐怖磷箕,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情瑟押,我是刑警寧澤,帶...
    沈念sama閱讀 36,238評論 5 350
  • 正文 年R本政府宣布星掰,位于F島的核電站多望,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏氢烘。R本人自食惡果不足惜怀偷,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,928評論 3 334
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望播玖。 院中可真熱鬧椎工,春花似錦、人聲如沸蜀踏。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,417評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽果覆。三九已至颅痊,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間局待,已是汗流浹背斑响。 一陣腳步聲響...
    開封第一講書人閱讀 33,528評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留钳榨,地道東北人舰罚。 一個(gè)月前我還...
    沈念sama閱讀 48,983評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像薛耻,于是被迫代替她去往敵國和親营罢。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,573評論 2 359

推薦閱讀更多精彩內(nèi)容