三雷网站程序,销售管理系统有免费版,海淘网站建设,seo诊断优化方案使用混入结合canvas做小程序的分享 在混入里面定义一个全局共享的分享样式#xff0c;在遇到特殊页面需要单独处理
utils/share.js
import { ref } from vue;
export default {onShow() {// 创建时设置统一页面的默认值uni.$mpShare {title: 分享的标题,path: /pages/home/…使用混入结合canvas做小程序的分享 在混入里面定义一个全局共享的分享样式在遇到特殊页面需要单独处理
utils/share.js
import { ref } from vue;
export default {onShow() {// 创建时设置统一页面的默认值uni.$mpShare {title: 分享的标题,path: /pages/home/home,imageUrl: https:xxx,success: function (res) {// 转发成功之后的回调console.log(转发成功之后的回调, res);if (res.errMsg shareAppMessage:ok) {}},fail: function () {// 转发失败之后的回调console.log(转发失败之后的回调, res);if (res.errMsg shareAppMessage:fail cancel) {// 用户取消转发} else if (res.errMsg shareAppMessage:fail) {// 转发失败其中 detail message 为详细失败信息}},};},//发送给朋友onShareAppMessage(res) {console.log( uni.$mpShare-----------, uni.$mpShare);return uni.$mpShare;},//分享到朋友圈onShareTimeline(res) {return uni.$mpShare;},
};main.js混入
import share from /utils/share.js;
export function createApp() {const app createSSRApp(App);app.use(Pinia.createPinia());app.mixin(share); // 这里app.use(uviewPlus);return {app,Pinia,};
}Canvas绘制海报 commonShare.js
/*** canvas* context* currentObj 绘制需要用到的对象* bgImg 背景图* dpr 设备分辨率* type 类型*/export async function createPoster(canvas, context, currentObj, bgImg, dpr, type) {const bgImage await renderImg(canvas, bgImg);//绘制矩形context.drawImage(bgImage, 0, 0, canvas.width / dpr, canvas.height / dpr);context.fillStyle #FFF;context.strokeStyle #303030;context.lineWidth 2;context.strokeRect(16, 100, 343, 180);context.fillRect(16, 100, 343, 180);switch (type) {//周边商品case periphery://绘制商品图片const productPath showPicture(currentObj.goodsPictures[0].picture);const productImg await renderImg(canvas, productPath);context.drawImage(productImg, 28, 112, 150, 157);//绘制商品名称context.font normal normal bold 19px SourceHanSansCN-Bold;context.fillStyle #0D1932;context.fillText(currentObj.goodsName, 189, 136);//绘制context.font normal normal bold 25px SourceHanSansCN-Bold;context.fillStyle #FE2A12;context.fillText(${currentObj.giftPrice}.${currentObj.giftPricePrefix}起, 189, 256);break;
}let path await generatePath(context);console.log(分享图片, path);return path;
}//图片显示
function showPicture(srcPath) {if (srcPath.includes(http)) {return srcPath;} else {return https://xxxxxx srcPath; // 注意路径}
}//创建图片对象
function renderImg(canvas, url) {// url传临时路径return new Promise((resolve) {const img canvas.createImage();img.src ${url}?timestamp${new Date().getTime()};img.onload () {resolve(img);};});
}function base64src(base64data, fun) {const base64 base64data; //base64格式图片const time new Date().getTime();const imgPath uni.env.USER_DATA_PATH /poster time share .png;//如果图片字符串不含要清空的前缀,可以不执行下行代码.const imageData base64.replace(/^data:image\/\w;base64,/, );const file uni.getFileSystemManager();file.writeFileSync(imgPath, imageData, base64);fun(imgPath);
}async function generatePath(context) {let base64IMG context.canvas.toDataURL();let pathImg ;await base64src(base64IMG, (res) {pathImg res;});return pathImg;
}Canvas.createImage() 创建Image对象onload事件在安卓真机下只会触发一次, 确保每次加载的 URL 是唯一的通过在 URL 后面添加一个时间戳或随机数来避免缓存问题。 img ${url}?timestamp${new Date().getTime()};单独页面的处理xxxx.vue
view idcanvas v-showfalsecanvas idmyCanvas type2d canvas-idmyCanvas stylewidth: 375px; height: 300px/canvas
/viewscript setup
//引入分享绘制canvas
import { createPoster } from /utils/commonShare.js;
onShow(() {generatorCanvasUrl();
});function generatorCanvasUrl() {uni.createSelectorQuery().select(#myCanvas).node((res) {let canvas res.node;let context res.node.getContext(2d);uni.getSystemInfo({success: async function (sysRes) {const dpr sysRes.devicePixelRatio;canvas.width 375 * dpr;canvas.height 300 * dpr;context.clearRect(0, 0, canvas.width, canvas.height);context.scale(dpr, dpr);let path await createPoster(canvas, context, currentObj.value, canvasBgImg.value, dpr, canvasType.value);uni.$mpShare {title: canvasTitle.value,path: /pagesDiscover/group/group-product-dedails?fromsharePagedata encodeURIComponent(JSON.stringify(currentObj.value)),imageUrl: path,};console.log(重绘成功);},});}).exec();}
/script注意几个问题
canvas的绘制时间需要在拿到数据之后dom生成之前绘制完成onShow不可以就试试onReady否则就会绘制失败图片找不到数据undefined图片路径后面一定要加时间戳保证图片路径是唯一的否则就会一直走缓存如果页面想要重置分享但是不用canvas绘制直接用下面这个
const shareData computed(() {// 分享的数据return {title: 重置,desc: 重置,path: /xxxx/xxxx/xxxx,imageUrl: xxxxx,};
});
onShow(() {uni.$mpShare shareData.value; // 修改uni.$mpShare的值
});
