微信小程序自定义生成动态分享内容

方法：使用wxml-to-canvas生成图片，分享生成的图片
wxml-to-canvas文档：https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/en/extended/component-plus/wxml-to-canvas.html
1、安装wxml-to-canvas

npm install --Save. wxml-to-canvas

2、page.js中在需要的路由中引入wxml-to-canvas

{"path": "pages/index","style": {"navigationBarTitleText": "自定义分享","navigationStyle": "custom","usingComponents": {"wxml-to-canvas": "/wxcomponents/wxml-to-canvas/index"}}},

3、在分享页面使用

<wxml-to-canvas id="widget" class="widget" width="300" height="300" style="left:-900%;top:-900%;position: absolute;"></wxml-to-canvas>

<u-button open-type="share" color="linear-gradient(0deg,#58c395 0%, #4daf8b)">分享按钮</u-button>

4、自定义分享方法

async onShareAppMessage (res) {const cw = 140const ch = 112const widget = this.selectComponent('#widget')const cre = await widget.renderToCanvas({wxml:`<view class="view"><image src="../../static/daifu.jpg" class="bg"></image><text class="text">¥${(this.orderdetail.should_pay/1000).toFixed(2)}元</text></view>`,style:{view:{width:cw,height:ch,display: 'flex',textAlign: 'center',},bg:{position:'absolute',width:cw,height:ch,top:0,left:0,},text: {fontSize: 9,fontWeight: 600,color: '#333',verticalAlign: 'middle',top:57,}}})const re=await widget.canvasToTempFilePath()return {title:'支付分享',path: 'pages/center/pay_type?sharecode=' + this.orderdetail._id, // 打开分享跳转地址imageUrl:re.tempFilePath,success: function (res) {// 回调函数已经取消了，运行时进入不到这里if(res.errMsg == 'shareAppMessage:ok'){console.log("分享成功",res)}},fail:function(res){// 回调函数已经取消了，运行时进入不到这里console.log("分享失败",res)}}}

5、分享效果

微信小程序自定义生成动态分享内容相关推荐

微信小程序Excel生成下载浏览分享
微信小程序Excel生成下载浏览分享完整流程遇到的小问题完整流程主要是为了实现小程序前端从后端下载excel文件并浏览和分享excel文件给其他用户主要实现步骤:通过后端返回的字节流 : w ...
微信小程序实现生成分享海报案例
一.引入插件painter (1)克隆地址:https://gitcode.net/mirrors/Kujiale-Mobile/Painter (2)下载的painter放到小程序的componen ...
微信小程序自定义组件(二)
微信小程序自定义组件 ps 由于作业部落貌似出了点问题,耽误了点时间,找了一个stackedit.io准备写.无奈,这是要自己建编辑器的节奏啊.没有一个能靠的注为何存在组件组件间的关系使用rel ...
【小程序】一文学会微信小程序自定义组件封装
一.什么是自定义组件在实际开发过程中,经常会有代码复用的情况,即在不同的页面有类似结构的代码块,类似的代码反复出现,这样会增加代码维护成本,也会造成代码的高耦合,为了解决这一情况,微信小程序支持了更 ...
原声微信小程序自定义顶部导航栏 . 自定义navigationBar。 (单页面设置)
本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下实现自定义大致需要以下?步骤: 1.在页面.JSON文件进行相关配置,以便去掉原生 "navigationSt ...
微信小程序中使用动态echarts
微信小程序中使用动态echarts,套值可用 1.先在微信开发者工具中创建一个项目 2. 在echarts-for-weixin中下载项目解压后打开,把ec-canvas文件夹复制到项目pages同 ...
微信小程序自定义组件-树形数据表格（进阶版）
前言一.下载引用二.使用treegrid组件三.使用文档属性事件四.组件源码利用递归思想编写的表格行--treegrid-treeline 树形表格--treegrid-treegrid ...
微信小程序：wx-charts动态绘制折线图
微信小程序:wx-charts动态绘制折线图 wx-charts是基于 Canvas的微信小程序主流图表工具,体积小易操作,支持多种图表的绘制,这里主要就动态绘制折线图做出详解,所谓动态,指的是表格的 ...
微信小程序-自定义导航栏
微信小程序-自定义导航栏第一步添加属性 "navigationStyle": "custom" 第二步自定义导航栏第二步自定义组件第四步使用组件 ...
微信小程序自定义授权弹框
微信小程序自定义授权弹框最近微信获取用户信息的接口有调整,就是这货:wx.getUserInfo(OBJECT),文档描述如下: 此接口有调整,使用该接口将不再出现授权弹窗,请使用 <butt ...

微信小程序自定义生成动态分享内容

微信小程序自定义生成动态分享内容相关推荐

最新文章

热门文章