Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "how to achieve Mini Program sharing page pictures". In the operation of actual cases, many people will encounter such a dilemma. Then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

When developing WeChat Mini Programs, we often encounter the sharing function of saving Mini Program QR code pictures like the one above.

First, you need to create an artboard canvas in wxml.

Wxml:

Save Picture / / Save Picture button

/ / you can use the back of the canvas-id here.

/ / the width and height in style should be used. If you don't set the width and height, the artboard will become invalid.

/ / canvasHidden is a parameter that controls the hidden display of the artboard. Setting display none directly on the artboard will lead to invalidation.

Data:

Data: {

CanvasHidden:true, / / set the display and hiding of the artboard. Not hiding the artboard will affect the normal display of the page.

AvatarUrl:'', / / user profile picture

NickName:'', / / user nickname

WxappName: app.globalData.wxappName, / / Mini Program name

ShareImgPath:''

ScreenWidth:'', / / device screen width

Description: app.globalData.description, / / prize description

FilePath:'', / / avatar path

}

Js:

OnLoad: function (options) {

Var that = this

Var userInfo, nickName, avatarUrl

/ / get user information, profile pictures, nicknames and other data

Wx.getUserInfo ({

Success: function (res) {

Console.log (res)

UserInfo = res.userInfo

NickName = userInfo.nickName

AvatarUrl = userInfo.avatarUrl

That.setData ({

AvatarUrl: res.userInfo.avatarUrl

NickName: res.userInfo.nickName

})

Wx.downloadFile ({

Url: res.userInfo.avatarUrl

})

}

})

/ / get user device information, screen width

Wx.getSystemInfo ({

Success: res = > {

That.setData ({

ScreenWidth: res.screenWidth

})

Console.log (that.data.screenWidth)

}

})

/ / defined method for saving pictures

SaveImageToPhotosAlbum:

Function () {

Wx.showLoading ({

Title: 'saving...'

})

Var that = this

/ / set the artboard display before you can start drawing

That.setData ({

CanvasHidden: false

})

Var unit = that.data.screenWidth / 375,

Var path2 = ".. / images/bg3.png"

Var avatarUrl = that.data.avatarUrl

Console.log (avatarUrl + "avatar")

Var path3 = ".. / images/award.png"

Var path4 = ".. / images/qrcode.png"

Var path5 = ".. / images/headborder.png"

Var path6 = ".. / images/border.png"

Var unlight = ".. / images/unlight.png"

Var nickName = that.data.nickName

Console.log (nickName + "nickname")

Var context = wx.createCanvasContext ('share')

Var description = that.data.description

Var wxappName = "come"+ that.data.wxappName +"try your luck"

Context.drawImage (path2, 0,0, unit * 375, unit * 462.5)

/ / context.drawImage (path5, unit * 164, unit * 40, unit * 50, unit * 50)

Context.drawImage (path3, unit * 48, unit * 120, unit * 280, unit * 178)

Context.drawImage (path6, unit * 48, unit * 120, unit * 280, unit * 178)

Context.drawImage (unlight, unit * 82, unit * 145, unit * 22, unit * 32)

Context.drawImage (unlight, unit * 178, unit * 145, unit * 22, unit * 32)

Context.drawImage (unlight, unit * 274, unit * 145, unit * 22, unit * 32)

Context.drawImage (unlight, unit * 82, unit * 240, unit * 22, unit * 32)

Context.drawImage (unlight, unit * 178, unit * 240, unit * 22, unit * 32)

Context.drawImage (unlight, unit * 274, unit * 240, unit * 22, unit * 32)

Context.drawImage (path4, unit * 20, unit * 385, unit * 55, unit * 55)

/ / context.drawImage (path5, 48,200,280128)

Context.setFontSize (14)

Context.setFillStyle ("# 999")

Context.fillText ("long press to identify Mini Program", unit * 90, unit * 408)

Context.fillText (wxappName, unit * 90, unit * 428)

/ / draw the content of the artboard into a picture, and call back the path of the artboard image

Context.draw (false, function () {

Wx.canvasToTempFilePath ({

X: 0

Y: 0

Width: unit * 375

Height: unit * 462.5

DestWidth: unit * 375

DestHeight: unit * 462.5

CanvasId: 'share'

Success: function (res) {

That.setData ({

ShareImgPath: res.tempFilePath

})

If (! res.tempFilePath) {

Wx.showModal ({

Title: 'hint'

Content: 'the picture is being drawn, please try again later'

ShowCancel: false

})

}

Console.log (that.data.shareImgPath)

/ / after the artboard path is saved successfully, call the method to save the picture to the user album

Wx.saveImageToPhotosAlbum ({

FilePath: res.tempFilePath

/ / after the success or failure of saving, hide the artboard, otherwise it will affect the display of the interface.

Success: (res) = > {

Console.log (res)

Wx.hideLoading ()

That.setData ({

CanvasHidden: true

})

}

Fail: (err) = > {

Console.log (err)

Wx.hideLoading ()

That.setData ({

CanvasHidden: true

})

}

})

}

})

})

}

This is the end of the content of "how to share page pictures on Mini Program". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.