在(zài)小程序開發完成之(zhī)後，我們會時(shí)常遇到(dào)這(zhè)樣的(de)一個(gè)問題，小程序該怎麽推廣，增加曝光量，讓更多的(de)人(rén)看到(dào)？我們都知道(dào)，小程序推廣一般是(shì)給小程序增加一個(gè)分享的(de)功能，可以(yǐ)分享到(dào)群裏面。

但是(shì)不(bù)能發朋友圈，若是(shì)想發到(dào)朋友圈，采取的(de)辦法是(shì)一件生成海報，這(zhè)樣就(jiù)産生了(le／liǎo)一個(gè)需求了(le／liǎo)，那就(jiù)是(shì)小程序生成二維碼海報的(de)要(yào / yāo)求。

如果是(shì)自己寫的(de)話，那肯定是(shì)要(yào / yāo)花費一番精力，這(zhè)個(gè)時(shí)候要(yào / yāo)是(shì)有一款開源組件直接用那就(jiù)好了(le／liǎo)，這(zhè)不(bù)，我們的(de)程序員小哥哥已經将自己的(de)寶貴的(de)源碼開源出(chū)來(lái)了(le／liǎo)，筆芯~

wxa-plugin-canvas 是(shì)一個(gè)生成二維碼海報的(de)組件，通過非常簡單的(de)配置就(jiù)可以(yǐ)生成精美的(de)海報。反正大(dà)家知道(dào)這(zhè)個(gè)開源庫非常好用就(jiù)行了(le／liǎo)。

開源項目地(dì / de)址：https://github.com/jasondu/wxa-plugin-canvas

開源項目作者：jason

效果圖如下：

安裝

方式一.通過 npm 安裝 (推薦)

小程序已經支持使用 npm 安裝第三方包，詳見 npm 支持

# npm
npm i wxa-plugin-canvas -S --production

# yarn
yarn add wxa-plugin-canvas --production

方式二.下載代碼

直接通過 git 下載 wxa-plugin-canvas 源代碼，并将miniprogram_dist目錄拷貝到(dào)自己的(de)項目組件目錄中

使用組件

{
  "usingComponents": {
    "poster": "wxa-plugin-canvas/poster",
  }
}

接着就(jiù)可以(yǐ)在(zài) wxml 中直接使用組件

<poster id="poster" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail">
    <button>點擊生成海報</button>
</poster>