The difference with ordinary web development

  1. The web development rendering thread and script thread are mutually exclusive, which is why long script runs can cause the page to become unresponsive, whereas in applets the two are kept separate and run on separate threads. Web developers can use the DOM API exposed by various browsers for DOM selection and manipulation.
  2. The logic layer of the applet is separate from the render layer. The logic layer runs in JSCore and does not have a full browser object, so it lacks the DOM API and BOM API.
  3. JQuery, Zepto, etc., will not run in small programs.

Save posters to albums

createSelectorQuery

const query = wx.createSelectorQuery()
query.select('#myCanvas')
  .fields({ node: true.size: true })
  .exec((res) = > {
    const canvas = res[0].node
    const ctx = canvas.getContext('2d')
Copy the code

CreateImage (Create a picture object)

const bg = canvas.createImage()
 bg.src = 'https://game.gtimg.cn/images/lol/act/img/skin/big516000.jpg';
    bg.onload = (res) = > {
      ctx.drawImage(bg, 0.0.700.600)
      ctx.fillStyle = "# 000000"
      ctx.font = "50px sans-serif"
      ctx.fillText("Wechat mini Program Poster Sharing".40.800.200)}Copy the code

CanvasToTempFilePath (Export image)

wx.canvasToTempFilePath({
    x: 0.y: 0.width: 500.height: 700.destWidth: 500.destHeight: 700.canvas: canvas,
    success(res) {
      console.log(res,'Exporting image succeeded')
      wx.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success(info) {
          console.log(info)
         }
      })
    },
    fail(err) {
      console.log(err)
    }
    })
Copy the code

SaveImageToPhotosAlbum (Save images to system album)

wx.saveImageToPhotosAlbum({
    filePath: res.tempFilePath,
    success(info) {
      console.log(info)
     }
  })
Copy the code

Case experience

Some rough, test demo is not important ah wechat small program official documentation has not been updated for the time being, such as: draw method can not be found unable to call