Nó thực sự làm tôi buồn nôn. Tôi đã nghiên cứu nó suốt hai ngày và tôi buồn ngủ quá.

 Ban đầu, việc sử dụng plug-in tạo mã QR là rất tốt. Trang plug-in này cũng hỗ trợ xuất hình ảnh mã QR, nhưng người lãnh đạo nói rằng bạn cần phải đưa tên của tệp, liên quan đến việc chuyển đổi HTML thành hình ảnh. Tất nhiên, bạn cũng có thể thay đổi mã nguồn của plug-in mã QR, nhưng Mã nguồn bị xáo trộn, tôi choáng váng và bỏ cuộc.

Tôi đã cố gắng đưa plug-in wxml-to-canvas gốc của WeChat vào dự án uniapp, nhưng cuối cùng tôi đã loay hoay với nó trong một thời gian dài, vì plug-in gốc của applet WeChat bao gồm các tệp wxml và wxss và không thể được giới thiệu trực tiếp vào page.vue, vì vậy chỉ cần sử dụng nó. Đặt nó vào thư mục dự án applet WeChat đã tạo, nhưng nó sẽ không quay trở lại trước khi giải phóng ngay sau khi được biên dịch phải không?

Sau đó, tôi phát hiện ra rằng plug-in gốc của applet WeChat có thể được đặt trong thư mục wxcomComponents và useComponents được định cấu hình trên trang tương ứng trong pages.json. Tuy nhiên, dự án đã hết gói và thiếu widget-ui. Cuối cùng thì nó vẫn chạy, báo lỗi là không tìm thấy plug-in. .

Cuối cùng, tôi quay lại thị trường plug-in và tải xuống plug-in x-wxml-to-canvas. Lúc đầu, tôi đã sử dụng plugin này nhưng gặp nhiều lỗi khác nhau. tất cả, hơn 2.000 lượt tải xuống phải có nội dung vàng nhất định. Vì vậy ~ hãy phá vỡ quan điểm và làm theo mã - Tôi thấy mã gốc của plugin có một số sai sót nên tôi đã thay đổi một chút...

Này các bạn, các bạn đã sửa nó cho tôi, nó có view và hình ảnh, đẹp quá~.

Dưới đây là những sửa đổi đối với plugin x-wxml-to-canvas mà tôi nhớ được.

                dữ liệu() { trả về { canvasId: 'canvas', timeId: null, canvas: {}, ctx: null, ranh giới: {} }; },　　
              

Hãy chú ý đến trình tự gọi của các phương thức plug-in (mã nhận xét cũng có sẵn và được lưu trực tiếp vào album):

                createPoster() { this.$refs.xWxmlToCanvas.renderToCanvas(); this.$refs.xWxmlToCanvas.canvasToTempFilePath(); //Ảnh đại diện this.$refs.xWxmlToCanvas.getCanvasImage().then(res => { uni.previewImage({ current: 0, urls: [res], fail: err => { this.$modal.msgError(this.$t('picture-preview-failed')); } }); // this.$refs.xWxmlToCanvas.saveImageToPhotosAlbum(res, this.fileName, saveRes => { // this.$modal.msg('picture-preview-failed'); // }); }); }　
              

Vì hình ảnh mã QR của tôi là động nên mẫu wxml của tôi cũng được tạo động.

                previewImage() { trả về this.$refs.wQrcode.GetCodeImg().then(res => { const tempFilePath = res.tempFilePath; this.initWxml(tempFilePath); this.wxmlIsReady = true; }); },　
              

Vì plug-in wxml-to-canvas được khởi tạo ở giai đoạn được gắn kết nên để ngăn nó thực hiện những công việc vô ích trước khi tôi có được địa chỉ tạm thời của hình ảnh mã QR, tôi đã thêm một cờ (wxmlIsReady).

  。

Hình ảnh bạn nhìn thấy có vẻ như có bóng hộp, wxml-to-canvas không hỗ trợ bóng hộp CSS, tôi chỉ có thể sử dụng chế độ xem để vẽ nó theo vòng tròn, nhưng các cạnh không đủ mờ và tôi cần phải tiếp tục. cải thiện nó.

Cuối cùng, bài viết này về [uniapp] [Chương trình WeChat Mini] wxml-to-canvas kết thúc tại đây. Nếu bạn muốn biết thêm về [uniapp] [Chương trình WeChat Mini] wxml-to-canvas, vui lòng tìm kiếm các bài viết về CFSDN hoặc tiếp tục duyệt qua. các bài viết liên quan tôi hy vọng bạn sẽ ủng hộ blog của tôi trong tương lai! .