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

小程序中某个页面生成二维码,并下载二维码图片

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
wxml:
<view class="input"> <input placeholder="请输入员工编号" bindinput="inputChange" value="{{inputVal}}"></input> <!-- <view class="icon-box" wx:if="{{true}}" catchtap="clearInput" > <van-icon name="close" class="close-icon" size="36rpx" /> </view> --> <van-icon name="close" class="close-icon" size="36rpx" wx:if="{{show}}" /> <button bindtap="createQrcode">生成二维码</button> </view> <view class="code" wx:if="{{codeShow}}"> <canvas class="canvas" style="width: 300rpx; height: 300rpx;" canvas-></canvas> <view class="down" bindtap="savePic">保存到手机相册</view> </view>
/* pages/generate/
// import QRcode from '../../miniprogram_npm/weapp-qrcode/index'
import QRcode from '../../utils/weapp-qrcode';

let userInfo = null;
let params = null;

Page({

  /**
   * 页面的初始数据
   */
  data: {
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.isLogin()
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function (options) {
    // const that = this;
    // // 设置转发内容
    // const shareObj = {
    //   title: '来吧',
    //   path: '/pages/index/index.wxml',
    //   success: function(res) {
    //     if(res.errMsg === 'shareAppMessage:ok') {

    //     }
    //   }
    // };
    // return shareObj;
  },
  // 是否登录
  isLogin() {
    wx.getStorage({
      key: 'userInfo',
      success: res => {
        
      },
      fail: () => {
        wx.navigateTo({
          url: '/pages/login/index',
        })
      }
    })
  },
  // 生成二维码
  createQrcode() {
    const {inputVal} = this.data;
    const that = this;
    if(inputVal) {
      this.setData({
        codeShow: true
      })
      const text = `/page/index/index?code=${inputVal}`;
      QRcode({
        width: this.rpx2px(300),
        height: this.rpx2px(300),
        canvasId: 'myQrcode',
        text,
        _this: this,
        callback: res => {
          wx.canvasToTempFilePath({
            x: 0,
            y: 0,
            width: this.rpx2px(300),
            height: this.rpx2px(300),
            destWidth: this.rpx2px(300),
            destHeight: this.rpx2px(300),
            canvasId: 'myQrcode',
            success: function(res) {
              let path = res.tempFilePath
              that.setData({
                filePath: path,
              })
              },
          })
        }
      });
    } else {
      wx.showToast({
        title: '请输入员工编号',
        icon: 'none'
      })
    }
  },
  inputChange(e) {
    if(e.detail.value.length) {
      this.setData({
        show: true
      })
    } else {
      this.setData({
        show: false
      })
    }
    this.setData({
      inputVal: e.detail.value,
    })
  },
  clearInput() {
    this.setData({
      inputVal: '',
    })
  },
  rpx2px(rpx) {
    const A = wx.getSystemInfoSync().windowWidth;
    const px = rpx * A / 750;
    return px;
  },
  // 保存图片
  savePic() {
    const that = this;

    wx.getSetting({
      success:(res)=>{
        if (!res.authSetting['scope.writePhotosAlbum']){
          wx.authorize({
            scope:'scope.writePhotosAlbum',
            success:(res)=>{
              this.save()
            },
            fail: err => {
              if(err.errMsg.includes('authorize:fail')) {
                // 重新打开相册权限
                wx.openSetting({
                  success(settingdata) {
                    if (settingdata.authSetting['scope.writePhotosAlbum']) {
                      // 获取权限成功,给出再次点击图片保存到相册的提示
                      this.save()
                    }else {
                      // 获取权限失败,给出不给权限就无法正常使用的提示
                    }
                  }
                })
              }
            }
          })
        } else {
          this.save();
        }

      }
    })
  },

  // save
  save() {
    const that = this;
    wx.saveImageToPhotosAlbum({
      filePath: that.data.filePath,
      success: (res) => {
        wx.showToast({
          title: '图片保存成功',
          icon: 'none',
        })
      },
      fail:(res)=>{
        wx.showToast({
          title: '图片保存失败',
          icon: 'none',
        })
      },
      complete:(res)=>{}
    })
  },

})

  

.wxss */ .input { height: 100rpx; line-height: 100rpx; display: flex; margin-top: 40rpx; position: relative; } .input > input { width: 70%; height: 100rpx; line-height: 100rpx; border: 1rpx solid #ccc; background-color: #fff; padding-left: 20rpx; } .input > button { width: 30%; height: 100rpx; line-height: 100rpx; font-size: 24rpx; background-color: #f00; border: 1rpx solid #f00; color: #fff; border-radius: 0; } .code { text-align: center; text-decoration: underline; font-size: 26rpx; color: orange; } .code .canvas { margin: 40rpx auto 40rpx; } /* .icon-box { height: 100rpx; width: 68rpx; position: relative; } */ .close-icon { position: absolute; right: 30%; top: 50%; transform: translateY(-50%); z-index: 999; }

  效果:

 

 


鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
上一篇:
小程序实现APP底部(TabBar)页面控制效果发布时间:2022-07-18
下一篇:
小程序的POST接收不到参数发布时间: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