小程序只能轉(zhuǎn)發(fā)給好友,或者轉(zhuǎn)發(fā)到微信群,并不能轉(zhuǎn)發(fā)到朋友圈,那么朋友圈的巨大流量應(yīng)該怎么利用起來(lái)呢? 目前來(lái)看,很多小程序的做法是生成一張帶小程序碼的圖片,然后用戶可以分享圖片到朋友圈,通過(guò)這樣的方式來(lái)導(dǎo)朋友圈的流量。 但是這樣做還是有一定風(fēng)險(xiǎn)的,有可能會(huì)被騰訊打上誘導(dǎo)分享的標(biāo)簽,具體可以做到什么程度還不是很清楚。 怎樣生成圖片并保存呢?這篇文章做一些簡(jiǎn)單的嘗試,生成一個(gè)帶文字和小程序碼的圖片,希望能對(duì)你有一些啟發(fā)。 這個(gè)圖片的構(gòu)成是:一個(gè)矩形,既整塊畫布、文字內(nèi)容、一條橫線和一個(gè)小程序碼。 首先來(lái)看 wmxl 文件: <view> <canvas style="width:100%;height:{{contentHeight}}px" canvas-id="myCanvas">canvas> <view class="edit-footer"> <button class="button-done" type="primary" bindtap="savePic">保存圖片button> view> view> 使用 來(lái)表示畫布,畫布的寬取屏幕的寬,高根據(jù)內(nèi)容的高度來(lái)動(dòng)態(tài)獲取。 再來(lái)看 js 文件: drawSquare: function (ctx, height) { ctx.rect(0, 50, this.data.windowWidth, height); ctx.setFillStyle("#f5f6fd"); ctx.fill() } 畫矩形,也是整塊畫布的大小,寬度是屏幕寬度,高度根據(jù)內(nèi)容多少來(lái)動(dòng)態(tài)設(shè)置。 drawFont: function (ctx, content, height) { ctx.setFontSize(16); ctx.setFillStyle("#484a3d"); ctx.fillText(content, this.data.offset, height); } 設(shè)置文字大小,并填充顏色。 drawLine: function (ctx, height) { ctx.beginPath(); ctx.moveTo(this.data.offset, height); ctx.lineTo(this.data.windowWidth - this.data.offset, height); ctx.stroke('#eee'); ctx.closePath(); } 畫線。 createNewImg: function (lineNum) { let that = this; let ctx = wx.createCanvasContext('myCanvas'); let contentHeight = lineNum * that.data.lineHeight + 180; that.drawSquare(ctx, contentHeight); that.setData({ contentHeight: contentHeight }); let height = 100; for (let item of that.data.thinkList) { if (item !== 'a') { that.drawFont(ctx, item, height); height += that.data.lineHeight; } } that.drawLine(ctx, lineNum * that.data.lineHeight + 120); that.drawFont(ctx, that.data.footer, lineNum * that.data.lineHeight + 156); ctx.drawImage('../../static/images/think.png', that.data.windowWidth - that.data.offset - 50, lineNum * that.data.lineHeight + 125, 50, 50); ctx.draw(); } 根據(jù)文字多少動(dòng)態(tài)計(jì)算高度,然后依次畫出矩形,文字,橫線和小程序碼。 savePic: function () { let that = this; wx.canvasToTempFilePath({ x: 0, y: 50, width: that.data.windowWidth, height: that.data.contentHeight, canvasId: 'myCanvas', success: function (res) { util.savePicToAlbum(res.tempFilePath) } }) } 保存圖片。 說(shuō)明一下文字的顯示邏輯,由于文字是不能自動(dòng)換行的,所以需要提前設(shè)置好文字的大小和每行顯示文字的個(gè)數(shù),然后按照每行顯示的個(gè)數(shù)來(lái)對(duì)文字進(jìn)行分組,最后再顯示。 以上均為代碼片段,可以到我的 GitHub來(lái)下載源碼。如果有不清楚的地方歡迎留言。 |
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)