前言
最近開發(fā)的小程序都有分享需求，功能大體為點(diǎn)擊分享按鈕，或主動(dòng)生成海報(bào)后，用戶操作保存對(duì)應(yīng)海報(bào)為圖片實(shí)現(xiàn)分享。以下是具體實(shí)現(xiàn)。
最終生成效果如圖：
一、普通二維碼生成
此處主要是生成工具庫來生成普通二維碼，如果要生成小程序碼，只能通過后臺(tái)接口調(diào)用開放API實(shí)現(xiàn)，且需要小程序已上線發(fā)布才能通過微信掃一掃進(jìn)入小程序（廢話不多說了。。。。）
- 工具庫：weapp.qrcode.min.js
template
<template>
<view class="page">
<canvas
id="canvas"
style="width: 160rpx; height: 160rpx"
canvas-id="canvas"
></canvas>
</view>
</template>
script
// 調(diào)用很簡單
const drawQrcode = require("@/lib/weapp.qrcode.min.js)
export default {
data(){return {}};
onLoad(){
this.drawCode();
}
methods:{
drawCode(){
drawQrcode({
text: `二維碼內(nèi)容`,
canvasId: "canvas",
width: 80,
height: 80
})
console.log("二維碼生成")
}
}
}
二、生成海報(bào)圖片并保存
生成海報(bào)分為兩步
一是海報(bào)預(yù)覽彈窗（這個(gè)是小程序內(nèi)頁彈窗所以直接代碼編寫就好）
二是通過painter將元素生成為圖片保存到本地。以下代碼只描述重點(diǎn)部分，全部代碼請(qǐng)查看源碼文件。
這里用到了painter這個(gè)組件庫，這是一個(gè)通過配置json就直接生成圖片的工具庫，開源地址
1、引入依賴組件
這里引用了painter組件來生成（懶人不想造輪子- _ -)。因?yàn)槭俏⑿旁帉?，所以放?strong>根目錄下的wxcomponents中
目錄如下：
|__ wxcomponents
|__ painter
|__ painter.wxml
|__ painter.wxss
|__painter.json
|__painter.js
|__ ...
page.json中引入微信組件
{
"globalStyle":{
"usingComponents": {
"painter": "/wxcomponents/painter/painter"
}
}
}
2、生成海報(bào)圖片
這里新建了兩個(gè)文件，一個(gè)share.vue用于在小程序中直接展示海報(bào)的樣式，一個(gè)share.js是配置painter海報(bào)的數(shù)據(jù)源
- share.vue
<template>
<view class="share" v-if="visible">
<view class="share-content">
<view class="share-chart-wrap">
<image
class="share-chart"
@longpress="saveImgNow"
src="http://qiniu.kingdou.fun/kingdou1.jpeg"
mode="widthFix"
/>
<view class="share-title">這是每報(bào)標(biāo)題</view>
</view>
<view class="share-card">
<view class="content-block">
<view class="content-row">
<view class="content-label">海報(bào)時(shí)間</view>
<view class="content-value">{{ data.time }}</view>
</view>
<view class="content-row">
<view class="content-label">描述</view>
<view class="content-value">{{ data.introduce }}</view>
</view>
<view class="content-row">
<view class="content-label">比賽說明</view>
<view class="content-value">限定時(shí)間內(nèi)根據(jù)動(dòng)作次數(shù)記分</view>
</view>
</view>
<view class="qr-block">
<view class="qr-tips">
<view class="tips-title">長按圖片進(jìn)行保存或者轉(zhuǎn)發(fā)</view>
<view class="tips-content"
>掃描二維碼即可參賽~<br />快去分享吧~
</view>
</view>
<slot name="qrcode" @longpress="init"></slot>
</view>
</view>
</view>
<uni-icons
class="close-btn"
size="50"
type="close"
color="#fff"
@click="close"
/>
<painter
v-show="isSave"
style="position: absolute; top: 79rpx; left: 60rpx"
:palette="template"
@imgOK="onImgOK"
@imgErr="onImgErr"
/>
</view>
</template>
<script>
import Card from "./share";
export default {
props: {
visible: {
type: Boolean,
default: false,
},
data: {
type: Object,
default: () => {
return {
time: "",
introduce: "",
};
},
},
},
data() {
return {
imagePath: "",
template: "",
};
},
methods: {
saveImgNow() {
let data = { ...this.data};
this.template = new Card().palette(data);
},
saveImage() {
if (this.imagePath && typeof this.imagePath === "string") {
// 圖片保存到本地
wx.saveImageToPhotosAlbum({
filePath: this.imagePath,
});
// 關(guān)閉分享彈窗
setTimeout(() => {
this.$emit("update:visible", false)
}, 500)
}
},
close() {
this.$emit("close");
},
onImgOK(e) {
this.imagePath = e.detail.path;
this.saveImage(this.imagePath);
},
onImgErr() {
console.log("保存圖片失敗");
},
},
};
</script>
<style lang="scss" scoped>
樣式內(nèi)容省略，詳見源碼。。。
</style>
- share.js （內(nèi)容太多，這里就只截部分作為參考，全部內(nèi)容請(qǐng)參考文末的源碼包）PS：這個(gè)文件通過工具生成并不需要自己編寫
export default class LastMayday {
palette(data) { // 傳入動(dòng)態(tài)數(shù)據(jù)源
return {
width: "320px",
height: "430px",
background: "#f1f1f1",
views: [
{
type: "text",
text: "海報(bào)時(shí)間",
css: {
color: "#373737",
background: "rgba(0,0,0,0)",
width: "60px",
height: "15.819999999999999px",
top: "202px",
left: "40px",
// 。。。。省略
},
},
{
type: "text",
text: data.time, //這里是動(dòng)態(tài)數(shù)據(jù)
css: {
color: "#0061D4",
background: "rgba(0,0,0,0)",
width: "181px",
height: "15.819999999999999px",
top: "202px",
// 。。。。省略
},
},
// 。。。。。
}
2.1 配置painter海報(bào)json
這里即是對(duì)上面的share.js來歷進(jìn)行說明。要生成圖片，得有生成圖片的規(guī)則，也就是painter的繪制數(shù)據(jù)源。這里也是通過第三方網(wǎng)站來可視化生成的，通過在這個(gè)網(wǎng)站中先繪制好海報(bào)的樣式后，再一鍵生成json文件，最后放進(jìn)代碼中。文章來源：http://www.zghlxwxcb.cn/news/detail-604433.html
- painter海報(bào)json在線繪制生成工具\(yùn)
- 最終生成內(nèi)容如上述share.js
2.2 引入數(shù)據(jù)構(gòu)造函數(shù)并在適當(dāng)時(shí)間觸發(fā)生成海報(bào)
- 在本文示例中是通過長按圖片來觸發(fā)，當(dāng)然也可以是用戶直接點(diǎn)擊按鈕來觸發(fā)
import Card from './share.js'
export default {
// 。。。。省略。。。
methods: {
// 這里假設(shè)用戶長按圖片，觸發(fā)此方法。即上面share.vue中， @longpress="saveImgNow"
saveImgNow() {
let data = { ...this.data};
this.template = new Card().palette(data);
},
// 生成圖片事件監(jiān)聽(在調(diào)用new Card()后會(huì)自動(dòng)觸發(fā)
// 圖片生成成功時(shí)
onImgOK(e) {
this.imagePath = e.detail.path;
this.saveImage(this.imagePath);
},
// 圖片生成失敗時(shí)
onImgErr() {
console.log("保存圖片失敗");
},
}
2.3 彈窗組件中直接使用painter組件
<painter style="position: absolute; top: -799999rpx; left: -999960rpx" :palette="template" @imgOK="onImgOK"
@imgErr="onImgErr" />
- 這里style中的內(nèi)容是為了在視覺上隱藏海報(bào)（本質(zhì)上是通過canvas再生成海報(bào)，所以需要此元素顯示后再在canvas上繪制為圖片）
三、源碼
地址參見：https://gitee.com/sophie-code-box/share-poster文章來源地址http://www.zghlxwxcb.cn/news/detail-604433.html
到了這里，關(guān)于小程序生成分享海報(bào)圖片并保存相冊的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
