最近開發(fā)小程序遇到一個需求，后端提供一個二維碼，攜帶分享參數，前端來生成一個分享海報，下面是部分截圖

#2:8:1:e:6:d:e:8:6:8:1:2:2:6:b:4:4:4:0:3:9:a:a:4:7:6:3:c:0:9:6:6#

#6:1:7:8:d:d:c:0:2:5:b:3:6:9:3:1:f:4:c:6:8:4:d:5:3:6:2:9:3:c:7:f#

這里我就只說一下點擊生成海報的方法，這里調用了第三方插件，直接下載，

代碼下載好了，直接拷貝到自己的項目目錄，我是這樣放的就是下載好的組件包

#e:8:9:9:2:8:5:3:3:a:9:7:a:9:0:1:f:5:3:0:6:7:6:3:f:8:a:5:9:2:2:2#

在需要的頁面引入組件

JSON文件引入組件

{
? "usingComponents": {
? ? "poster": "/miniprogram_dist/poster"
? }
}

WXML

<view>
?<poster id="poster" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail">
? ? <view style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
? ? ? <image style="width:100rpx;height:100rpx;"
? ? ? ? src="圖片就自己去找啦">image>
? ? ? <button class="tx-14 cl-info">生成分享海報button>
? ? view>
? poster>
view>

JS

? const posterConfig = {
? ? ? width: 750,
? ? ? height: 1334,
? ? ? backgroundColor: '#ffffff',
? ? ? debug: false,
? ? ? pixelRatio: 1,
? ? ? blocks: [{
? ? ? ? ? width: 690,
? ? ? ? ? height: 808,
? ? ? ? ? x: 30,
? ? ? ? ? y: 183,
? ? ? ? ? borderWidth: 2,
? ? ? ? ? borderColor: '#ebebeb',
? ? ? ? ? borderRadius: 20,
? ? ? ? }
? ? ? ],
? ? ? texts: [{
? ? ? ? ? x: 113,
? ? ? ? ? y: 61,
? ? ? ? ? baseLine: 'middle',
? ? ? ? ? text: '草帽男孩',
? ? ? ? ? fontSize: 32,
? ? ? ? ? color: '#8d8d8d',
? ? ? ? },
? ? ? ? {
? ? ? ? ? x: 30,
? ? ? ? ? y: 125,
? ? ? ? ? baseLine: 'top',
? ? ? ? ? text: str,
? ? ? ? ? fontSize: 36,
? ? ? ? ? color: '#080808',
? ? ? ? },
? ? ? ? {
? ? ? ? ? x: 59,
? ? ? ? ? y: 895,
? ? ? ? ? baseLine: 'middle',
? ? ? ? ? text: [{
? ? ? ? ? ? ? text: '經營分類：',
? ? ? ? ? ? ? fontSize: 30,
? ? ? ? ? ? ? color: '#333333',
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? text: '億通建筑書店',
? ? ? ? ? ? ? fontSize: 30,
? ? ? ? ? ? ? color: '#6d6d6d',
? ? ? ? ? ? ? marginLeft: 10,
? ? ? ? ? ? }
? ? ? ? ? ]
? ? ? ? },
? ? ? ? {
? ? ? ? ? x: 59,
? ? ? ? ? y: 945,
? ? ? ? ? baseLine: 'middle',
? ? ? ? ? text: [{
? ? ? ? ? ? ? text: '地理位置：',
? ? ? ? ? ? ? fontSize: 30,
? ? ? ? ? ? ? color: '#333333',
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? text: '湖北襄陽',
? ? ? ? ? ? ? fontSize: 28,
? ? ? ? ? ? ? color: '#6d6d6d',
? ? ? ? ? ? ? marginLeft: 10,
? ? ? ? ? ? }
? ? ? ? ? ]
? ? ? ? },
? ? ? ? {
? ? ? ? ? x: 360,
? ? ? ? ? y: 1105,
? ? ? ? ? baseLine: 'top',
? ? ? ? ? text: '長按識別小程序碼',
? ? ? ? ? fontSize: 36,
? ? ? ? ? color: '#333333',
? ? ? ? },
? ? ? ? {
? ? ? ? ? x: 360,
? ? ? ? ? y: 1163,
? ? ? ? ? baseLine: 'top',
? ? ? ? ? text: '易享鋪-共享您的店鋪更賺錢',
? ? ? ? ? fontSize: 26,
? ? ? ? ? color: '#6d6d6d',
? ? ? ? },
? ? ? ],
? ? ? images: [{
? ? ? ? ? width: 62,
? ? ? ? ? height: 62,
? ? ? ? ? x: 30,
? ? ? ? ? y: 30,
? ? ? ? ? borderRadius: 62,
? ? ? ? ? url: '頂部頭像照片',
? ? ? ? },
? ? ? ? {
? ? ? ? ? width: 634,
? ? ? ? ? height: 634,
? ? ? ? ? x: 59,
? ? ? ? ? y: 210,
? ? ? ? ? url: '中間大圖鏈接',
? ? ? ? },
? ? ? ? {
? ? ? ? ? width: 280,
? ? ? ? ? height: 280,
? ? ? ? ? x: 50,
? ? ? ? ? y: 1000,
? ? ? ? ? url: '分享二維碼',
? ? ? ? }
? ? ? ]
? ? }
? onPosterSuccess(e) { // 海報生成成功
? ? this.setData({
? ? ? posterSrc: e.detail,
? ? ? showpops: false,
? ? ? showPoster: true,
? ? })
? ? const {
? ? ? detail
? ? } = e;
? ? console.log(e.detail,'生成的海報')
? },
??
?onPosterFail(err) {
? ? app.ShowToast('生成失敗！')
? },
??
? savePoster() { // 點擊保存到手機相冊
? ? wx.getImageInfo({
? ? ? src: this.data.posterSrc,
? ? ? success: function (res) {
? ? ? ? var path = res.path;
? ? ? ? //保存圖片到本地
? ? ? ? wx.saveImageToPhotosAlbum({
? ? ? ? ? filePath: path,
? ? ? ? ? success: function () {
? ? ? ? ? ? wx.showToast({
? ? ? ? ? ? ? title: '保存成功'
? ? ? ? ? ? })
? ? ? ? ? },
? ? ? ? ? fail: function (res) {
? ? ? ? ? ? wx.showToast({
? ? ? ? ? ? ? title: '保存失敗',
? ? ? ? ? ? ? icon: 'none'
? ? ? ? ? ? })
? ? ? ? ? }
? ? ? ? })
? ? ? }
? ? })
? },

()生成海報成功的函數，e.就是生成的海報，是一個網路鏈接，可以直接下載也可以預覽微信生成推廣海報，()是點擊保存的方法，()是生成錯誤的方法，至于二維碼攜帶參數也很簡單，看官方文檔微信生成推廣海報，按文檔傳參，在里面即可獲取

這里調用的第三方插件，如果這個海報不能滿足你的需求，或者是樣式不是那就想要的微信生成推廣海報，請移步插件文檔：

免責聲明：本文系轉載，版權歸原作者所有；旨在傳遞信息，不代表本站的觀點和立場和對其真實性負責。如需轉載，請聯系原作者。如果來源標注有誤或侵犯了您的合法權益或者其他問題不想在本站發(fā)布，來信即刪。