such as the title. Like SUNING"s Mini Program, some product details will appear in the lower left corner of the picture after sharing. Look at it carefully, not a screenshot. How did he do it? I also want to achieve this function.
share a function code of canvas's self-defined content in our Mini Program to share pictures
//
drawImg: function (e) {
console.log('draw')
let val = e.currentTarget.dataset.cl
this.getClassTask(val.classId)
this.setData({
shareWork: val
})
const ctx = wx.createCanvasContext('myCanvas')
ctx.drawImage('../../../img/teacher/share_bac.png', 0, 0, 500, 400)
ctx.setFontSize(24)
ctx.setFillStyle('-sharpfff')
ctx.fillText(val.className + '', 40, 60)
ctx.setFontSize(34)
if (val.stepTaskNum === 0 && val.bookTaskNum === 0) {
ctx.fillText('', 40, 125)
} else {
if (val.stepTaskNum > 0) {
ctx.setFontSize(34)
ctx.setFillStyle('-sharpfff')
ctx.fillText('', 80, 125)
ctx.setFillStyle('-sharpffff33')
ctx.setFontSize(38)
ctx.fillText(val.stepTaskNum, 40, 125)
}
if (val.bookTaskNum > 0) {
ctx.setFontSize(34)
ctx.setFillStyle('-sharpfff')
ctx.fillText('', 80, 175)
ctx.setFillStyle('-sharpffff33')
ctx.setFontSize(38)
ctx.fillText(val.bookTaskNum, 40, 175)
}
}
ctx.setFontSize(22)
ctx.setFillStyle('-sharpfff')
ctx.fillText('>>', 40, 260)
ctx.setFontSize(24)
ctx.fillText(this.timeGet(new Date().getTime()), 360, 60)
ctx.draw()
var _this = this
setTimeout(() => {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 500,
height: 400,
destWidth: 500,
destHeight: 400,
canvasId: 'myCanvas',
success: function (res) {
_this.setData({
path: res.tempFilePath,
modalShare: true
})
console.log(res.tempFilePath)
}
})
}, 300)
} you can draw text and pictures on a background
if you still have something you don't understand, you can trust me
~ ps: it's best to open and share the next tick after the picture drawing function is called, otherwise the picture will be empty
Mini Program API only supports title + picture. Pictures can be drawn in custom pictures instead of default screenshots.
the text matched by the search box above an article is highlighted to realize the idea. ...
for example, the details page, after sharing, other people open, can only see this page, I did not find a useful way to set API back to a route. You have to write it on the page? ...
app.json is configured with "Workers ": "Workers ", everything else is written according to the document ...
WxParse data call display succeeded, but there was an error VM57117:1 undefined template < import src= ".. wxParse wxParse.wxml " > <template is="wxParse" data="{{wxParseData:imgcontent.nodes}}" > js ...
1, the three major components of JavaScript-ECMAScript, DOM (document object model, corresponding to document object), and BOM (browser object model, corresponding to window object). 2. Mini Program supports ECMAScript, but does not support document,win...
how is the picture on Mini Program who made our picture synthesized? Is there any great god who knows ...
how does the following code wx.navigateTo get the data of wx.request ? use this.data. * to undefined directly and ask the master to give me some advice Thank you here! index.js var config = require( .. .. config ) var util = require( .. .. u...
I want to achieve an effect similar to two-way data binding, but Mini Program is a typical one-way data binding, so I add a layer of binding manually and find that stutter is obvious, for example: 1, there is an input <input value={{n}} bindinput=...
...
wanted to be a Mini Program who memorized words, but found that no corresponding api interface was provided. After searching the Internet, I found that SpeechSynthesisUtterance allows JavaScript to read aloud without networking. But when the real phone i...
currently, a project is under development. The following code is used to send data on Wechat developer s tool. The server can receive the data and parse it successfully, but the debug QR code of scanning developer s tool cannot send data on the real p...
cAuth.sql ...
as shown in the picture, yellow is a large page, and red is a component that introduces (components), and wraps the red component with from tags. Now I want to use the button of the red component to trigger a yellow from submission event. Is that okay? ...
for example, the data is received through Mini Program s websocket. The binary array is . [0, 0, 0, 45, 0, 2, 0, 0, 0, 0, 1, 0, 4, 0, 0, 0, 0, 2, 0, 8, 115, 117, 99, 99, 101, 101, 100, 0, 3, 0, 4, 0, 0, 0, 0, 4, 0, 7, 49, 48, 48, 48, 48, 48, 0] the se...
The home page is a transit page, get a value from the server, and then jump to the corresponding page according to this value. And then I found the problem. No matter using navigatorTo or redirecTo, mobile phone to scan the code, you can enter it for the...
how does the address of the background image taken by the interface change the background image of the outermost page? wxss page { background: url("http: music.163.com api img blur 109951163240732641") no-repeat; background-position: 5...
< H2 > I want to change the red box in the picture to how many days ago < H2 > ...
WeChat Mini Programs swiper slider view container, : I wonder if they use swiper implementations ...
before the development environment deployed https, later lazy to assign certificates to webpack-dev-server, because of HSTS problems, and then found that Mini Program development tools automatically 307 to https. chrome I know how to solve it, but Min...
the first time I developed Mini Program, I saw that Mini Program could set es6 to es5, so I used some es6 syntax, such as let, const, arrow function and this in it. But I don t know if Mini Program will be all right in the low version of Android browser...