微信小程序 - 分享商品海报

我们在微信小程序中经常会使用到分享商品海报，或者是重绘微信小程序分享链的图片功能。实现该功能只要跟着如下几个步骤就可以快速实现啦！（本文示例代码使用的是uni-app，原生或者其他框架需要将uni前缀该成对应框架前缀即可；）

步骤描述不清晰或者不想看步骤？那就直接访问完整代码地址吧
完整代码演示：微信小程序 - 分享商品海报
相关文档：
uni-app官方文档
微信小程序官方文档

第一步：提前将需要分享的图片素材先缓存至本地临时图片路径；

initPic(){this.handleNetImg('网络图片地址').then((res)=>{this.bgdSrc =res.path;//保存这个临时图片路径}
}
//生成临时图片
handleNetImg(imagePath) {return new Promise((resolve, reject) => {uni.getImageInfo({src: imagePath,success: function (res) {resolve(res);}});});
},

第二步：加入分享按钮以及Canvas元素；

<button open-type="share">点击分享</button>
<button @click="getPhotosAlbumAuth">保存本地</button>
<view class="canvas-box"><canvas canvas-id='mycanvas'></canvas>
</view>

第三步：初始Canvas，将内容画到Canvas上,画完后将画布生成临时图片；

createShareGoods(){uni.showLoading({title:'正在生成中...'})var ctx = uni.createCanvasContext('mycanvas', this);ctx.drawImage(this.bgdSrc, 0, 0, 300, 240); //画背景图ctx.drawImage(this.itemPic, 0, 0, 400, 400, 30, 45, 140, 140);//画商品图片ctx.drawImage(this.qrcode, 0, 0, 400, 400, 225, 5, 100, 100);//画二维码,这边可以变成小程序码//现价ctx.setFillStyle('#E80013');ctx.setFontSize(18);ctx.fillText('这边可以写一些说明之类的', 180, 100);ctx.setFillStyle('#E80013');ctx.setFontSize(18);ctx.fillText('这边可以写一些说明之类的', 100, 100);//开始画画完后生成新的临时图片地址ctx.draw(false, () => {setTimeout(()=>{uni.canvasToTempFilePath({canvasId: 'mycanvas',success: (res) => {uni.hideLoading();this.picTempUrl=res.tempFilePath;}});}, 300);})
},

第四步：点击分享按钮，完成分享；


/*** 分享页面到微信好友*/
onShareAppMessage(){return {title: '限时特卖：'+this.name,path: 'pages/index/index?data=这边可以传一些ID啥的',imageUrl: this.picTempUrl}
},

第五步：保存到本地（获取权限后保存）；

//获取手机相册权限
getPhotosAlbumAuth(){uni.getSetting({success:(res)=> {if (!res.authSetting['scope.writePhotosAlbum']) {uni.authorize({scope: 'scope.writePhotosAlbum',success:()=> {this.saveImage();}})} else {this.saveImage();}}})
},
//保存海报
saveImage(){uni.saveImageToPhotosAlbum({filePath: this.picTempUrl,success: (data)=> {uni.showToast({title: "图片保存成功",icon: "success",mask: true})},complete: () => {this.posterStatus=false;}})
},

微信小程序 - 分享商品海报相关推荐

微信小程序分享生成海报
本文转自:微信小程序实现生成海报并且保存本地 - 张正-博客园 - 博客园 html: <view><image src="{{img}}" class='bgI ...
微信小程序分享生成海报（自带二维码）+头像+昵称
前言: 我的分享海报是弹框,可根据自己要求写成页面,原理都是一样的,背景图是前期测试的,效果是OK的,真机测试手机也是显示的. 效果图: wxml: <vi ...
uniapp 微信小程序分享海报
uniapp 微信小程序分享海报下面是一个Uniapp微信小程序分享海报的简单示例: 在Uniapp项目中创建一个新的页面,用于展示要分享的内容和生成海报.例如,我们可以在新页面中显示一张图片和一些 ...
微信小程序分享海报/卡片生成时一直加载可能存在的问题
微信小程序分享海报/卡片生成时一直加载可能存在的问题很多时候,开发者在调试小程序的分享图时,总是会遇到不能正常生成的问题,这里面还是有许多的坑.这一次就把我个人所知道的问题分享一下. 第一种情况: ...
微信小程序分享二维码生成
生成微信小程序分享二维码微信小程序官方开放的二维码的接口,其中有一个是生成小程序二维码的,还有一个是圆形的小程序码,我这里就用php生成二维码. 完整代码: public function shar ...
微信小程序商品详情html,微信小程序关于商品详情类的富文本解析器
微信小程序关于商品详情类的富文本解析器 2020年08月10日 | 萬仟网IT编程 | 我要评论微信小程序关于商品详情类的富文本解析器富文本的解析,在vue中有v-html解析富文本的方法,但是在微 ...
Python爬虫系列之爬取某社区团微信小程序店铺商品数据
Python爬虫系列之爬取某社区团微信小程序店铺商品数据如有问题QQ请> 点击这里联系我们 < 微信请扫描下方二维码代码仅供学习交流,请勿用于非法用途数据库仅用于去重使用,数据主要存 ...
微信小程序分享朋友圈功能
微信小程序分享到朋友圈的功能,终于实现了!但是只能是点击右上角菜单方式分享!话不多说直接上代码! js Page({onLoad: function (options) {if(options.in ...
uni-app 微信小程序分享按钮
uni-app 微信小程序分享按钮官方文档说明在 manifest.json 的 App SDK 配置里,勾选微信消息及朋友圈,并填写相关 appkey,微信 appkey 在需要分享的页面填写: ...

微信小程序 - 分享商品海报

微信小程序 - 分享商品海报相关推荐

最新文章

热门文章