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


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 相关文章推荐
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
Bootstrap每天必学之表格
Nov 23 Javascript
jQuery链式调用与show知识浅析
May 11 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 Javascript
简单分析javascript中的函数
Sep 10 Javascript
JavaScript数据结构学习之数组、栈与队列
May 02 Javascript
VUE长按事件需求详解
Oct 18 Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 Javascript
IE9 elementUI文件上传的问题解决
Oct 17 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 Javascript
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
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
smarty section简介与用法分析
2008/10/03 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
nodejs读取memcache示例分享
2014/01/02 NodeJs
javascript匿名函数应用示例介绍
2014/03/07 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
详解webpack es6 to es5支持配置
2017/05/04 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
Python下载网络小说实例代码
2018/02/03 Python
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
财务部绩效考核方案
2014/05/04 职场文书
文案策划专业自荐信
2014/07/07 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
毕业生对母校寄语
2015/02/26 职场文书
公司文体活动总结
2015/05/07 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
美丽心灵观后感
2015/06/01 职场文书
团结友爱主题班会
2015/08/13 职场文书
2016大学生社会实践单位评语
2015/12/01 职场文书