首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >微信jssdk分享接口

微信jssdk分享接口

作者头像
治电小白菜
发布于 2020-08-25 07:25:06
发布于 2020-08-25 07:25:06
7K00
代码可运行
举报
文章被收录于专栏:技术综合技术综合
运行总次数:0
代码可运行

用的测试账号, 貌似没法点击分享... 分享给好友和分享到朋友圈按钮就直接失灵...

1.后端接口提供

(测试功能 所以url就固定了)

主要就是提供下图这些数据

image.png

1.1 使用技术

  • express --- 提供接口
  • redis --- 缓存access_token 和 jsapi_ticket
  • request --- 请求微信接口

1.2 步骤

通过appIdappSecret 获取access_token, 再通过access_token来获取jsapi_ticket. 由于jsapi_ticket具有7200s的的时效性,所以之前先判断redis里是否又jsapi_ticket.若有则直接使用官方的实例代码中的sign方法进行加密,若没有则重新请求后加密,之后将上面图中的数据发给前端.

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const appId = ' '
const appSecret = ' '
app.get('/wechat', async function (req, res) {
    redis.get('jsapi_ticket', function (err, val) {
        if (err) throw new Error(err)
        if (val === null) {
            request({
                url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appId}&secret=${appSecret}`,
                method: 'GET',
                json: true
            }, function (error, response, body) {
                redis.set('access_token', body.access_token, 'EX', 7200);
                request({
                    url: `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${body.access_token}&type=jsapi`,
                    method: 'GET',
                    json: true
                }, function (error, response, body) {
                    redis.set('jsapi_ticket', body.ticket, 'EX', 7200)
                    console.log(val, 1)
                    res.send(sign(body.ticket, 'https://www.zzes1314.cn/data.html'))
                })
            })
        } else {
            res.send(sign(val, 'https://www.zzes1314.cn/data.html'))
        }
    })
})

2.前端请求接口

用了jQuery

2.1 步骤

先引入js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

直接先请求后端接口拿到数据,进行wx.config,然后再进行接口配置

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 $.when(
      $.ajax({
        type: "GET",
        url: '/api/wechat',
        contentType: "application/json; charset=utf-8",
        dataType: "JSON",
        success: function (res) {
          console.log('res', res)
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
            appId: 'wx9eb6dd4eb329aceb', // 必填,公众号的唯一标识
            timestamp: res.timestamp, // 必填,生成签名的时间戳
            nonceStr: res.nonceStr, // 必填,生成签名的随机串
            signature: res.signature,// 必填,签名
            jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填,需要使用的JS接口列表
          });
        }
      })
    ).done(function () {
      wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
        wx.updateAppMessageShareData({
          title: 'test', // 分享标题
          desc: 'test列表', // 分享描述
          link: 'http://www.zzes1314.cn/data.html', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: 'https://www.zzes1314.cn/images/qrcode.png', // 分享图标
        }, function (res) {
          alert(111)
        });
        wx.updateTimelineShareData({
          title: 'test', // 分享标题
          link: 'http://www.zzes1314.cn/data.html', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: 'https://www.zzes1314.cn/images/qrcode.png', // 分享图标
        }, function (res) {
          alert(222)
        });
      });
    })

3.注意事项

3.1 个人公众号没有分享接口

3.2 需要配置ip白名单和安全域名

image.png

image.png

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Web前端学习 第11章 微信开发4 JS-SDK接口
微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。例如我们网页中希望实现扫一扫、获取本地相册、位置信息、分享功能等,都可以使用JS-SDK来实现。
学习猿地
2020/07/09
2.4K0
Web前端学习 第11章 微信开发4 JS-SDK接口
微信公众号是html页面吗,微信公众号网页开发
如果有相关接口权限无法开启,推荐使用:微信公众平台-开发-开发者工具-公众平台测试帐号开发
全栈程序员站长
2022/09/06
14.7K0
微信公众号是html页面吗,微信公众号网页开发
微信网页分享(配合微信公众平台)[通俗易懂]
保存之前要把文件下载下来放到项目根目录下,如果是开发环境的springboot项目可以参照这个教程做
全栈程序员站长
2022/09/24
6.6K0
微信网页分享(配合微信公众平台)[通俗易懂]
C# 实现微信自定义分享
在实际的应用中,我们可能不是简单的将该网页的链接直接分享出去,而是生成符合实际需要的URL,微信称其为自定义分享。意思即,在用户点击“转发给朋友”按钮之前,进行URL等内容的更新 ,经过调整后,再把链接发送给要分享的朋友。微信给出的关键方法是:updateAppMessageShareData。
初九之潜龙勿用
2024/06/20
2410
C# 实现微信自定义分享
聊聊微信分享的前端实现
之前对分享功能的实现也知道个七七八八,但一直没有在业务中实现过。今年参与的盲盒类产品正好用到了分享功能,包括:
前端森林
2022/01/24
1.8K0
聊聊微信分享的前端实现
网页分享链接和网页授权获取用户的信息
第一个接口已经完成了,是直接调用其他人写好的现成的接口,而我们服务端只是做了一个透传,数据给到前端,其实目的就达到了。但是,调用的过程中会有很多疑问,比如接口是如何封装的?封装了哪些信息?access_token的刷新机制是什么?对我们来说是一个黑箱。后面还遇到了其他的问题,比如网页授权接口我们是要自己写还是依然调用理科的接口?他和之前分享链接的接口有没有联系?要解决这些疑问,还是要研究这两个功能到底是如何实现的。下面是根据开发过程整理出文档,记录下来,后续还有类似功能开发,可以借鉴。
用户7798898
2020/09/27
2.9K0
微信公众号开发 —— 自定义分享
微信公众号开发JS-SDK说明文档地址:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 1.绑定JS域名,不需要加h
JaneYork
2023/10/11
6070
微信公众号开发 —— 自定义分享
SpringBoot接入微信JSSDK,看这篇妥妥的
https://github.com/javadog-net/springboot-wexin
JavaDog程序狗
2024/10/10
2230
SpringBoot接入微信JSSDK,看这篇妥妥的
【全干】从零搞定微信SDK授权
写作背景: 💢第一坑来自ali云,ali云的函数计算FC产品在使用模板创建项目的过程中,如下图中的服务名和函数名每次创建都是一样的,我们很容易就按默认的创建了,但是多次创建会覆盖前一次的内容,我写好的授权接口就被覆盖了~ 💘ali的产品原来也有这种低级的错误,不管你是产品设计的缺陷还是系统开发的缺陷,这都是致命的,因为正常运行的服务丢了~ 💥第二坑来自WeChat,在ali云调试好的代码丢就丢了吧,我就打算还在ali云上开始重新来一遍,靠着搜索到的网站还没关掉,就写完了第二遍云上的代码,接
前端小鑫同学
2022/12/26
8530
【全干】从零搞定微信SDK授权
微信公众号x低代码,微搭公众号应用开发快速上手教程
基于大家对"漫话开发者"前面的微信支付x低代码、微信小程序消息推送x低代码等系列文章的关注,最近也有同学问到公众号相关的问题,今天就简单介绍下低代码开发的H5应用如何调用微信公众号的能力,目前的方式主要有如下两种,大家可按需选取适用方案。
漫话开发者
2023/01/28
2.5K0
微信公众号x低代码,微搭公众号应用开发快速上手教程
解决微信二次分享不显示摘要和图片的问题
标题被截短,描述也变成了链接,图片也没有,运营人员半夜还在嚷嚷,无奈只好硬着头皮去百度,去google,但是悲催的是没有详细的解决方法,最终只能自己去研究,还好最终搞出来了,决定分享一下,帮助需要的人。
sinnoo
2022/01/04
2.2K0
uni-app 微信公众号内嵌H5 自定义分享开发踩坑
首次开发卡片式分享链接,过程中遇到许多坑, 终于完成了这个功能,记录的开发过程不一定符合你的需求,但如果你也是用uniapp开发,希望本篇能够帮助到你。
玖柒的小窝
2021/10/26
4.9K3
uni-app 微信公众号内嵌H5 自定义分享开发踩坑
全面的.NET微信网页开发之JS-SDK使用步骤、配置信息和接口请求签名生成详解
注意:假如需要在页面加载时就调用的话,需要把对应的执行函数放到wx.ready(function(){});方法里面加载执行,之前我调用加载就获取地理位置的接口就是因为没有放到这里面所以一直没有获取到用户当前经纬度坐标。
追逐时光者
2023/12/04
6610
全面的.NET微信网页开发之JS-SDK使用步骤、配置信息和接口请求签名生成详解
微信中页面二次分享小图标丢失问题
在我们有房APP1.1的版本中增加了房产资讯的功能,昨天晚上有同事在群里反馈从APP中分享的资讯到微信中,然后再次分享出去的时候标题和小图标不见了,见下图:
猿天地
2018/07/25
3.3K0
微信中页面二次分享小图标丢失问题
关于微信二次分享,标题变链接的解决方法(二)----代码部分
声明: 本篇博文只是个人工作中的分享总结,仅代表个人观点,虽然解决了不少网友的问题,但同时也引来了一些网友的不满,所以特此声明,当您遇到本博文解决不了的问题,可以尝试重新进行其他搜索或者一起交流,相信总归能解决,而不是言语攻击!该博文的解决方案毕竟不是万金油,解决不了所有问题! 上篇主要介绍了分享的文档,下面这篇直接上代码(代码是用PHP来写的),让大家更容易理解。上篇地址:关于微信二次分享,描述变链接的解决方法(一)----文档说明 代码分三部分进行,第一部分是C层(Controller),第二部分是M层
joshua317
2018/04/16
9530
微信JSSDK接入Java版--步骤及问题处理和解决
可以关注测试微信号,查看效果  服务器是个人的。请不要恶意攻击。 JSSDK使用步骤 http://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp142
小帅丶
2018/02/09
3.9K0
微信JSSDK接入Java版--步骤及问题处理和解决
微信公众号网页开发之拍照、上传本地图片
JS-SDK说明文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#0
全栈程序员站长
2022/09/02
1.5K0
微信分享开发
微信分享的文档 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 微信 JS 接口签名校验工具 https://mp.
苏生不惑
2019/08/14
2.8K0
微信JS-SDK的使用
通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。
越陌度阡
2020/11/26
17.5K0
微信公众平台开发[2] —— 微信端分享功能
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/details/51870790
泥豆芽儿 MT
2018/09/11
5.8K0
微信公众平台开发[2] —— 微信端分享功能
推荐阅读
相关推荐
Web前端学习 第11章 微信开发4 JS-SDK接口
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档