第一步：去Git下載插件
1.這是核心插件 需要下載全部內(nèi)容
https://github.com/Kujiale-Mobile/PainterCore
2.官方文檔
https://github.com/Kujiale-Mobile/Painter
3.新建painter文件夾放到下面
4.在引用文件的json文件引用一下
"usingComponents": {
"painter": "/component/painter/painter"
}
5.在使用文件里創(chuàng)建個(gè)canvas.js文件
獲取canvas.js內(nèi)容去這個(gè)網(wǎng)站
https://lingxiaoyi.github.io/painter-custom-poster/
先點(diǎn)擊導(dǎo)出，在點(diǎn)擊復(fù)制，復(fù)制到canvas.js文件里（替換）
6.然后在對應(yīng)page頁面的js文件里引入這個(gè)canvas.js文件，在wxml文件里使用painter組件
<!-- 這個(gè)是生成的海報(bào)圖片預(yù)覽 -->
<image src="{{src}}" style="height:980rpx" mode="aspectFit" class="canvas-img"></image>
<!-- 這個(gè)是painter組件使用 -->
<painter palette="{{wxml}}" style="position: absolute; top: -9999rpx;" bind:imgOK="onImgOK" />
<!-- 生成海報(bào)按鈕 -->
<button bindtap="painterBtn">生成海報(bào)</button>
7.然后paintertest.js文件里
import canvas from './canvas'
// 生成海報(bào)點(diǎn)擊事件
painterBtn() {
this.setData({
wxml: canvas()
})
wx.showLoading({
title: '正在生成中...',
})
},
// panter
onImgOK(e) {
console.log(e);
this.setData({
src: e.detail.path
})
wx.hideLoading()
},
這樣基本完事了但如果想傳參可以這樣傳
1.index.js里文章來源：http://www.zghlxwxcb.cn/news/detail-495526.html
import canvas from './canvas'
// 生成海報(bào)點(diǎn)擊事件
painterBtn() {
let name="我是傳遞的參數(shù)";
this.setData({
wxml: canvas(name) // 在此傳遞參數(shù)
})
wx.showLoading({
title: '正在生成中...',
})
},
2.canvas.js里文章來源地址http://www.zghlxwxcb.cn/news/detail-495526.html
// canvas.js
module.exports = data => {
return (
{
"width": "620px",
"height": "980px",
"background": "#ffffff",
"views": [
{
"type": "text",
"text": data.name,
"css": {
"color": "#191846",
"background": "rgba(0,0,0,0)",
"width": "536px",
"top": "486px",
"left": "41px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "",
"borderColor": "#000000",
"shadow": "",
"fontSize": "30px",
"lineHeight": "43px",
"fontWeight": "normal",
"textStyle": "fill",
"textDecoration": "none",
"fontFamily": "",
"textAlign": "left"
}
},
]
}
);
}
到了這里，關(guān)于【微信小程序】用painter插件生成海報(bào)分享朋友圈簡單教程的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
