【绊脚小程序】小程序生成页面二维码 👨‍👦👨‍👦‍👦👨‍👨‍👧‍👧~~~

126 阅读3分钟

小贴士:案例以云函数的形式进行实现🏆

作用:生成一个二维码,当扫描二维码之后跳转到相应的页面.

🥇方法一:使用 createQRCode 生成二维码

永久有效,但有数量限制

效果图及目录组织结构:

二维码方法一-图.jpg

页面部分

js:

// index.js
Page({
  data: {
  },
  
  getQrCode(){//这是一个生成二维码的事件回调
    wx.showLoading({
      title: '生成中。。。',
    });
    var that = this;
    // 小程序码
    wx.cloud.callFunction({
      name:'createQRCode',//小程序二维码云函数名称
      data:{//云函数参数-可选是否需要传参
        openid:'参数1',
        freshId:'参数2'
      },
      success(res) {//云函数回调
        let fileManager = wx.getFileSystemManager();
        let filePath = wx.env.USER_DATA_PATH + '/qr.jpg';
        fileManager.writeFile({
          filePath:filePath,
          encoding:"binary",
          data:res.result.buffer,
          success:res=>{
            that.setData({
              filePath:filePath
            })
            wx.hideLoading({})
          }
        })
      }
    })
  }
})

wxml:

使用点击按钮的形式进行测试~~

<button type="primary" bindtap="getQrCode"> 生成小程序码</button>

<view class="img-wrap">
  <image class="img" src="{{filePath}}"></image>
</view>

wxss:

设置一定的样式~~

.img{
  width: 400rpx;
  height: 400rpx;
}

.img-wrap{
  text-align: center;
}

云函数部分

🐷千万不要把云函数名称搞错~~

js:

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数 参数可按实际情况选择是否使用
exports.main = async (event, context) => {
  try {
    const result = await cloud.openapi.wxacode.createQRCode({
      path:'pages/index/index?freshid='+event.freshId + '&openid' + event.openid,//目标页面
      width:300,
    })
    return result
  } catch (error) {
    return error
  }
}

json:

{
  "permissions": {
    "openapi": [
      "wxacode.createQRCode"
    ]
  }
}

使用云函数:上传后记得重新点击编译~~

🥈方法二:使用get生成小程序码

永久有效,但有数量限制

待补充~~~~

🥉方法三:使用getUnlimited生成小程序码

永久有效,无数量限制

待补充~~~~

🥓将生成的二维码路径上传的云存储(可选用)

上传功能的方法:

可根据实际需要选择将路径保存在什么地方~~

  uploadImages(filePath){//将生成的二维码路径上传到云存储
    var that = this;
    wx.cloud.uploadFile({
      cloudPath:`codeImg/${Math.random()}.${Date.now()}.${filePath.match(/\.(\w+)$/)[1]}`,
      filePath:filePath,
      success(res){
        that.setData({
          cloudImg:res.fileID
        })
      }
    })
  }

合一起后的完整js:

// index.js

Page({
  data: {},
  
  getQrCode(){
    wx.showLoading({
      title: '生成中。。。',
    });
    var that = this;
    // 小程序码
    wx.cloud.callFunction({
      name:'createQRCode',
      data:{//云函数参数
        openid:'参数1',
        freshId:'参数2'
      },
      success(res) {//云函数回调
        let fileManager = wx.getFileSystemManager();
        let filePath = wx.env.USER_DATA_PATH + '/qr.jpg';
        fileManager.writeFile({
          filePath:filePath,
          encoding:"binary",
          data:res.result.buffer,
          success:res=>{
            that.setData({
              filePath:filePath
            })
            that.uploadImages(filePath)//上传方法的调用,传入路径
            wx.hideLoading({})
          }
        })
      }
    })
  },

  uploadImages(filePath){//将生成的二维码路径上传到云存储
    var that = this;
    wx.cloud.uploadFile({
      cloudPath:`codeImg/${Math.random()}.${Date.now()}.${filePath.match(/\.(\w+)$/)[1]}`,
      filePath:filePath,
      success(res){
        that.setData({
          cloudImg:res.fileID
        })
      }
    })
  }
})

wxml:

🙃测试测试~~

<button type="primary" bindtap="getQrCode"> 生成小程序码</button>

<!-- 本地二维码 -->
<view class="img-wrap">
  <image class="img" src="{{filePath}}"></image>
</view>

<!-- 来自云存储的二维码 -->
<view class="img-wrap">
  <image class="img" src="{{cloudImg}}"></image>
</view>

效果图: 2.jpg

关于如何获取参数

🛴可以通过生命周期中的onLoad进行获取~~~

🛵参数即是来自扫描者附带的信息

onLoad(e){
    console.log(e.freshId)
    console.log(e.openid)
  },

🍻实现将生成的二维码保存到本地(手机相册)

🥣保存二维码到相册的事件回调拉出来单独看~~

saveQRcode(){//保存二维码到相册
    wx.saveImageToPhotosAlbum({
      filePath: this.data.filePath,
      success(res){
        console.log(res)
        wx.showToast({
          title:'保存成功',
        })
      }
    })
  }

🍚合在一起咯~~

// index.js

Page({
  data: {},
  
  getQrCode(){
    wx.showLoading({
      title: '生成中。。。',
    });
    var that = this;
    // 小程序码
    wx.cloud.callFunction({
      name:'createQRCode',
      data:{//云函数参数
        openid:'参数1',
        freshId:'参数2'
      },
      success(res) {//云函数回调
        let fileManager = wx.getFileSystemManager();
        let filePath = wx.env.USER_DATA_PATH + '/qr.jpg';
        fileManager.writeFile({
          filePath:filePath,
          encoding:"binary",
          data:res.result.buffer,
          success:res=>{
            that.setData({
              filePath:filePath
            })
            that.uploadImages(filePath)//上传方法的调用,传入路径
            wx.hideLoading({})
          }
        })
      }
    })
  },

  uploadImages(filePath){//将生成的二维码路径上传到云存储
    var that = this;
    wx.cloud.uploadFile({
      cloudPath:`codeImg/${Math.random()}.${Date.now()}.${filePath.match(/\.(\w+)$/)[1]}`,
      filePath:filePath,
      success(res){
        that.setData({
          cloudImg:res.fileID
        })
      }
    })
  },

  saveQRcode(){//保存二维码到相册
    wx.saveImageToPhotosAlbum({
      filePath: this.data.filePath,
      success(res){
        console.log(res)
        wx.showToast({
          title:'保存成功',
        })
      }
    })
  }
})

🍄点击全屏大图查看二维码

🍒查看大图的事件回调~~

FOW(e){
    wx.previewImage({//全屏查看大图的API
      urls: [e.currentTarget.dataset.img],
    })
  }

🥘给二维码绑定事件及传参~~

<view class="img-wrap">
  <image class="img" src="{{filePath}}" bindtap="FOW" data-img="{{filePath}}"></image>
</view>

效果图:

3.jpg

结束结束👺👺👺

🐱‍🏍祝看到的每一位朋友武运昌隆~~