微信小程序实现分享商品海报功能


Posted in Javascript onSeptember 30, 2019

我们在微信小程序中经常会使用到分享商品海报,或者是重绘微信小程序分享链的图片功能。实现该功能只要跟着如下几个步骤就可以快速实现啦!(本文示例代码使用的是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;
 }
 })
},

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Expandable &quot;Detail&quot; Table Rows
Aug 29 Javascript
JavaScript之引用类型介绍
Aug 10 Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
jquery自定义表格样式
Nov 23 Javascript
jquery中用jsonp实现搜索框功能
Oct 18 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
微信小程序实现下拉菜单切换效果
Mar 30 Javascript
微信小程序实现点击图片放大预览
Oct 21 Javascript
简单了解常用的JavaScript 库
Jul 16 Javascript
jQuery实现评论模块
Aug 19 jQuery
全面解析js中的原型,原型对象,原型链
Jan 25 Javascript
Bootstrap实现模态框效果
Sep 30 #Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 #Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 #Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 #Javascript
在vue中根据光标的显示与消失实现下拉列表
Sep 29 #Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 #Javascript
微信小程序 行的删除和增加操作实现详解
Sep 29 #Javascript
You might like
PHP之变量、常量学习笔记
2008/03/27 PHP
php中var_export与var_dump的区别分析
2010/08/21 PHP
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
php从文件夹随机读取文件的方法
2015/06/01 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
js parsefloat parseint 转换函数
2010/01/21 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
electron demo项目npm install安装失败的解决方法
2018/02/06 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
2018/09/18 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
JS加载解析Markdown文档过程详解
2020/05/19 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
详解python中的 is 操作符
2017/12/26 Python
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
费用会计岗位职责
2014/01/01 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
廉洁教育学习材料
2014/05/19 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
初中家长评语大全
2014/12/26 职场文书
陪护人员误工证明
2015/06/24 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书
react antd实现动态增减表单
2021/06/03 Javascript