Présentation des précautions pour le développement de canevas du mini-programme WeChat

Tutoriel de développement de mini-programmesLa chronique présente les questions nécessitant une attention particulière dans le développement de canevas

Recommandations d'apprentissage associées : Tutoriel de développement de mini-programmes

Mini programme WeChat wxcanvas

Le téléphone de test est IPHONE6, version 0.10.102800 des outils de développement. Il en va de même pour la version 0.11.112301 des outils de développement

Le canevas du mini-programme WeChat et le canevas non-h5 présentent de nombreuses différences. Ci-dessous, le canevas du mini-programme WeChat s'appelle wxcanvas

<.>

ci-dessous Voici toutes les informations utiles que j'ai testées petit à petit, veuillez lire patiemment :

1.wxcanvas n'a pas d'attributs de largeur et de hauteur ni de styles de largeur et de hauteur comme h5canvas. Il n'a que du style, qui peut être compris comme une boîte ;

2 Ne considérez pas wxcanvas comme un vrai H5canvas, considérez-le simplement comme un p. Les choses qui dessinent des plages existent également. et la hauteur. Il est affiché, ou il y a un redessin ici, mais je ne sais pas comment l'implémenter

3. Changer la largeur et la hauteur du style de wxcanvas ne change pas la taille du ; les éléments sur le canevas d'origine ;

4. L'agrandissement et la réduction de la transformation CSS ne peuvent pas changer la taille des éléments sur le canevas d'origine

5. enregistre les appels de méthode, utilisés pour générer et enregistrer le tableau d'actions de dessin. Il n'existe aucune relation correspondante entre le contexte et 9eb6a00f944b38c7333d032ed32cee03. Le tableau d'actions de dessin d'un canevas généré par le contexte peut être appliqué à plusieurs 9eb6a00f944b38c7333d032ed32cee03.

En fait, après context.getActions(), les informations dans le contexte seront effacées. Si vous souhaitez les réutiliser, vous avez besoin de var temp=context.getActions() pour enregistrer le tableau d'opération avant de pouvoir le faire. être réutilisé dans wx .drawcanvas

6. Notez que

wx.drawCanvas({
　　canvasId: 'target',
　　actions: context.getActions()
});

effacera le canevas par défaut. Si vous ne souhaitez pas l'effacer, vous devez le faire.

wx.drawCanvas({
  canvasId: 'target',
  actions: context.getActions(),
  reserve:true
});

7.《Points clés》

<canvas disable-scroll="true" catchtouchmove="ccvsMove" bindtouchmove="cvsMove" canvas-id="target" id="target" style=&#39;width:{{width}}px;height:{{height}}px&#39;></canvas>

Notez que Disable-scroll="true" et bindtouchmove="cvsMove" existent au en même temps pour empêcher la page de bouger. Catchtouchmove ne fonctionne pas

ci-dessus La manière d'écrire, ccvsMove et cvsMove se déclenchera tous les deux

ccvsMove renvoie des objets d'événement tactiles ordinaires, notamment pageX, clientX, etc.,

cvsMove renvoie les objets d'événement canvasTouch, sans pageX, clientX, seulement x, y

8.

wx.drawCanvas({
  canvasId: 'target',
  actions: [],
  reserve:false
});

peut effacer le canevas et l'état du canevas

9. La rotation de l'échelle et les autres états du canevas continueront lorsque reserve:true L'état des temps

10 Le tableau renvoyé par context.getActions() est très utile lorsque vous. imprimez-le, vous constaterez que vous pouvez comprendre le contenu à l'intérieur. Vous pouvez directement modifier le tableau pour changer l'action de dessin

11. Lorsque wx.drawCanvas, context.drawImage peut être dessiné sur le téléphone mobile, mais ne peut pas être dessiné sur l'outil de développement informatique

12.wx.canvasToTempFilePath

Il n'y a qu'une seule ligne dans le document officiel, il s'avère

Le paramètre wx.canvasToTempFilePath est un objet comprenant canvasID, success, fail et complete, qui est similaire à wx.saveFile;

      wx.canvasToTempFilePath({
       canvasId: 'target',
       success: function success(res) {
        wx.saveFile({
         tempFilePath: res.tempFilePath,
         success: function success(res) {
          console.log('saved::' + res.savedFilePath);
         },
         complete: function fail(e) {
          console.log(e.errMsg);
         }
        });
       },
       complete: function complete(e) {
        console.log(e.errMsg);
       }
      });

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!