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

小程序的二维码生成并且长按保存到手机

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

wxml部分

wxss部分

.container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}

.container image {
width: 686rpx;
height: 686rpx;
background-color: #f9f9f9;
}

.canvas-box {
position: fixed;
top: 999999rpx;
left: 0;
}

js部分(qr地址下载地址:https://github.com/demi520/wxapp-qrcode/blob/master/utils/qrcode.js)

var QR = require("…/…/js/qrcode.js");

Page({

/**

  • 页面的初始数据
    */
    data: {
    timestart:0, //长按开始
    timeend:0, //长按结束
    canvasHidden: false, //canvas显示
    imagePath: ‘’, //图片路径
    },

/**

  • 生命周期函数–监听页面加载
    */
    onLoad: function (options) {
    //option为上个页面传递过来的参数
    var jiaoyanCode = ‘9123546’;
    // if (options) {
    // jiaoyanCode = options.jiaoyanCode;
    // }
    console.log(jiaoyanCode);
var size = this.setCanvasSize(); //动态设置画布大小 
this.createQrCode(jiaoyanCode, "mycanvas", size.w, size.h);

},

//适配不同屏幕大小的canvas
setCanvasSize: function () {
var size = {};
try {
var res = wx.getSystemInfoSync();
var scale = 750 / 686; //不同屏幕下canvas的适配比例;设计稿是750宽 686是因为样式wxss文件中设置的大小
var width = res.windowWidth / scale;
var height = width; //canvas画布为正方形
size.w = width;
size.h = height;
} catch (e) {
// Do something when catch error
console.log(“获取设备信息失败” + e);
}
return size;
},

/**

  • 绘制二维码图片
    */
    createQrCode: function (url, canvasId, cavW, cavH) {
    //调用插件中的draw方法,绘制二维码图片
    QR.api.draw(url, canvasId, cavW, cavH);
    setTimeout(() => {
    this.canvasToTempImage();
    }, 1000);
    },

/**

  • 获取临时缓存照片路径,存入data中
    */
    canvasToTempImage: function () {
    var that = this;
    //把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径。
    wx.canvasToTempFilePath({
    canvasId: ‘mycanvas’,
    success: function (res) {
    console.log(res,“dadas”)
    var tempFilePath = res.tempFilePath;
    console.log(tempFilePath);
    that.setData({
    imagePath: tempFilePath,
    // canvasHidden:true
    });
    },
    fail: function (res) {
    console.log(res);
    }
    });
    },

/**

  • 点击图片进行预览
    */
    previewImg: function (e) {
    var img = this.data.imagePath;
    console.log(img);
    wx.previewImage({
    current: img, // 当前显示图片的http链接
    urls: [img] // 需要预览的图片http链接列表
    });
    },
    //点击开始时的时间
    timestart: function (e) {
    var _this = this;
    _this.setData({ timestart: e.timeStamp });
    },

//点击结束的时间
timeend: function (e) {
var _this = this;
_this.setData({ timeend: e.timeStamp });
},
bingLongClick() {//长按事件 保存二维码
var _this = this;
var times = _this.data.timeend - _this.data.timestart;
if (times > 300) {
wx.saveImageToPhotosAlbum({
filePath: _this.data.imagePath,//返回的临时文件路径,下载后的文件会存储到一个临时文件
success: function (res) {
wx.showToast({
title: ‘保存成功’,
})
},
fail(res){
wx.showToast({
title: ‘保存失败请截屏’,
})
}
})
}
}
})


鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
上一篇:
微信小程序顶部(navigationBar)设置为透明发布时间:2022-07-18
下一篇:
快应用和小程序各自的优势发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

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

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

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