在uni-app中使用Painter生成小程序海報簡單示例
更新時間：2025年04月30日 09:15:01 作者：GalenZhang888
這篇文章主要介紹了在uni-app中使用Painter生成小程序海報的相關資料,Painter支持文本、圖片、矩形、qrcode?類型的view繪制,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
安裝Painter
從GitHub下載Painter組件：https://github.com/Kujiale-Mobile/Painter
將painter文件夾復制到uni-app項目的components目錄下
配置頁面
在需要使用海報的頁面的pages.json中配置
{
"path": "pages/share/index",
"style": {
"navigationBarTitleText": "分享海報",
"usingComponents": {
"painter": "/components/painter/painter"
}
}
}
在頁面中使用Painter
<template>
<!-- 海報詳情 -->
<view class="wrap">
<!-- 引入 Painter 組件，隱藏繪制層 -->
<painter :palette="posterData" @imgOK="onImgOK" @imgErr="onImgErr"
style="position: absolute; left: -9999rpx;" />
<!-- 顯示生成的海報 -->
<image v-if="imagePath" :src="imagePath" show-menu-by-longpress
mode="aspectFill" style="width: 90%; height: 1200rpx;margin-left: 5%;" />
</view>
</template>
<script>
import {
getPosterConfigDetail,
saveAgentPoster
} from '@/api/home.js'
export default {
data() {
return {
userName: "", // 動態(tài)用戶名稱
phoneNumber: "", // 動態(tài)電話號碼
qrcodeBase64: "", // 從接口獲取的 Base64 小程序碼
posterData: {}, // Painter 配置數(shù)據(jù)
imagePath: "", // 生成的海報路徑
posterImageUrl: "", //海報背景圖
oldUserName: "",//上次繪制海報時的用戶名
oldPhoneNumber: "",
posterName: '',
mainImageId: '',
posterCode: '',
templateId: ''
}
},
onLoad(option) {
// id為海報模板
this.id = option.id
this.init()
},
methods: {
init() {
// 后臺使用初始信息生成微信小程序碼
const posterConfigDetail = await getPosterConfigDetail({
id: this.id
})
this.userName = res.data.userName
this.phoneNumber = res.data.mobile
this.posterCode = res.data.posterCode
this.templateId = res.data.id
this.posterImageUrl = res.data.posterImageUrl
this.posterName = res.data.posterName
this.qrcodeBase64 = res.data.wxCodeContent
this.oldUserName = this.userName
this.oldPhoneNumber = this.phoneNumber
this.generatePoster()
},
// 生成海報配置
async generatePoster() {
const posterConfig = {
width: "750rpx",
height: "1334rpx",
background: "#ffffff",
views: [
// 背景圖
{
type: 'image',
url: `${this.posterImageUrl}`,
css: {
width: '750rpx',
height: '1334rpx'
}
},
{
type: "text",
text: `聯(lián)系人：${this.userName}`, // 直接注入數(shù)據(jù)
css: {
fontSize: "32rpx",
bottom: "250rpx",
left: "250rpx"
}
},
{
type: "text",
text: `手機號：${this.phoneNumber}`,
css: {
fontSize: "28rpx",
bottom: "200rpx",
left: "250rpx"
}
},
{
type: "image",
url: `data:image/png;base64,${this.qrcodeBase64}`,
css: {
width: "200rpx",
height: "200rpx",
bottom: "350rpx",
left: "275rpx"
}
}
]
};
this.posterData = posterConfig;
console.log(this.posterData, ' this.posterData')
// 手動觸發(fā)繪制
this.$forceUpdate()
},
// 生成海報成功
onImgOK(e) {
this.imagePath = e.detail.path;
}
</script>
預覽、保存圖片到相冊
<template>
<!-- 海報詳情 -->
<view class="wrap">
<!-- 引入 Painter 組件，隱藏繪制層 -->
<painter :palette="posterData" @imgOK="onImgOK" @imgErr="onImgErr"
style="position: absolute; left: -9999rpx;" />
<!-- 顯示生成的海報 -->
<h1 style="text-align: center;font-size: 40rpx;margin: 20rpx 0;color:#3ccc97;">{{posterName}}</h1>
<image v-if="imagePath" :src="imagePath" show-menu-by-longpress
mode="aspectFill" style="width: 90%; height: 1200rpx;margin-left: 5%;" />
<view class="uni-form">
<view class="uni-form-item uni-column">
<view class="title">聯(lián)系人: </view>
<input class="uni-input" placeholder="請輸入聯(lián)系人" v-model="userName"></input>
</view>
<view class="uni-form-item uni-column">
<view class="title">手機號碼: </view>
<input class="uni-input" type="number" maxlength="11" v-model="phoneNumber"
placeholder="請輸入手機號碼"></input>
</view>
<view class="uni-form-item uni-column">
<view class="title">海報標題: </view>
<input class="uni-input" v-model="posterName" placeholder="請輸入海報標題"></input>
</view>
</view>
<!-- 觸發(fā)生成的按鈕 -->
<view class="" style="padding-bottom: 60rpx;overflow: hidden;width: 100%">
<button class="btnStyle" @click="previewImg">預覽</button>
<button class="btnStyle" @click="generateShare">生成并分享</button>
<button class="btnStyle" @click="saveToAlbum">保存到相冊</button>
</view>
</view>
</template>
<script>
import {
getPosterConfigDetail,
saveAgentPoster
} from '@/api/home.js'
export default {
data() {
return {
userName: "", // 動態(tài)用戶名稱
phoneNumber: "", // 動態(tài)電話號碼
qrcodeBase64: "", // 從接口獲取的 Base64 小程序碼
posterData: {}, // Painter 配置數(shù)據(jù)
imagePath: "", // 生成的海報路徑
posterImageUrl: "", //海報背景圖
oldUserName: "",//上次繪制海報時的用戶名
oldPhoneNumber: "",
posterName: '',
mainImageId: '',
posterCode: '',
templateId: ''
}
},
onLoad(option) {
this.token = uni.getStorageSync('token')
// id為海報模板
this.id = option.id
this.init()
},
created() {
},
methods: {
init() {
// 后臺使用初始信息生成微信小程序碼
const posterConfigDetail = await getPosterConfigDetail({
id: this.id
})
this.userName = res.data.userName
this.phoneNumber = res.data.mobile
this.posterCode = res.data.posterCode
this.templateId = res.data.id
this.posterImageUrl = res.data.posterImageUrl
this.posterName = res.data.posterName
this.qrcodeBase64 = res.data.wxCodeContent
this.oldUserName = this.userName
this.oldPhoneNumber = this.phoneNumber
this.generatePoster()
},
asnyc previewImg() {
const needStatus = await this.needRegenerate()
if (needStatus) {
await this.generatePoster()
// 延遲0.5秒，等待頁面重繪
await this.delay(500)
}
wx.previewImage({
current: this.imagePath,
urls: [this.imagePath]
})
},
// 修改用戶信息后，重新生成小程序碼及海報編碼（生成并分享和保存到相冊會上傳數(shù)據(jù)到后臺，可能會存儲多條數(shù)據(jù)，以海報編碼做區(qū)分）
async needRegenerate() {
// 修改用戶信息后，重新生成小程序碼
if (this.userName != this.oldUserName || this.phoneNumber != this.oldPhoneNumber) {
let that = this
await new Promise((resolve, reject) => {
getPosterConfigDetail({
id: this.id
}).then(res => {
if (res.code == 0) {
that.posterCode = res.data.posterCode
that.qrcodeBase64 = res.data.wxCodeContent
that.oldUserName = that.userName
that.oldPhoneNumber = that.phoneNumber
}
resolve()
}).catch(e => {
reject(e)
})
});
return true
}
return false
}
// 生成海報配置
async generatePoster() {
const posterConfig = {
width: "750rpx",
height: "1334rpx",
background: "#ffffff",
views: [
// 背景圖
{
type: 'image',
url: `${this.posterImageUrl}`,
css: {
width: '750rpx',
height: '1334rpx'
}
},
{
type: "text",
text: `聯(lián)系人：${this.userName}`, // 直接注入數(shù)據(jù)
css: {
fontSize: "32rpx",
bottom: "250rpx",
left: "250rpx"
}
},
{
type: "text",
text: `手機號：${this.phoneNumber}`,
css: {
fontSize: "28rpx",
bottom: "200rpx",
left: "250rpx"
}
},
{
type: "image",
url: `data:image/png;base64,${this.qrcodeBase64}`,
css: {
width: "200rpx",
height: "200rpx",
bottom: "350rpx",
left: "275rpx"
}
}
]
};
this.posterData = posterConfig;
console.log(this.posterData, ' this.posterData')
// 手動觸發(fā)繪制
this.$forceUpdate()
},
// 生成海報成功
onImgOK(e) {
this.imagePath = e.detail.path;
},
async delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
},
// 生成并分享
async generateShare() {
const needStatus = await this.needRegenerate()
if (needStatus) {
await this.generatePoster()
// 延遲0.5秒，等待頁面重繪
await this.delay(500)
}
// 保存海報數(shù)據(jù)
this.save()
const that = this
wx.showShareImageMenu({
path: that.imagePath, //圖片地址必須為本地路徑或者臨時路徑
success: (re) => {
console.log(re, "分享成功")
},
fail: (re) => {
console.log(re, "分享失敗")
}
});
},
// 保存到相冊
saveToAlbum() {
const needStatus = await this.needReGenerate()
if (needStatus) {
await this.generatePoster()
// 延遲0.5秒，等待頁面重繪
await this.delay(500)
}
// 保存海報數(shù)據(jù)
this.save()
const that = this
uni.saveImageToPhotosAlbum({
filePath: that.imagePath,
success: () => {
uni.showToast({
title: '保存成功',
icon: 'success'
});
},
fail: (err) => {
console.error('保存失敗:', err);
if (err.errMsg.includes('auth')) {
that.showAuthSetting('需要相冊權限才能保存圖片');
} else {
uni.showToast({
title: '保存失敗',
icon: 'none'
});
}
}
});
},
// 顯示權限設置引導
showAuthSetting(content) {
uni.showModal({
title: '權限申請',
content: content || '需要您授權權限才能繼續(xù)操作',
confirmText: '去設置',
success: (res) => {
if (res.confirm) {
uni.openSetting();
}
}
});
},
// 保存到后臺
sync save() {
saveAgentPoster({
mainImageId: this.mainImageId,
posterCode: this.posterCode,
posterName: this.posterName,
templateId: this.templateId,
}).then(res => {
if (res.code == 0) {
console.log("請求成功")
}
})
},
onImgErr(e) {
console.log(e, '生成海報出錯了')
}
}
}
</script>
<style scoped lang="scss">
.wrap {
width: 100vw;
height: 100%;
background-color: #f7f7f7;
// position: relative;
}
.uni-form {
background-color: #f7f7f7;
width: 96%;
margin-left: 2%;
.uni-form-item {
margin-top: 20rpx;
background-color: #fff;
.uni-input {
color: #333;
font-size: 30rpx;
height: 81rpx;
padding-left: 10rpx;
// border: none;
border-radius: 10rpx;
}
.title {
font-size: 30rpx;
color: #333;
// font-weight: 600;
line-height: 81rpx;
margin-bottom: 20rpx;
float: left;
width: 150rpx;
text-align: right;
padding-left: 5rpx;
}
.u-button--square {
color: #3ccc97 !important;
}
.u-input__content__field-wrapper__field {
text-align: left !important;
}
}
}
.btnStyle {
width: 28%;
float: left;
border-radius: 20rpx;
height: 80rpx;
line-height: 80rpx;
margin-left: 4%;
}
</style>總結
到此這篇關于在uni-app中使用Painter生成小程序海報的文章就介紹到這了,更多相關uni-app Painter生成小程序海報內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
js插件dropload上拉下滑加載數(shù)據(jù)實例解析
這篇文章主要為大家詳細解析了js插件dropload上拉下滑加載數(shù)據(jù)實例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要介紹了JS實現(xiàn)橫向拉伸動感伸縮菜單效果,涉及javascript基于定時函數(shù)及鼠標事件操作頁面元素動態(tài)變換的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
Cookie是客戶端存放數(shù)據(jù)的一種方式,可用來做狀態(tài)保持,下面這篇文章主要給大家介紹了關于JS?cookie的設置、讀取和刪除方法例子的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-01-01
這篇文章主要向大家推薦了一個原生js模擬淘寶購物車項目實戰(zhàn)，包括商品的單選、全選、刪除、修改數(shù)量、價格計算、數(shù)目計算、預覽等功能的實現(xiàn)，感興趣的小伙伴們可以參考一下2015-11-11
本文主要分享了js實現(xiàn)適合新聞類圖片輪播效果的示例代碼，具有一定的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要給大家介紹了關于javascript中閉包closure的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
這篇文章主要為大家詳細介紹了如何通過微信小程序開發(fā)一個簡單的搖色子游戲，文中的示例代碼講解詳細，感興趣的小伙伴可以和小編一起學習一下2023-01-01
下面小編就為大家?guī)硪黄狫avaScript進階練習及簡單實例分析。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
音樂播放用的的幾個函數(shù)...2006-09-09
本文介紹了TypeScript中extends關鍵字的應用,包括類繼承、泛型約束和接口繼承三種場景,類繼承實現(xiàn)功能擴展和多態(tài)；泛型約束確保類型安全；接口繼承增強接口功能,通過具體示例展示了extends在不同場景下的用法2026-04-04