小程序实现分享朋友圈

article/2025/9/21 23:36:53

有过小程序基础的同学都应该知道，小程序是不能直接分享到朋友圈，起码是自从我写下这边文章起，小程序还没有提供分享朋友圈的api。

但是公司很多时候都会想要传播自己的小程序，从而获取更多的流量，从而分享朋友圈的功能就诞生了。

老规矩，先说说我的实现思路：

1、通过canvas组件把要分享出去的东西画出来

2、通过saveImageToPhotosAlbum方法把canvas生成的画布转成图片保存到本地

3、通过发朋友圈的方式把之前保存的图片发到朋友圈

实现过程中要注意的点：

1、如果是请求网络图片的话，绘制图片的方法一定要写在请求的回调方法里面。

2、获取相册的授权scope.writePhotosAlbum

3、如果发现绘制出来的图片很模糊，那一定是没有将deswidth和desheight乘2

4、找准每一个元素在画布上的坐标，切记文字的Y轴坐标是文字的最底下

好了，说了这么多，直接上干货。

分享前的图片

 

分享后的图片

 

实现代码：

 

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

 

var that=this;

//获取用户设备信息，屏幕宽度

wx.getSystemInfo({

success: res => {

console.log(res);

that.setData({

screenWidth: res.screenWidth,

screenHeight: res.screenHeight,

});

}

});

var name = decodeURIComponent(options.queryString);

that.setData({

queryString:name

});

//请求后台数据

wx.request({

url: 'https://xxx.do',

data: {

'queryString': name,

},

method: 'POST',

header: { 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' },

success: function (res) {

var list = res.data.data;

if (list != null && list.length>0){

var obj1 = list[0];

var obj2 = list[1];

var obj3 = list[2];

if (obj1 != null) {

that.setData({

guanname: obj1.name,

guancount: obj1.displayPercent,

imgpath: obj1.imgUrl,

desc: obj1.description,

txtone: true

});

}

if (obj2 != null) {

that.setData({

yaname: obj2.name,

yacount: obj2.displayPercent,

txttwo: true

});

}

if (obj3 != null) {

that.setData({

jiname: obj3.name,

jicount: obj3.displayPercent,

txtthree: true

});

}

//制作要分享的图片

const ctx = wx.createCanvasContext('sharecan')

//主要就是计算好各个图文的位置

 

//绘制红色背景

ctx.setFillStyle('#FF5554')

ctx.fillRect(0, 0, that.data.screenWidth, 528)

 

//绘制文字

ctx.setFontSize(25)

ctx.setFillStyle("#ffffff")

ctx.fillText("品牌鉴定", 12, 64)

 

//绘制机器人

ctx.drawImage('/pages/images/jqr.png', 115, 42, 29, 24);

 

//绘制文字

ctx.setFontSize(14)

ctx.setFillStyle("#ffffff")

var dsj = '经过商标大数据分析，最符合 ' + name + '™ 品牌的商品是';

ctx.fillText(dsj, 12, 89)

 

ctx.setFillStyle('#ffffff')//设置矩形的背景颜色

ctx.fillRect(12, 96, 351, 244)

 

//请求的网络图片路径

wx.getImageInfo({

src: that.data.imgpath,

success: function (res) {

//请求成功后将会生成一个本地路径即res.path,

//然后将该路径缓存到storageKeyUrl关键字中

wx.setStorageSync("imgUrl", res.path);

var imgurl = wx.getStorageSync("imgUrl");

 

ctx.drawImage(imgurl, 12, 96, 351, 173);

ctx.setFillStyle('#E21917')//设置水印

ctx.fillText(name + '™', 293, 145)

var desc = name + '™牌' + that.data.guanname + ',' + that.data.desc;

var descone = "";

var desctwo = "";

if (desc.length > 18) {

descone = desc.substring(0, 18);

desctwo = desc.substring(18, desc.length);

console.log(descone);

console.log(desctwo)

ctx.setFillStyle("#222222")

ctx.setFontSize(18)

ctx.fillText(descone, 24, 302)

ctx.setFillStyle("#222222")

ctx.setFontSize(18)

ctx.fillText(desctwo, 24, 326)

} else {

ctx.setFillStyle("#222222")

ctx.setFontSize(18)

ctx.fillText(desc, 24, 302)

}

 

ctx.setFontSize(12)

ctx.setFillStyle('#FFAAA9')

ctx.fillText("* 图源网络，非商业用途，如有侵权请联系删除",12,360);

ctx.setFontSize(20)

ctx.setFillStyle('#FFFFFF')

var dds = '大多数注册 ' + name + '™ 相关商标品牌中'

ctx.fillText(dds, 12, 390)

 

if (that.data.txtone) {

ctx.drawImage('/pages/images/guanjun.png', 12, 404.5, 9.5, 15);

 

ctx.setFontSize(14)

ctx.setFillStyle('#FFBFBF')

var gn = that.data.guancount + ' 的人用做';

ctx.fillText(gn, 27.5, 419.5)

 

ctx.setFontSize(14)

ctx.setFillStyle('#ffffff')

ctx.fillText(that.data.guanname + '；', 120, 419.5);

}

 

if (that.data.txttwo) {

ctx.drawImage('/pages/images/yajun.png', 12, 430.5, 9.5, 15);

 

ctx.setFontSize(14)

ctx.setFillStyle('#FFBFBF')

var ya = that.data.yacount + ' 的人使用';

ctx.fillText(ya, 27.5, 444)

 

ctx.setFontSize(14)

ctx.setFillStyle('#ffffff')

ctx.fillText(that.data.yaname + '；', 120, 444);

}

 

if (that.data.txtthree) {

ctx.drawImage('/pages/images/jijun.png', 12, 456.5, 9.5, 15);

 

ctx.setFontSize(14)

ctx.setFillStyle('#FFBFBF')

var jn = that.data.jicount + ' 的人用来';

ctx.fillText(jn, 27.5, 471)

 

ctx.setFontSize(14)

ctx.setFillStyle('#ffffff')

ctx.fillText(that.data.jiname + '；', 120, 471);

}

//绘制底部的分享图片

ctx.drawImage('/pages/images/botshare.png', 0, 528, that.data.screenWidth, 139);

//绘制完成之后的回调方法

ctx.draw(false, function (e) {

that.data.isCompletedDraw = true

});

 

}

});

}else{

wx.navigateTo({

url: '/pages/ppblank/ppblank?name='+encodeURIComponent(that.data.queryString),

})

}

}

});

 

}

 

sharepyq:function(e){//点击分享朋友圈

 

var that=this;

if (!that.data.isCompletedDraw){

wx.showToast({

image: '/pages/images/tishi.png',

title: '图片正在生成中',

icon: 'none',

});

return ;

}

console.log("是否拒绝过授权："+that.data.auth)

if(that.data.auth==false){

wx.showModal({

content: 'T _ T 请打开保存相册的权限',

showCancel: false,

confirmText: '去打开',

confirmColor: '#72B9C3',

success: function (res) {

//进入授权页面

wx.openSetting({

success: (res) => {

res.authSetting = {

"scope.writePhotosAlbum": true

}

that.setData({

modaltwo: false,

auth:true

});

}

});

}

});

return false;

}

var finwid = that.data.screenWidth*2;

var finhei = that.data.screenHeight*2;

wx.canvasToTempFilePath({

x: 0,

y: 0,

width: that.data.screenWidth,

height: that.data.screenHeight,

destWidth: finwid,

destHeight: finhei,

canvasId: 'sharecan',

success: function (res) {

that.setData({

preurl: res.tempFilePath,

canvasHidden: false

});

//生产环境时 记得这里要加入获取相册授权的代码

wx.getSetting({

success(res) {

 

if (!res.authSetting['scope.writePhotosAlbum']) {//未授权，则重新授权

wx.authorize({

scope: 'scope.writePhotosAlbum',

success() {

// 用户已经同意小程序使用保存相册功能，

//后续调用 wx.saveImageToPhotosAlbum 接口不会弹窗询问

wx.saveImageToPhotosAlbum({

filePath: that.data.preurl,

success(res) {

wx.showModal({

content: '图片已保存到相册，赶紧晒一下吧~',

showCancel: false,

confirmText: '好哒',

confirmColor: '#72B9C3',

success: function (res) {

if (res.confirm) {

console.log('用户点击确定');

that.setData({

canvasHidden: true

});

}

that.setData({

modaltwo: false,

});

}

})

}

});

}, fail: function (res) {

console.log("拒绝授权");

console.log(res);

that.setData({

canvasHidden: true,

modaltwo: false,

auth: false

});

}

})

 

} else {//已经授权，则保存图片

wx.saveImageToPhotosAlbum({

filePath: that.data.preurl,

success(res) {

wx.showModal({

content: '图片已保存到相册，赶紧晒一下吧~',

showCancel: false,

confirmText: '好哒',

confirmColor: '#72B9C3',

success: function (res) {

if (res.confirm) {

console.log('用户点击确定');

that.setData({

canvasHidden: true

});

}

that.setData({

modaltwo: false

});

}

})

}

});

}

}

});

},

fail: function (res) {

console.log("保存失败")

}

})

}

 

如果我的文章帮助到了大家，减少大家的弯路，愿意打赏的请扫下面的二维码，也可留言。

 


http://chatgpt.dhexx.cn/article/msHHFNDs.shtml

相关文章

微信小程序实现分享至朋友圈的功能

微信小程序实现分享至朋友圈的功能

微信小程序实现分享至朋友圈的功能 微信小程序从基础库 2.11.3 开始，可将小程序页面分享到朋友圈。适用于内容型页面的分享，不适用于有较多交互的页面分享。 1 设置分享状态 小程序页面默认不可被分享到朋友圈，开发者需主动设置“分享到朋友…
阅读更多...
微信小程序分享功能

微信小程序分享功能

由于小程序的分享(微信、头条平台)，需要监听页面的onShareAppMessage生命周期，小程序需要在页面声明了此生命周期，点击右上角的"胶囊"才会有分享功能， 而一般情况下，我们希望每个页面都可以分享&#xff0c…
阅读更多...
微信小程序之分享功能

微信小程序之分享功能

微信小程序之分享功能 小程序风口正盛，将小程序作为获客的来源之一实在合适不过，想要让小程序的获客产生裂变，那么从将小程序的数据发送出去势在必行，本文提供以下几种方案作为数据出口，达到老拉新/口碑传播的效果。 …
阅读更多...
微信小程序的转发分享功能

微信小程序的转发分享功能

文章目录 button组件的open-type"share"app.jsonpages/about/about.wxmlpages/about/about.wxsspages/about/about.js 页面右上角的转发按钮app.jsonpages/about/about.wxmlpages/about/about.wxsspages/about/about.jspages/home/home.wxmlpages/home/home.wxsspage…
阅读更多...
vscode中文高亮

vscode中文高亮

测试代码: #include <常用> 如(i)断; 如(j)下;空 主(){ }在vscode目录下resources\app\extensions\cpp\syntaxes中c.tmLanguage.json试改改. "match": "\\b(break|case|continue|default|do|else|for|goto|if|_Pragma|return|switch|while|断|下)\\b&quo…
阅读更多...
vscode中文标点符号自动转英文标点符号

vscode中文标点符号自动转英文标点符号

vscode中文标点符号自动转英文标点符号
阅读更多...
vscode中文乱码解决方法总结

vscode中文乱码解决方法总结

第一种方法&#xff1a;直接点下面的 找到GB18030(其实GB都可以&#xff0c;我也不懂&#xff0c;一个一个试吧) 运行就可以了 第二种方法&#xff1a;点击设置&#xff0c; 在上面搜索 编码 &#xff0c;点击utf8 下拉找到GB 第三种方法&#xff1a; 这种方法我也不会&#xf…
阅读更多...
VSCode正则搜索中文字符

VSCode正则搜索中文字符

(".*[\u4E00-\u9FA5])|([\u4E00-\u9FA5].*") 右侧开启正则匹配&#xff0c;即可搜出全部中文字符
阅读更多...
vscode 中文插件失效

vscode 中文插件失效

一、Crtl Shift P&#xff0c;打开命令面板&#xff0c;输入configure display language&#xff0c;点击图中框起来的那一项&#xff1a; 二、 选择 zh-cn&#xff1a; 等待vscode自动重启。 大功告成&#xff01;
阅读更多...
MAC 用配置设置解决vscode中文乱码问题

MAC 用配置设置解决vscode中文乱码问题

MAC 用配置设置解决vscode中文乱码问题 中文乱码出现的原因 因为中文主要有两套编码&#xff0c;一套是GBK&#xff0c;一套是UTF-8&#xff0c;代码编辑器一般默认用UTF-8&#xff0c;而在输出的终端中默认是GBK&#xff0c;所以在UTF-8下的中文输出到GBK的终端自然会乱码。…
阅读更多...
解决vscode中文注释乱码

解决vscode中文注释乱码

有的文件&#xff0c;用Notepad打开很清楚能显示中文或其他中文内容&#xff0c;但是直接用vscode加载就乱码。 解决方案&#xff1a; 打开vscode&#xff0c;打开设置 之后点文件&#xff0c;勾选上Auto Guess Encoding。 最后&#xff0c;将原有乱码文件移出工作区&#x…
阅读更多...
VScode注释中文时乱码怎么办？VScode中文注释乱码问题的解决方法

VScode注释中文时乱码怎么办？VScode中文注释乱码问题的解决方法

当我们在编写C语言代码的时候&#xff0c;会对代码进行中文的注释&#xff0c;但是使用VScode打开代码之后&#xff0c;部分的中文注释会出现乱码的情况&#xff0c;对此找到了几个解决中文注释乱码的方法&#xff0c;分享给大家&#xff0c;希望可以对大家的学习带来帮助。 不…
阅读更多...
VScode设置中文显示

VScode设置中文显示

VScode一般默认英文显示&#xff0c;如果想要中文显示需要设置。 打开VScode按快捷键ctrlshiftp在搜索框搜索 然后会出现 选择中文重启就好了。 如果重启依旧是英文&#xff0c;就去应用商店看下安装过的插件&#xff0c;把中文插件在重新安装一下&#xff0c;然后重启即可。…
阅读更多...
VScode中文注释乱码问题解决

VScode中文注释乱码问题解决

VScode默认是用utf-8打开工程代码&#xff0c;C语言里的中文注释如果是Source insight之前gbk编码的注释可能会显示乱码&#xff0c;如何能让代码打开gbk编码的文件也不乱码&#xff0c;设置VScode如下&#xff1a; 方法一&#xff1a; 依次打开&#xff1a;文件–首选项–设置…
阅读更多...
vscode中文注释斜体修改

vscode中文注释斜体修改

第一次使用发现中文注释是斜体的并且看起来很难受 找了一遍也不会怎么弄&#xff0c;然后点点就成功了 我使用的是这个主题 点击设置按钮点击拓展设置 最后将红色圈起来的这个勾去掉&#xff0c;保存即可
阅读更多...
VSCode中文设置异常

VSCode中文设置异常

原文链接&#xff1a;https://blog.csdn.net/weixin_34898216/article/details/113548414 第一步 下载插件&#xff1a;Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code (现在直接下载安装已经起效) 在Chinese (Simplified) Language Pack for Visu…
阅读更多...
安装Visual Studio Code，解决vscode中文乱码问题

安装Visual Studio Code，解决vscode中文乱码问题

记录个人安装过程&#xff0c;方便电脑搞废了自己重新安装&#xff1a; 1.下载Visual Studio Code编辑器&#xff0c;版本看自己&#xff1a;Visual Studio Code - Code Editing. Redefined 2.安装Visual Studio Code&#xff08;建议不要安装在系统盘&#xff0c;路径不要有…
阅读更多...
vscode 设定中文字体

vscode 设定中文字体

1. 打开设置 2. 设定中文字体
阅读更多...
解决vscode中文乱码问题（不是改GBK，亲测有效）

解决vscode中文乱码问题（不是改GBK，亲测有效）

解决vscode中文乱码问题&#xff08;不是改GBK&#xff0c;亲测有效&#xff09; 方式一&#xff1a;解决vscode中文乱码问题&#xff08;不是改GBK&#xff0c;亲测有效&#xff09;中文乱码出现的原因问题解决过程具体设置&#xff1a; 其他的可行方案总结 方式二&#xff1a…
阅读更多...
VsCode中文输出为乱码的原因及解决方法

VsCode中文输出为乱码的原因及解决方法

在vscode&#xff08;在cmd.exe也会&#xff09;中有时候编译输出含有中文的内容时&#xff0c;在输出界面显示的是乱码. 原因&#xff1a;我们需要传递给计算机的所有信息都会转换成0 1表示的二进制数字流&#xff0c;经过CPU处理后再输出给相应的程序&#xff0c;程序再把这…
阅读更多...
推荐文章

Copyright @ 2022~2023