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


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 相关文章推荐
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
jquery滚动到顶部底部代码
Apr 20 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
Vue项目使用CDN优化首屏加载问题
Apr 01 Javascript
layui弹出层按钮提交iframe表单的方法
Aug 20 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
在Express中提供静态文件的实现方法
Oct 17 Javascript
解决vue项目中出现Invalid Host header的问题
Nov 17 Javascript
用React Native制作一个简单的游戏引擎
May 27 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 定界符格式引起的错误
2011/05/24 PHP
PHP警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
php UNIX时间戳用法详解
2017/02/16 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
PHP CURL使用详解
2019/03/21 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
Python获取当前时间的方法
2014/01/14 Python
python正则表达式re模块详解
2014/06/25 Python
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
Python Matplotlib库入门指南
2015/05/18 Python
Python实现的爬取百度贴吧图片功能完整示例
2019/05/10 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
威尔逊皮革:Wilsons Leather
2018/12/07 全球购物
设计毕业生简历中的自我评价
2013/10/01 职场文书
小班下学期个人总结
2015/02/12 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
运动会新闻报道稿
2015/07/22 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
使用pytorch实现线性回归
2021/04/11 Python