小程序隻能轉發給好友，或者轉發到(dào)微信群，并不(bù)能轉發到(dào)朋友圈，那麽朋友圈的(de)巨大(dà)流量應該怎麽利用起來(lái)呢？

目前來(lái)看，很多小程序的(de)做法是(shì)生成一張帶小程序碼的(de)圖片，然後用戶可以(yǐ)分享圖片到(dào)朋友圈，通過這(zhè)樣的(de)方式來(lái)導朋友圈的(de)流量。

但是(shì)這(zhè)樣做還是(shì)有一定風險的(de)，有可能會被騰訊打上(shàng)誘導分享的(de)标簽，具體可以(yǐ)做到(dào)什麽程度還不(bù)是(shì)很清楚。

怎樣生成圖片并保存呢？這(zhè)篇文章做一些簡單的(de)嘗試，生成一個(gè)帶文字和(hé / huò)小程序碼的(de)圖片，希望能對你有一些啓發。

這(zhè)個(gè)圖片的(de)構成是(shì)：一個(gè)矩形，既整塊畫布、文字内容、一條橫線和(hé / huò)一個(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)表示畫布，畫布的(de)寬取屏幕的(de)寬，高根據内容的(de)高度來(lái)動态獲取。

再來(lái)看 js 文件：

drawSquare: function (ctx, height) {
    ctx.rect(0, 50, this.data.windowWidth, height);
    ctx.setFillStyle("#f5f6fd");
    ctx.fill()
}

畫矩形，也(yě)是(shì)整塊畫布的(de)大(dà)小，寬度是(shì)屏幕寬度，高度根據内容多少來(lái)動态設置。

drawFont: function (ctx, content, height) {
    ctx.setFontSize(16);
    ctx.setFillStyle("#484a3d");
    ctx.fillText(content, this.data.offset, height);
}

設置文字大(dà)小，并填充顔色。

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();
}

根據文字多少動态計算高度，然後依次畫出(chū)矩形，文字，橫線和(hé / huò)小程序碼。

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ō)明一下文字的(de)顯示邏輯，由于(yú)文字是(shì)不(bù)能自動換行的(de)，所以(yǐ)需要(yào / yāo)提前設置好文字的(de)大(dà)小和(hé / huò)每行顯示文字的(de)個(gè)數，然後按照每行顯示的(de)個(gè)數來(lái)對文字進行分組，最後再顯示。

以(yǐ)上(shàng)均爲(wéi / wèi)代碼片段，可以(yǐ)到(dào)我的(de) GitHub來(lái)下載源碼。如果有不(bù)清楚的(de)地(dì / de)方歡迎留言。

GitHub 地(dì / de)址：源碼傳送門