小程序只能轉(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)下載源碼。如果有不清楚的地方歡迎留言。