前端微信小程序生成二维码(wxbarcode),并保存到手机相册

微信小程序由前端生成二维码,利用wxbarcode插件,可以才有npm install的方式,也可以去git上下载js文件,下面展示的是从git上下载js文件的方式:

(1)下载js文件(git地址在最下方),放入项目中,可以放在utils文件夹中;
wxbarcode
(2)index.wxml

<canvas class="qrcode" canvas-id="qrcode" />
<view class="btn save-btn" bind:tap="saveImg">保存到手机</view>

(3)在页面的index.js文件中引入js文件

import wxbarcode from '../../../utils/wxbarcode/index';
Page({
  data:{},
  onLoad(options) {
    let urlStr = '123'  //需要生成二维码的内容
    wxbarcode.qrcode('qrcode', urlStr, 260, 260);
  },
  // 保存图片到手机
  saveImg() {
    wx.canvasToTempFilePath({
      canvasId: 'qrcode',
      success: function (res) {
        wx.getImageInfo({
          src: res.tempFilePath,
          success: (res) => {
            let path = res.path;
            wx.saveImageToPhotosAlbum({
              filePath: path,
              success: (res) => {
                console.log(res);
                wx.showToast({
                  title: '已保存到相册',
                })
              },
              fail: (res) => {
                console.log(res);
              }
            })
          },
          fail: (res) => {
            console.log(res);
          }
        })
      },
      fail: function (res) {
        wx.showToast({
          title: '图片生成失败'
        });
        console.log("图片生成失败error", res)
      }
    }, this)
  },
})

插件下载地址:https://github.com/1961866686/wxbarcode/tree/master/demo/utils

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐