The native applet uses canvas to make posters, which are scaled to the same scale. It is similar to the uniapp, but the writing method is a little different

Finally, look at the rendering directly ; Don't bullshit , Go straight to the code , design sketch .

（ Four file copies can be used directly , The code has comments ）

Ideas ： When we use iphone6/7/8 At the time of foundation , You'll see Get the width of the screen as 350, High for 603, This is the screen data obtained by the wechat development tool . 1、 Picture in canvas When , You can set the height first , Width and width . 2、 When your canvas When you need to put it on the screen of other mobile phones , You need to use other mobile phones wide /iphone678 wide high /iphone678 high Get it （ Zoom in or out ） The proportion of .3、 Then multiply by the width of the picture 、 high 4、 The width and height of the text should be set just like the picture
js↓↓↓↓↓↓ file ：

// pages/manage/myshare/painter.js
Page({

  /**
   *  Initial data of the page 
   */
  data: {
var foo = 'bar';
  },

  /**
   *  Life cycle function -- Monitor page loading 
   */
  onLoad: function (options) {

  },

  /**
   *  Life cycle function -- Listening page first rendering completed 
   */
// canvas.js
    onReady: function (e) {

	},  
    sening: function(e) {
	    var that = this;
			wx.getSystemInfo({
				success: function(res) {
					console.log(res.windowHeight)
					console.log(res.windowWidth)
					console.log(res.pixelRatio)
					let windowscale = res.windowHeight/res.windowWidth;
					console.log(windowscale)
					//  Put the data in data
					that.setData({
						windowHeight: res.windowHeight,
						windowWidth: res.windowWidth,
						windowscale:windowscale,
						psScal:res.windowWidth/350,// wide // With iphone6/7/8  Based on width and height . You can use other , Scale 
						psScal1:res.windowHeight/603// high // With iphone6/7/8  Based on width and height . You can use other , Scale 
					})
				},
			})
			var windowWidth = Number(that.data.windowWidth);
			var windowHeight = Number(that.data.windowHeight);
			// console.log(windowWidth*2)
			var wscale = that.data.windowscale;
			console.log(windowHeight)
			const ctx = wx.createCanvasContext('shareImg')
			
			//  The main thing is to calculate the position of each picture and text 
			//  Green picture of the head 
			var psScal = windowWidth/350
			var psScal1 = windowHeight/603
			// Print aspect ratio 
			console.log(psScal)
			console.log(psScal1)
			let topGreen = '../../../images/beijing212.jpg';
			ctx.drawImage(topGreen, 0, 0, psScal*270, psScal1*270)
			//  QR code picture 
			let botWhite = '../../../images/qcm.jpg';
			ctx.drawImage(botWhite, psScal*170,psScal1*320, psScal*100, psScal1*100)
			
			/***
			//  Set text size **
			****/ 
			ctx.setTextAlign('center')
			ctx.setFontSize(15)
			ctx.fillStyle = '#fff';
			var hedetxt = '';
			//  Fill in the text 
			ctx.fillText(hedetxt, psScal*254 / 2, psScal1*200)
			
			//  Set text size 
			ctx.setTextAlign('center')
			ctx.setFontSize(13)
			ctx.fillStyle = '#333';
			var hedbt = ' A thousand miles away is a kiss , Communication with love  ！';
			//  Fill in the text 
			ctx.fillText(hedbt, psScal*254 / 2, psScal1*290)
			
			ctx.setTextAlign('left')
			ctx.setFontSize(20)
			ctx.fillStyle = '#1F2C3A';
			var position = "";
			var chr = position.split(""); //that.data.arr.title This method splits a string into an array of strings 
			var temp = "";
			var row = [];
			for (var a = 0; a < chr.length; a++) {
				if (ctx.measureText(temp).width < windowWidth + 50) {
					temp += chr[a];
				} else {
					a--; // Here added a--  To prevent character loss , There's a contrast in the renderings 
					row.push(temp);
					temp = "";
				}
			}
	      row.push(temp);
	      // If the array length is greater than 2  Then intercept the first two 
	      if (row.length > 2) {
	        var rowCut = row.slice(0, 3);
	        //  This parameter can determine how many lines are displayed 
	        var rowPart = rowCut[1];
	        var test = "";
	        var empty = [];
	        for (var a = 0; a < rowPart.length; a++) {
	          if (ctx.measureText(test).width < windowWidth) {
	            test += rowPart[a];
	          } else {
	            break;
	          }
	        }
	        empty.push(test);
	        var group = empty[0] // Only two lines are shown here , Use the excess ... Express 
	        rowCut.splice(1, 1, group);
	        row = rowCut;
	      }
	      for (var b = 0; b < row.length; b++) {
	        ctx.fillText(row[b], psScal*26, psScal1*(320 + b * 50));
	      }
	      // //  Set text size 
	      // ctx.setTextAlign('center')
	      // ctx.setFontSize(26)
	      // ctx.fillStyle = '#1F2C3A';
	      // var rtt = ' I am reading this article , Recommended to you ';
	      // //  Fill in the text 
	      // ctx.fillText(rtt, 540 / 2 + 68, 590)
		  
		  // 1、 Set text size 
		  ctx.setFontSize(34)
		  console.log("psScal*34") 
		  console.log(psScal*34) 
		  ctx.fillStyle = '#1dacf9';
		  var rbc = ' Rui ';
		  //  Fill text and set position 
		  ctx.fillText(rbc,  psScal*20, psScal1*330)
		  
		  
		  // 2、 Set text size 
		  ctx.setFontSize(34)
		  ctx.fillStyle = '#1dacf9';
		  var rbc = ' navigation ';
		  //  Fill text and set position 
		  ctx.fillText(rbc,  psScal*60, psScal1*355)
	   
	      // 3、 Set text size 
	      ctx.setFontSize(12)
	      ctx.fillStyle = '#aaa';
	      var rct = ' Applet code ';
	      //  Fill text and set position 
	      ctx.fillText(rct,  psScal*40, psScal1*400)
	   
	      // 4、 Set text size 
	      ctx.setFontSize(12)
	      ctx.fillStyle = '#aaa';
	      var rbl = ' Qianhang Bairui ,';
	      //  Fill text and set position 
	      ctx.fillText(rbl,psScal*5, psScal1*415)
	   
	  
	   
	      // 5、 Set text size 
	      ctx.setFontSize(12)
	      ctx.fillStyle = '#aaa';
	      var rbr = ' Walk with love ';
	      //  Fill text and set position 
	      ctx.fillText(rbr,  psScal*80, psScal1*415)
	      ctx.draw()
  },


  /**
   *  Life cycle function -- Monitor page display 
   */
  onShow: function () {
		this.sening()
  },

  /**
   *  Life cycle function -- Monitor page hidden 
   */
  onHide: function () {

  },

  /**
   *  Life cycle function -- Monitor page uninstall 
   */
  onUnload: function () {

  },

  /**
   *  Page related event handler -- Monitor user pull-down action 
   */
  onPullDownRefresh: function () {

  },

  /**
   *  Handling function of page pull bottom event 
   */
  onReachBottom: function () {

  },

  /**
   *  Users click the upper right corner to share 
   */
  onShareAppMessage: function () {

  }
})

.wxml↓↓↓↓↓↓↓ file

<view style="background-color:rgba(0,0,0,0.2);width:100vw;height: 100vh;box-sizing: border-box;">
  <!-- canvas.wxml psScal*psScal*-->
<view class="box-ps">
<canvas class="canvas" style="width:{
   {psScal*270}}px;height:{
   {psScal1*425}}px"  canvas-id="shareImg" ></canvas>
<view class="bottom">
	<view class="arrow0"> preservation </view>
	<view class="arrow1"> Cancel </view>
</view>
</view>
</view>

.wxss↓↓↓↓↓↓↓ file

/* pages/manage/myshare/painter.wxss */
.canvas{
	background-color: #fff;
	border: 1rpx solid rgba(0,0,0,0.3);
	margin:0 auto;
}

.box-ps{
	width:100%;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	/* justify-content: space-around; */
	height:auto;
	padding: 70rpx;
	margin:0 auto;
	box-sizing: border-box;
}

.bottom{
	display: flex;
	flex-direction: row;
	margin-top: 70rpx;
	width: auto;
	box-sizing: border-box;
	justify-content: space-around;
}

.arrow0{
	text-align: center;
	border-radius: 30rpx;
	/* margin-left: 50rpx; */
	width: 130rpx;
	font-size: 14px;
	padding: 13rpx 40rpx;
	background-color: #2fa5ff;
	color: #fff;
}

.arrow1{
	text-align: center;
	border-radius: 30rpx;
	width: 130rpx;
	/* margin-right: 50rpx; */
	font-size: 14px;
	padding: 13rpx 40rpx;
	background-color: #2fa5ff;
	color: #fff;
}

json↓↓↓↓↓↓↓↓ file

{
  "usingComponents": {
	  "painter":"/components/painter"
  }
}

See the effect picture here ↓↓↓↓↓↓↓↓↓↓↓↓↓：