So erstellen Sie mit dem Miniprogramm Bilder für Ihren Freundeskreis

Dieser Artikel stellt hauptsächlich vor, wie man mit dem Miniprogramm Bilder im Freundeskreis generiert. Er hat einen gewissen Referenzwert. Jetzt können Freunde in Not darauf verweisen Es gibt keine Funktion zum Teilen in Moments. Miniprogramme können derzeit nur an Gruppen weitergegeben oder an Freunde gesendet werden. Aber das Geschäft muss einfach beworben und mit Freunden geteilt werden können.

Nachdem ich einige Recherchen durchgeführt hatte, kam ich auf die folgende Idee: Verwenden Sie die kleine Programmleinwand, um Bilder zu zeichnen, und zeichnen Sie das Hintergrundbild und den QR-Code in ein Bild. Nachdem ich mir mehrere gute Demos von Baidu angesehen hatte, dachte ich, es wäre einfach, dieses Problem zu lösen, aber das ist nicht die Schwierigkeit des Mini-Programm-Canvas!

　WXML

  <view class=&#39;canvas-box&#39;>
    <canvas style="width:750rpx; height:940rpx;" canvas-id="myCanvas"/>
    <image src=&#39;{{imagePath}}&#39;></image>  
  </view>

519d136da5c03418e1e944c2c050d1c2Erstelle einen Freundeskreis, der Bilder teilt65281c5ac262bf6d81768915a4a77ac0,

Dies ist die Schaltfläche, die die Leinwand auslöst

Erkennungs-QR-Code durch langes Drücken zeichnen

  settext: function (context) {
    let _this = this;    
    var size  = _this.setCanvasSize();    
    var text  = "长按识别小程序";
    context.setFontSize(12);
    context.setTextAlign("center");
    context.setFillStyle("#000");
    context.fillText(text, size.w / 2, size.h * 0.90);
    context.stroke();
  },

Bild zeichnen

createNewImg: function () {    
var _this       = this;    
var size        = _this.setCanvasSize();    
var context     = wx.createCanvasContext('myCanvas');    
var path        = "/assets/images/qrshare1.jpg";  //测试的图片    
var imageQrCode = _this.data.filePath;　　　　　　　//二维码
    context.drawImage(path, 0, 0, size.w, size.h);
    context.drawImage(imageQrCode, size.w / 2 - 55, size.h * 0.55, size.w * 0.33, size.w * 0.33);    
    this.settext(context);    //绘制图片    
    context.draw();    //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时    
    wx.showToast({
      title   : '生成中...',
      icon    : 'loading',
      duration: 2000
    });
    setTimeout(function () {
      wx.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success : function (res) {          
        var tempFilePath = res.tempFilePath;
          _this.setData({
            imagePath   : tempFilePath,
          });     
          var img  = _this.data.imagePath;
          let urls = []
          urls.push(img, '二维码路径')   //二维码路径是为了用户也可以保存二维码，分享到朋友圈有合成的图片也有二维码（参考拉钩小程序分享）
          wx.previewImage({
            current: img,  // 当前显示图片的http链接
            urls   : urls  // 需要预览的图片http链接列表          })
        },
        fail: function (res) {
          console.log(res);
        }
      });
    }, 2000);
  },

Ursprünglich zeichne ich die Netzwerkbilder direkt, aber auf der realen Maschine werden die Netzwerkbilder nicht angezeigt! Also habe ich Baidu durchsucht und festgestellt, dass ich es zuerst herunterladen und dann das von der Schnittstelle zurückgegebene Bild zeichnen kann

//生成朋友圈图片  createSharePic() {
    let _this = this,
        qrcode= _this.data.qrcode
    wx.downloadFile({
      url    : qrcode,
      success: function (res) {        
      if (res.statusCode === 200) {
          _this.setData({
            filePath: res.tempFilePath,
          })
          _this.createNewImg();
        }
      }
    })
    
  }

Das Problem trat auf. Es gab kein Problem Lokales Testen und Remote-Debugging. Sie können Bilder erstellen und auf Ihrem Telefon speichern

Nachher Als ich eine Weile nachdachte, stellte ich fest, dass ich keinen Hintergrund hatte. Fügen Sie den Download-Domainnamen des Downloads hinzu. Denn normalerweise ist das lokale Kontrollkästchen aktiviert, um den Domänennamen nicht zu überprüfen. Ich habe mich also schon lange darüber gewundert! ! ! ! ! ! !

Zusammenfassung:

Die kleine Programmfläche ist beim Schreiben von Stilen und px für die Fläche schwer zu kontrollieren >

Netzwerkbilder werden nicht angezeigt (wenn ich Netzwerkbilder verwende, werden sie nicht angezeigt. Ich bin mir nicht sicher, ob dieses Problem ein Problem mit meiner Bedienung oder eine Einschränkung des Miniprogramms ist. Ich hoffe, die Experten können es Geben Sie mir eine eindeutige Schlussfolgerung)

Sie müssen den Download-Domainnamen im WeChat-Hintergrund festlegen (ich habe hier die Methode des Zeichnens nach dem Herunterladen verwendet. Wenn Sie eine Methode ohne Herunterladen haben, bitte Lassen Sie es mich wissen!

Verwandte Empfehlungen:

So verwenden Sie Miniprogramme für das Seitenlayout mithilfe interner Ansichtskomponenten

So verwenden Sie Miniprogramme für die Implementierung von Schleifenbindungselement-Klickereignis

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit dem Miniprogramm Bilder für Ihren Freundeskreis. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!