• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

微信小程序-二维码生成

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

1. 下载qrcode.js/qrcode.mini.js

2. 使用方式

wxml:

<view>
    <canvas class=\'canvas\' mode="widthFix" canvas-id=\'canvas\' bindlongtap="_saveQRcode"></canvas>
    <button bindtap="_makeQrcode">点击生成</button>
 </view>

wxss:

.canvas {
  margin: 10rpx auto ;
  margin-top: 20rpx;
  width: 200px;
  height: 200px;
  border: 10px solid var(--white);
  border-radius: 5%;
  background-color: var(--white);
}

js: 主要代码

var qrcode;

Page({

 data: {
    ...
 },

 /*点击按钮生成二维码*/
 _makeQrcode:function(){
    var text = "ssssssssssssss"
    qrcode.makeCode(text,function(){ 
      console.log("回调")
    });
 },

 /*长按保存*/
 _makeQrcode:function(){
    qrcode.exportImage(function(path) {
      wx.saveImageToPhotosAlbum({
        filePath: path,
        success(res) {
          wx.showToast({
            title:\'保存成功\',
            icon:\'success\'
          })
        }, fail(err) {
          console.log(err.errMsg)
          if (err.errMsg == "saveImageToPhotosAlbum:fail auth deny"){
            wx.getSetting({
              success: (res) => {
                /* 页面初始化 */
                if(!res.authSetting["scope.writePhotosAlbum"]){
                  wx.showToast({
                    icon:\'none\',
                    title:\'无法保存图片\r\n请开启“保存到相册”权限\',
                    duration: 2000
                  });
                }
              }
            });
          }
        }
     })
   })
 },

 onload:function(){
     /* 初始化qrcode */
    qrcode = new QRCode(\'canvas\', {
      usingIn: this,
      width: 200,
      height: 200,
      padding: 10,
      colorDark: "#1F1F1F",
      colorLight: "white",
      correctLevel: QRCode.CorrectLevel.H,
    });
  }
    
})

在以上基础上加点样式,效果如下

 

  -------- 转载请标注


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap