qrCode.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <template>
  2. <view>
  3. <button @click="createQRCode">生成二维码</button>
  4. <image :src="qrCodeImage" @click="scanQRCode"></image>
  5. </view>
  6. </template>
  7. <script>
  8. export default {
  9. data() {
  10. return {
  11. qrCodeImage: '../../static/nice.jpg', // 二维码图片路径
  12. };
  13. },
  14. methods: {
  15. async createQRCode() {
  16. // 生成二维码
  17. const qrcode = await this.generateQRCode('pages/home/home');
  18. this.qrCodeImage = qrcode;
  19. },
  20. async generateQRCode(sceneStr) {
  21. // 创建二维码
  22. const qrcode = await new Promise((resolve, reject) => {
  23. wx.createQRCode({
  24. scene: {
  25. scene_str: sceneStr
  26. },
  27. success: (res) => {
  28. resolve(res.path);
  29. },
  30. fail: (err) => {
  31. reject(err);
  32. }
  33. });
  34. });
  35. return qrcode;
  36. },
  37. async scanQRCode() {
  38. // 扫描二维码
  39. wx.scanCode({
  40. scanType: ['qrcode'], // 指定扫描类型为二维码
  41. success: (res) => {
  42. console.log(res.result); // 输出二维码的内容
  43. },
  44. fail: (err) => {
  45. console.log(err);
  46. }
  47. });
  48. }
  49. }
  50. };
  51. </script>