小(xiǎo)程序隻能(néng)轉發給好(hǎo)友(yǒu)，或者轉發到(dào)微(wēi) ↕♥信群，并不(bù)能(néng)轉發到(dào)朋(péng)友(yǒu)圈，那(nà✘φδ∑)麽朋(péng)友(yǒu)圈的(de)巨大(dà)流量應該怎麽利用(yòng)起來(lái)呢×₽$(ne)？

目前來(lái)看(kàn)，很(hěn)多(duō)小(xi​ ǎo)程序的(de)做(zuò)法是(shì)生(shēng)成一(yī)張帶>©小(xiǎo)程序碼的(de)圖片，然後用(yòng)₩£ 戶可(kě)以分(fēn)享圖片到(dào)朋(péng)友(yǒu)圈，通(t↕‍ōng)過這(zhè)樣的(de)方式來(lái)導朋(péng)友(yǒu)圈的(de)流δ∑量。

但(dàn)是(shì)這(zhè)樣做(zuò)還(hái)是(shì)有(yǒu)一(∞¥®≥yī)定風(fēng)險的(de)，有(yǒu)可(kě)能(néng)會(huì)被騰訊打上(s±←hàng)誘導分(fēn)享的(de)标簽，具體(tǐ)♣β¥可(kě)以做(zuò)到(dào)什(shén)麽程度還( ¶∏hái)不(bù)是(shì)很(hěn)清楚。

怎樣生(shēng)成圖片并保存呢(ne)？這(zhè)篇≥↑™文(wén)章(zhāng)做(zuò)一(yī)些(xiē)簡®→單的(de)嘗試，生(shēng)成一(yī)個(gè)帶文(wén)Ω<≠字和(hé)小(xiǎo)程序碼的(de)圖片，希望能(néng)對(duì ¶≈)你(nǐ)有(yǒu)一(yī)些(xiē)啓發。

這(zhè)個(gè)圖片的(de)構成是(shì)：一(yī)個(gè)矩形，既整塊畫(huλ​à)布、文(wén)字內(nèi)容、一(yī)條橫線和(hé)一(yī)個(gè)小(xi∑¥©ǎo)程序碼。

首先來(lái)看(kàn) wmxl 文(wén)件(jiàn)：

<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>

使用(yòng) 來(lái)表示畫(huà)布，畫(huà)布的(de)寬取屏幕的(de)寬 ÷，高(gāo)根據內(nèi)容的(de)高(gāo)度來(lái)動态獲取。

再來(lái)看(kàn) js 文(wén)件(jiàn)：

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

畫(huà)矩形，也(yě)是(shì)整塊畫(huà)布的(de)大(dà)小(x←←iǎo)，寬度是(shì)屏幕寬度，高(gāo)度根據內(nèi)容多(duō ₽→)少(shǎo)來(lái)動态設置。

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

設置文(wén)字大(dà)小(xiǎo)，并填充顔色。

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

畫(huà)線。

createNewImg: function (lineNum) {
    let that = this;
    let ctx = wx.createCanvasContext('myCanvas');
    let contentHeight = lineNum * tha¶•t.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 * tha×λ↔t.data.lineHeight + 120);
    that.drawFont(ctx, that.data.footer, lineNu$✔♣αm * 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();
}

根據文(wén)字多(duō)少(shǎo)動态計(jì)算(suàn)高(gāo)度₹ ，然後依次畫(huà)出矩形，文(wén)字，橫線和(hé)小(xiǎo)程序碼。

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.tempFil♦β€≈ePath)
        }
    })
}

保存圖片。

說(shuō)明(míng)一(yī)下(xià)文(wén)字的(de)顯 ‍示邏輯，由于文(wén)字是(shì)不(bù)能(£λnéng)自(zì)動換行(xíng)的(de)，所以需要(​★∑§yào)提前設置好(hǎo)文(wén)字的(de)大(Ω©♠δdà)小(xiǎo)和(hé)每行(xíng)顯示文(wén)字的(de)個(gè)♣₹"₹數(shù)，然後按照(zhào)每行(xíng)顯示的(de)個(gè)數(shù)來(láiπ≈)對(duì)文(wén)字進行(xíng)分(fēn)組，最後再顯示。

以上(shàng)均為(wèi)代碼片段，可(kě)以到€←↕(dào)我的(de) GitHub來(lái)下(xià)載源碼。如(rú)果有(y•βǒu)不(bù)清楚的(de)地(dì)方歡迎留言。

GitHub 地(dì)址：源碼傳送門(mén)