This is the 22nd day of my participation in the August Wen Challenge.More challenges in August

1. Generate sharing posters

Effect:

<view class="shareContainer"> <canvas style="height: 100%; width: 100%; backgroundColor: #FFFFFF" canvas-id="shareCanvas"></canvas> </view> data() { return { bgCanvas: // Canvas qr code screenWidth: ",//canvas qr code screenWidth: ",// device screenHeight: ",// device screen height}}, onLoad(options) {let _this = this; Uni.getsysteminfo ({success: res => {_this.screenWidth= res.screenWidth; _this.screenHeight = res.screenHeight; }}) uni. GetImageInfo ({SRC: "https://a.png",// function (res) { _this.bgCanvas = res.path; }}) uni. GetImageInfo ({SRC: "https://a.png",// qR code success: function (res) {_this.sharecodecanvas = res.path; } }) }, methods: { saveImg() { let _this = this; let ctx = uni.createCanvasContext('shareCanvas'); Uni. showLoading({title:' Saving... ' }) let maxWidth = _this.screenWidth; let screenHeight = _this.screenHeight; ctx.drawImage(_this.bgCanvas, 0, 0, _this.screenWidth, 650); SetTimeout (()=> {ctx.drawImage(_this.shareCodeCanvas, 100, 170, 150, 150); SetFontSize (20); ctx.setfontsize (20); ctx.textAlign = 'center'; Ctx.setfillstyle ('#333333'); ctx.font = 'normal bold 20px sans-serif'; Ctx. fillText(' invite to share ',maxWidth/2,375,maxWidth); },800) setTimeout(()=> {ctx.draw(false, 0) {ctx.draw(false, 0) {ctx.draw(false, 0); () => {uni.canvastotempFilepath ({x: 0, y: 0, width: uni.upx2px(750), height: uni.upx2px(1300), destWidth: uni.upx2px(750), destHeight: uni.upx2px(1300), canvasId: 'shareCanvas', fileType: 'jpg', success: function(res) { uni.hideLoading(); Uni. SaveImageToPhotosAlbum ({filePath: res tempFilePath, success: the function () {uni. ShowToast ({title: 'save success! '}}})); }})})},1500)}}Copy the code

There is a lot to pay attention to about Canvas, otherwise there will be a lot of problems.

Note:

1, be sure to put the background and used pictures are downloaded in advance, or the later loading will be slow or will not show.

2. All images must be HTTPS secure domain names, otherwise a black background will appear on the real machine

3. The background image and two-dimensional code should be loaded in different times, otherwise it will not be the background image, so the delay is set

The fillText second parameter x must be set to the full width divided by 2, and the fillText second parameter x must be set to the full width divided by 2.

** 2, ** run package release

  • Applets run and publish

1. I just realized that I didn’t write how to run the project. First, select Run, run the mini program simulator, wechat developer tool, and then open the mini program developer tool. Every time a page is saved, the applets development tool is updated.

2, small programs can be directly uploaded to the experience version on the developer tools, and then uploaded to the wechat platform for review, after the successful review is the official version of the small program.

  • H5 runs publishing

1, H5 can be run to the browser, if not the public number type, directly run like this, then there will be files in the dist directory can be directly packaged to the server and put in the nginx directory

2. If it is the public account type, it must be issued, choose website-PC-Web or mobile phone H5, and finally put the project name \unpackage\dist\ Build \ H5 in the folder, and then send it to the server. Then go to the wechat development tool to change the debugging mode of the public account, enter the page address in the address bar, and only access online. It is more troublesome, so the adjustment interface to print some files, it is best to upgrade the small program, and then run H5 to wechat to see where there is a problem to change, it is best to adjust a platform to optimize another platform.