GitHub 地址:https://github.com/Kujiale-Mobile/Painter
一、引入
将 components/painter 整个文件放到自己项目的 components 中;以组件的形式在页面的 json 文件中引入;
二、使用
<view class="container">
<image style="width: 300px; height: 300px;" src="{{path}}"></image>
<painter palette="{{detail}}" bind:imgOK="onImgOK" style="position:fixed; top:-999px;"></painter>
</view>
Page({
data:{
detail:null,
path:null
},
onShow() {
this.handleCode();
},
handleCode(){
let detail = {
width:"300px",
height:"300px",
background:"#f8f8f8",
views:[
{
type:"qrcode",
content:"xxs",
css:{
width:"80px",
height:"80px",
right:"10px",
bottom:"10px",
rotate:'0',
borderRadius:"0px"
}
},{
id:"img",
type:"image",
url:"../../assets/logo.png",
css:{
width:"40px",
height:"40px",
right:'30px',
bottom:"30px",
background:"#fff"
}
},{
type:"text",
text:"扫描二维码参加活动",
css:{
left:"10px",
bottom:"10px",
fontSize:"30rpx",
color:"red"
}
}]
}
this.setData({detail})
},
onImgOK(e){
this.setData({
path:e.detail.path
})
}
})
最后、这个插件使用起来还是比较简单的,直接根据 GitHub 里面的介绍使用就可以了
1、二维码中间无法添加 logo,想要生成能添加 logo 的二维码可以使用 weapp-qrcode;
2、如果觉得写配置太麻烦,可以借助可视化平台布局然后生成对应的 JSON:https://lingxiaoyi.github.io/painter-custom-poster/;