不同平台使用不同技术实现微信好友、朋友圈分享汇总(H5、taro、uni-app)

人生路漫漫,坑,是活久了见。程序猿世界里各种奇葩的需求都有,随之而来的各种坑也是层出不穷。

应前IBM同事邀请特来做分享的专题总结。一般人我不告诉他,刷到的朋友们就赚到了,你懂的~~~~~~收藏吧!

  事情前情概述,昨天IBM的同事前来咨询我怎样实现微信分享功能。经过一系列的细细道来。原来他们前端是用uniapp开发的一个app,现在要实现分享功能。他们前端的小伙伴没有这方面的经验,折腾了半天没有眉目。那么接下来我从以下三个方面来解剖如何实现分享。

功能介绍:微信分享及收藏是指第三方 App 通过接入该功能,让用户可以从 App 分享文字、图片、视频、网页、小程序、音乐视频至微信好友会话、朋友圈或添加到微信收藏。微信分享及收藏功能已向全体开发者开放,开发者在微信开放平台账号下申请 App 并通过审核后,即可获得微信分享及收藏权限。微信分享及收藏目前支持文字、图片、视频、网页、小程序、音乐视频共六种类型(海外应用支持网页、小程序类型分享)

说白了,对于分享功能来说,是一个非常普遍而又常见的功能。但是面临不同的环境、不同的技术栈确实有点头大。特别是对于初入行的猴子们。

这里就针对分享功能在不同平台、不同技术栈应该怎样去实现做简单的分享。

1、h5分享-微信好友、朋友圈(移动端浏览器)
h5是如何实现微信分享功能??
参考微信分享官方文档:微信开发者官方文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
官网有点啰嗦,很多小伙伴看着看着就迷茫了 这里我做简单的小结:

  (1)在微信开发平台按照官方要求提供相关资料开通公众号,在开发设置里面配置安全域名。先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。备注:登录后可在“开发者中心”

(2)引入js文件:可以使用传统的引入方式:

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

(3)业务功能模块开发直接上代码

export function weixinShareInfo(name,title,url,logo){// name 活动名称   title 活动活动简介  url 分享的地址  logo    var data={//请求参数     data:url,//分享的页面地址    }    requestMethods("/weChat/getSign",data).then(res=>{      if (res.code == "SUCCESS") {        let weChatData = res.data          wx.config({            debug: false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。            appId: weChatData.appId,         // 必填,公众号的唯一标识,填自己的!            timestamp: weChatData.timestamp, // 必填,生成签名的时间戳,刚才接口拿到的数据            nonceStr: weChatData.nonceStr,   // 必填,生成签名的随机串            signature: weChatData.signature, // 必填,签名,见附录1            jsApiList: [              'updateAppMessageShareData',//分享好友              'updateTimelineShareData',// 分享朋友圈              'onMenuShareAppMessage',              'onMenuShareTimeline'            ]          })        wx.error(function(res){          alert(JSON.stringify(res))          // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。        });                wx.ready(function () {          //自定义“分享到朋友圈”及“分享到 QQ 空间”按钮的分享内容          wx.updateTimelineShareData({            title: name,   // 分享时的标题            desc:title,            link: weChatData.shareUrl,     // 分享时的链接            imgUrl:logo,    // 分享时的图标            success: function () {              console.log('分享成功')            },            cancel: function () {                console.log('取消分享')            }          });          //自定义分享给朋友、以及分享给qq好友          wx.updateAppMessageShareData({            title:name,            desc:title,             link:weChatData.shareUrl,            imgUrl:logo,             dataUrl: '',             success: function () {              console.log('分享成功')            },            cancel: function () {              // console.log('取消分享')            }          });// 获取“分享给朋友”按钮点击状态及自定义分享内容接口(即将废弃)          wx.onMenuShareAppMessage({            title: name, // 分享标题            desc: title, // 分享描述            link:weChatData.shareUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致            imgUrl:logo, // 分享图标            type: '', // 分享类型,music、video或link,不填默认为link            dataUrl:'', // 如果type是music或video,则要提供数据链接,默认为空            success: function () {              // 用户点击了分享后执行的回调函数            }          });// 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口(即将废弃)          wx.onMenuShareTimeline({  // 分享到朋友圈            title:  name, // 分享标题            desc: title, // 分享描述            link: weChatData.shareUrl, //分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致            imgUrl: logo, // 分享图标            success: function () {            // 用户点击了分享后执行的回调函数            }          })      //分享到微博          wx.onMenuShareWeibo({            title: name, // 分享标题            desc: title, // 分享描述            link: weChatData.shareUrl, // 分享链接            imgUrl: logo, // 分享图标            success: function () {            // 用户确认分享后执行的回调函数            },            cancel: function () {            // 用户取消分享后执行的回调函数            }          })
        })      }    })  
}

我这里稍微封装了一下,不同页面调用的时候传入相对应的参数即可(根据实际业务来定)。

2、小程序分享  

  微信小程序分享主要针对使用不同的技术框架来定不同的开发方案和方法。万卷不离其宗,都是离不开微信官方api onShareAppMessage 。那么接下来就针对目前市面上常用的几种技术框架展开分一下:
2.1  微信小程序原生实现分享

onShareAppMessage: function () { //分享朋友  return {    path: '分享的页面地址,默认是小程序首页',    title: '分享的标题',    imageUrl: '小程序对用的图片地址'  }}  onShareTimeline: function () {//分享朋友圈    return {      query: '自定义页面路径中携带的参数',      title:'分享的标题',      imageUrl: '小程序对用的图片地址'    }  }

2.2 uniapp开发的微信小程序实现分享
   由于uniapp框架不支持API调用,只能用户主动点击触发分享。可使用自定义按钮方式 <button open-type="share"> 或监听系统右上角的分享按钮 onShareAppMessage 进行自定义分享内容。

第一步,在微信公众平台申请开通微信公众号,具体的看上面的第一个案例h5分享。https://ask.dcloud.net.cn/article/208

第二步,在uniapp项目里面进行配置要分享的渠道(填入第一步申请的微信公众平台上拿到的appid)。具体操作如图所示:

 第三步,业务页面功能开发
首先来熟悉一下相关的api 参数以及相关的说明,  太多了 补贴了。 感兴趣的直接去阅读官网。

直接上干货:

uni.share({    provider: 'weixin',    scene: "WXSceneSession",    type: 5,    imageUrl: '',    title: '爆款大活动,多多参与',    miniProgram: {        id: 'gh_73d3d7ff6319',//小程序原始ID        path: 'pages/index/index',        type: 2,//0-正式版;1-测试版;2-体验版。 默认值为0。        webUrl: '小程序的域名'    },    success: ret => {        console.log(JSON.stringify(ret));    }});

另外一种实现方式:

uniapp开发的 App分享为微信小程序(App中分享一个内容到微信好友,对方微信中呈现的是一个小程序卡片)

uni.share({    provider: 'weixin',    scene: "WXSceneSession",    type: 5,    imageUrl: '图片地址',    title: '欢迎体验uniapp',    miniProgram: {        id: 'gh_abcdefg',        path: 'pages/index/index',        type: 0,        webUrl: 'http://uniapp.dcloud.io'    },    success: ret => {        console.log(JSON.stringify(ret));    }});

3、第三方app分享之云闪付小程序分享

关于云闪付小程序开发可以参考我之前的文章-云闪付小程序崛起之玩转云闪付小程序

由于云闪付右上角的胶囊api没有对外开放,我们只能对其进行二次开发

图文分享案例 直接上干货

function share(shareList){// title,desc,logo,url    let that = this;    let params = {"toLink": encodeURIComponent(shareList.url),"encryptAppId":AppId,};// "dc99e8750707d2ea"    let paramsData = JSON.stringify(params);    let str = CryptoJS.enc.Utf8.parse(paramsData);    let base64 = CryptoJS.enc.Base64.stringify(str);    upsdk.pluginReady (function(){        upsdk.showSharePopup({ //appletSharePopup shareSinglePlugin  appletSharePopup showSharePopup            title:shareList.title,            desc:shareList.desc,            shareUrl: '云闪付官方地址详情见云闪付开发者平台?params='+ base64,// 默认为当前页面链接即location.href            picUrl: logo, //默认显示银联云闪付图标             shareId: '3', // 详细见备注  '0' 短信,'1' 新浪微博,'3' 微信,'4' 朋友圈,'5' qq,'6' qqzon,'7' 拷贝链接;            shareType: '1', //'1':链接分享,'2':文字分享,'4':图片分享, 详细见备注            shareData: {  // 详细见备注            content:'', //可选,当shareType为2时,必传            image:'', //图片的base64数据,可选,仅当shareType为4时,传            },            success:function(data){ // 插件调用成功            },            fail:function(code){                console.log('分享失败');            console.log(code);                        }        });    });}

海报分享案例:

function shareImage(shareListTepy){    let that = this;
let shareUrl = decodeURIComponent(window.location.href)if(shareUrl.indexOf("?") != -1  && shareUrl.indexOf("userId") == -1){ //hareUrl.split(0,shareUrl.indexOf("userId"))    shareUrl = shareUrl+'&userId='+user  }else if(shareUrl.indexOf("userId") > -1) {    // shareUrl = shareUrl.substr(0,shareUrl.indexOf("userId"))+'userId='+user  }else{    shareUrl = window.location.href +'?userId='+user  }   let params = {"toLink": encodeURIComponent(shareUrl),"encryptAppId":AppId,};// "dc99e8750707d2ea"   let paramsData = JSON.stringify(params);   let str = CryptoJS.enc.Utf8.parse(paramsData);   let base64 = CryptoJS.enc.Base64.stringify(str); upsdk.pluginReady (function(){   upsdk.shareSinglePlugin({       title: '银联云闪付随机立减大优惠~!',       desc: '我刚刚使用银联云闪付, 省了30元,大家快来使用吧.',       shareUrl:  '云闪付官方地址详情见云闪付开发者平台?params='+ base64,// 默认为当前页面链接即location.href,// 默认为当前页面链接即location.href       picUrl: strlog, //默认显示银联云闪付图标        shareId: shareListTepy.shareId, // 详细见备注 //shareId, 必填,可选值为:'0','1','3','4','5','6','7';渠道shareId;短信:0,新浪微博:1,微信:3,朋友圈:4,QQ:5,QZone:6,拷贝链接  7       shareType: '4', //'1':链接分享,'2':文字分享,'4':图片分享, 详细见备注       shareData: {  // 详细见备注           content:'', //可选,当shareType为2时,必传           image:shareListTepy.imagesData //图片的base64数据,可选,仅当shareType为4时,传       },       fail:function(code){           // code: '01':对应渠道的应用未安装,例如微信未安装,或该渠道调用失败           // code: '02':检查shareType,shareaId是否正确           console.log(code)       }   }); })}

角度二:对于刚入行的程序员,你有什么想说的呢(建议或忠告)?

个人总结:认真分析需求,仔细阅读相关官方文档。没有实现不了的功能,互联网已经发展了几十年了,现在所有遇到的坑,基本上都有人踩过,踩过必有痕迹……

角度三:如何才能成为一名更优秀的程序员?

曾经在IBM一个团队呆过,当时的架构师这样说过:复杂的事情简单做,简单的事情重复做,重复的事情工具做,我们只做工具。这里分享给大家,希望能够帮助众多猴子们。

还有就是在工作中不管事哪级leader指派任务,都要问清楚对方三个问题:1、具体需求是什么?2、开发周期是多久什么时候启动?3、对接配合的相关团队是哪些(UI、后台、前端、测试、产品)

同样在做项目前要自己吃透需求,同时要问清楚自己三个问题:1、为什么要这么干?2、这样干有什么好处?3、还有没有更好的方式方法去做?

项目结束要及时的进行自我复盘、review。同时把做项目前问自己的三个问题在问一边。

相信时间久了,对自己的成长会有所帮助。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/38461.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于我在uni-app练手中遇到的坑

目录 页面层级结构的加载和回退 filePath编码 对象的深度克隆 弹幕的加载 ​编辑 uni-app内置浏览器加载视频失败 后台报错 java.io.IOException: 你的主机中的软件中止了一个已建立的连接 安卓里遍历uni-list-item错误 手机自带浏览器无法加载视频 乱码问题 video中…

【哈士奇赠书活动 - 17期】-〖uni-app跨平台开发与应用从入门到实践〗

文章目录 ❤️‍&#x1f525; 赠书活动 - 《uni-app跨平台开发与应用从入门到实践》❤️‍&#x1f525; 编辑推荐❤️‍&#x1f525; 抽奖方式与截止时间❤️‍&#x1f525; 赠书活动 → 获奖名单 ❤️‍&#x1f525; 赠书活动 - 《uni-app跨平台开发与应用从入门到实践》…

1个月uni-app微信小程序开发上线实战专栏介绍

一、专栏介绍&#xff1a; 《uni-app开发微信小程序1个月上线实战》&#xff0c;目标带领1000位同学成功开发上线一个自己的个人小程序&#xff01; 作者介绍&#xff1a;国服第二切图仔——资深前端开发工程师&#xff0c;具有六年以上的前端开发经验&#xff0c;曾在多家知…

深入浅析,一步步用GPT打造你的聊天机器人

使用GPT基于你自己的文档构建聊天机器人的分步指南。 微信搜索关注《Python学研大本营》&#xff0c;加入读者群&#xff0c;分享更多精彩 与ChatGPT聊天很有趣&#xff0c;而且信息量很大 —— 与它闲聊可以探索一些新的想法。但这些都是比较随意的用例&#xff0c;新奇感很快…

深入理解Python中的依赖注入

一文带你深入了解Python依赖注入。 微信搜索关注《Python学研大本营》&#xff0c;加入读者群&#xff0c;分享更多精彩 简介 依赖注入是软件工程中使用的一种设计模式&#xff0c;它允许在创建对象时由外部提供其依赖关系&#xff0c;而不是自己创建这些依赖关系。换句话说&a…

独立开发变现周刊(第84期):一个地理位置API服务,月收入1.5万美元

分享独立开发、产品变现相关内容&#xff0c;每周五发布。 (合集&#xff1a;https://ezindie.com/weekly ) 目录 1、tiny.host: 简单部署你的web项目2、Verif Tools: 一个在线虚拟身份信息生成器3、screen.studio: 一个桌面端的录屏编辑工具4、一个地理位置API服务&#xff0c…

李彦宏:十年后不会写提示词或被淘汰;GitHub发布Copilot X,动动嘴就能生成代码;Vite 4.2 发布|极客头条...

「极客头条」—— 技术人员的新闻圈&#xff01; CSDN 的读者朋友们早上好哇&#xff0c;「极客头条」来啦&#xff0c;快来看今天都有哪些值得我们技术人关注的重要新闻吧。 整理 | 梦依丹 出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; 一分钟速览新闻点&#…

22个提升生产力的工具推荐,稳了

子曰&#xff1a;工欲善其事&#xff0c;必先利其器。 本文给大家推荐22个提高生产力的工具&#xff0c;总有一款符合你的需求。&#x1f604;&#x1f604;&#x1f604; 提高生产效率工具推荐 滴答清单/Todoist文件检索利器&#xff1a;Everything文件管理软件-Allen Explor…

百度抢先发布中国版ChatGPT——文心一言,现已开通测试申请

3月16日&#xff0c;百度抢先其他国内科技巨头一步&#xff0c;率先发布被誉为中国版ChatGPT的“文心一言”。 即日起&#xff0c;百度也通过“百度智能云”官网正式开发“文心一言”的预约&#xff0c;申请云服务测试。 但是&#xff0c;目前百度智能云只面向企业级客户开放文…

chatgpt赋能python:Python录制屏幕:如何用Python录制屏幕

Python录制屏幕&#xff1a;如何用Python录制屏幕 如果你曾经想过如何在电脑上录制自己的屏幕以制作教学视频或演示产品&#xff0c;那么你需要了解一些关于Python录制屏幕的知识。Python是一门强大的动态编程语言&#xff0c;因其易于学习、连接数据库和编写简洁的代码&#…

chatgpt赋能python:Python中常见的Module报错及解决方法

Python中常见的Module报错及解决方法 在Python编程过程中&#xff0c;经常会使用各种第三方库和模块&#xff0c;以提高代码的效率和可读性。然而&#xff0c;在使用这些模块时&#xff0c;我们有时会遭遇各种各样的错误和异常。本文将介绍Python中常见的Module报错现象及其解…

chatgpt赋能Python-pythonimport报错

Python中Import报错的处理方法 Python是一款非常流行的编程语言&#xff0c;也是众多开发者选择的首选。在代码中&#xff0c;我们通常会使用import语句来引入其他模块&#xff0c;但在实际开发过程中&#xff0c;我们有时会遇到ImportError&#xff1a;No module named XXX等…

chatgpt赋能Python-pythonnumpy报错

Python中Numpy出现报错的解决方法 介绍 Numpy是Python中常用的数学计算库&#xff0c;其支持高效的数组处理和运算&#xff0c;是很多数据科学工程师必备的编程工具之一。由于其强大的功能和灵活性&#xff0c;Numpy在各行各业都有广泛的应用。但有时候在使用Numpy时可能会出…

Open Ai 常见接口参数说明以及常见报错总结

&#x1f4cb; 个人简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是阿牛&#xff0c;全栈领域优质创作者。&#x1f61c;&#x1f4dd; 个人主页&#xff1a;馆主阿牛&#x1f525;&#x1f389; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4d…

chatgpt赋能python:Python打开文件遇到的常见报错类型

Python打开文件遇到的常见报错类型 Python作为一种高级编程语言&#xff0c;在开发过程中经常需要读取或写入文件。然而&#xff0c;在实际操作中&#xff0c;我们经常会遇到一些FileNotFoundError、PermissionError等错误类型。在本文中&#xff0c;我将介绍常见的Python打开…

记者亲测GPT-4实际能力 围观10种职业“受虐”现场

出品&#xff5c;网易科技《智见焦点》 作者&#xff5c;赵芙瑶 编辑&#xff5c;丁广胜 作为OpenAI公司开发的一种生成式人工智能工具&#xff0c;有关学者以“阿拉丁神灯”和“潘多拉魔盒”来比喻ChatGPT所隐藏的潜能和可能带来的风险。自其发布以来&#xff0c;有关ChatGPT是…

文本聚类与摘要,让AI帮你做个总结

你好&#xff0c;我是徐文浩。 过去的十多讲里&#xff0c;我为你介绍了各种利用大语言模型的方法和技巧。特别是在过去两讲里&#xff0c;我们也尝试更加深入地利用开源代码帮我们完成一些工作。通过llama-index这样的开源库&#xff0c;我们能够将自己的数据和大语言模型连接…

物以类聚人以群分,通过GensimLda文本聚类构建人工智能个性化推荐系统(Python3.10)

众所周知&#xff0c;个性化推荐系统能够根据用户的兴趣、偏好等信息向用户推荐相关内容&#xff0c;使得用户更感兴趣&#xff0c;从而提升用户体验&#xff0c;提高用户粘度&#xff0c;之前我们曾经使用协同过滤算法构建过个性化推荐系统&#xff0c;但基于显式反馈的算法就…

01表盘控件-01汽车仪表盘-gaugecar

一、运行效果 二、功能特点 可设置范围值&#xff0c;支持负数值。可设置精确度&#xff0c;最大支持小数点后3位。可设置大刻度数量&#xff0c;小刻度数量。可设置开始旋转角度&#xff0c;结束旋转角度。可设置外圆背景、内圆背景、饼圆三种颜色、刻度尺颜色、文字颜色。自…

01表盘控件-17飞机仪表盘-gaugeplane

一、运行效果 二、功能特点 可设置外边框渐变颜色。可设置里边框渐变颜色。可设置主背景颜色、遮罩层颜色、刻度尺颜色。可设置线条颜色、文字颜色、指针颜色、遥感句柄颜色。可设置旋转角度。可设置滚动值。三、公共接口 public Q_SLOTS://设置外边框渐变颜色void setBorderO…