uni-app 分享给好友，生成小程序二维码海报

插件地址：https://ext.dcloud.net.cn/plugin?id=586

<template><view><view class="sharecontent"><button class="share-btn" @tap="shareEvn">分享</button><!-- 分享弹窗--><view class="share-pro"><view class="share-pro-mask" v-if="deliveryFlag"></view><view class="share-pro-dialog" :class="deliveryFlag?'open':'close'" style=""><view class="close-btn" @tap="closeShareEvn"><span class="font_family"></span></view><view class="share-pro-title">分享</view><view class="share-pro-body"><view class="share-item"><button open-type="share"><view class="font_family share-icon"></view><view>分享给好友</view></button></view><view class="share-item" @tap="createCanvasImageEvn"><view class="font_family share-icon"></view><view>生成分享图片</view></view></view></view></view><hchPoster ref="hchPoster" :canvasFlag.sync="canvasFlag" @cancel="canvasCancel" :posterObj.sync="posterData" /><view :hidden="canvasFlag"><!-- 海报 要放外面放组件里面 会找不到 canvas--><canvas class="canvas" canvas-id="myCanvas"></canvas><!-- 海报 --></view></view></view>
</template><script>import hchPoster from '../../components/hch-poster/hch-poster.vue'export default {components: {hchPoster,},data() {return {imgone: '', //图片deliveryFlag: false,canvasFlag: true,posterData: {}}},onLoad: function(options) {},// 分享// #ifdef MP-WEIXINonShareAppMessage: function(res) {if(res.from === 'button') {// 来自页面内转发按钮console.log(res.target)}var _self = this;var openid = uni.getStorageSync('_openid');var token = uni.getStorageSync('_token');uni.request({url: _self._apiurl + "/app/goods/sharegoods",method: 'POST',header: {'content-type': 'application/x-www-form-urlencoded'},data: {openid: openid,token: token,goods_id: _self.goodsid},success: (res) => {console.log(res);_self._isplogin(res, function() {var data = res.data.data;})}});return {title: "清仓处理 " + _self.name + " " + _self.brand + " " + _self.price + "元",path: '/pages/class/class?goods_id=' + _self.goodsid + "&fuser_id=" + _self.myuser_id,imageUrl: _self.imgone}},//#endifmethods: {createCanvasImageEvn() {var _self = this;uni.request({url: _self._apiurl + "/app/index/getminicode",method: 'POST',header: {'content-type': 'application/x-www-form-urlencoded'},data: {openid: _self.openid,token: _self.token,goods_id: _self.goodsid, //自己的参数fuser_id: _self.myuser_id, //自己的参数page: "pages/class/class", //想要生成小程序码的页面地址width: 128, //小程序码大小},success: (res) => {console.log(res);_self._isplogin(res, function() {var data = res.data.data.url;console.log(data);Object.assign(_self.posterData, {url: _self.imgone[0].img, //商品主图icon: 'https://courier.oss-cn-shenzhen.aliyuncs.com/jpy/static/thj.png', //醉品价图标title: "清仓处理 " + _self.name + " " + _self.brand, //标题discountPrice: _self.price, //折后价格orignPrice: _self.yprice, //原价code: data, //小程序码})_self.$forceUpdate(); //强制渲染数据setTimeout(() => {_self.canvasFlag = false; //显示canvas海报_self.deliveryFlag = false; //关闭分享弹窗_self.$refs.hchPoster.createCanvasImage(); //调用子组件的方法}, 500)})}})},// 分享弹窗shareEvn() {this.deliveryFlag = true;},// 关闭分享弹窗closeShareEvn() {this.deliveryFlag = false;},// 取消海报canvasCancel(val) {this.canvasFlag = val;},}}
</script>

uni-app 分享给好友，生成小程序二维码海报相关推荐

PC端生成小程序二维码海报并下载
我采用了前端截屏+前端生成二维码的方法展示海报并下载上代码 //截屏组件 import html2canvas from 'html2canvas' //生成二维码组件 import QRCode ...
php生成小程序二维码出现40001的情况
php生成小程序二维码出现40001的情况获取二维码时,小程序的access_token莫名奇妙失效了? 生成小程序二维码时遇到的坑,明明刚获取到的access_token,生成二维码时总是提示说 ...
node 无脑生成小程序二维码图
RT 新建createwxaqrcode.js: const request = require('request') const fs = require('fs')// eg:生成购物车列表圆形二 ...
聚合二维码生成(小程序二维码、付款码)
1. 付款码点击前往 2. 小程序二维码扫码进入小程序第一步: 配置微信小程序二维码微信公众平台 >开发 >开发设置 >扫普通链接二维码打开小程序点击添加,配置二维码规则 ...
三种方式生成小程序二维码
通过后台接口可以获取小程序任意页面的二维码,扫描该二维码可以直接进入小程序对应的页面,所有生成的二维码永久有效,可放心使用.目前微信支持两种二维码,小程序码(左),小程序二维码(右),如下所示: 为满 ...
调用支付宝接口生成小程序二维码的坑（PHP）
引言:最近在开发支付宝小程序生成二维码的时候碰到了一点问题,记录一下 1.需求正在开发的这个项目是一个电商类小程序,需求是给每个产品生成一个独立的小程序二维码 2.实现了解了需求之后,开始查官方文 ...
微信小程序 — 二维码海报分享到好友功能
上一篇文章有微信里面生成二维码功能.微信小程序 - 生成二维码功能_棒怡情的博客-CSDN博客下面把生成的二维码加上对应的文字,分享给微信好友功能. 第一步:把内容进行绘制生成图片.用到canvas ...
Java生成小程序二维码并带参数
直接上代码: 工具类MpQrUtils.java,获取accessToken与二维码的输入流: import javax.servlet.http.HttpServletRequest;import ...
PHP实现生成小程序二维码带参数进入指定页面、小程序URL scheme实现携带数据跳转小程序
图片二维码生成 <?php //二进制转图片image/pngfunction burryToBase64($contents, $mime){$base64 = base64_encode($ ...
【小程序】node/小程序云开发生成小程序二维码并添加文件到云存储/腾讯云存储
[前情提要] 1-小程序云函数生成小程序码 2-小程序云函数上传到云存储,云存储包括小程序云存储/腾讯云存储 (因为云函数就是node.js语法写的吗,所以下面写法对于node同样适用) 3-这里 ...

uni-app 分享给好友，生成小程序二维码海报

uni-app 分享给好友，生成小程序二维码海报相关推荐

最新文章

热门文章