微信如何通过 js-sdk 调用 微信 分享接口 微信自定义分享朋友

2023-05-16

这段时间有个工作,是要在微信浏览器上实现自定义分享功能,找了一圈,最后决定使用微信JSSDK的‘分享接口’来开发,也是着实踩了下坑啊,分享一下

微信JSSDK介绍

官方文档地址:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
因为微信公众号的开通对于大部分开发人员来说还是一个稍高的门槛,所以,微信搞了一个微信测试号,开发人员使用微信扫一下就可以获取。测试号貌似是全接口调用的哦!不用担心没有权限调用。
申请入口:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
在这里插入图片描述

在配置时,需要注意几点

  • 接口配置信息中,要配合系统后台获取jsapi_ticket*

  • 配置JS接口安全域名时,注意是 域名 不需要填写http/https,如果填写的话,在代码执行wx.config()时,会报 config:fail,Error: invalid url domain 错误,正确示例:www.whongbin.cn*

微信JSSDK使用

1.在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.4.0.js
jssdk的签名权限,这个权限是由后台提供的,前端只需要把签名权限注入到wx.config中就可以了,这里也提供下

2.jssdk的下载地址http://demo.open.weixin.qq.com/jssdk/sample.zip,SDK中有demo。

注意事项

签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。

签名用的url必须是调用JS接口页面的完整URL。

出于安全考虑,开发者必须在服务器端实现签名的逻辑。

微信开放文档 | 概述

微信JS接口签名效验工具

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '', // 必填,公众号的唯一标识
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名
    jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage","onMenuShareQQ","onMenuShareQZone"] // 必填,需要使用的JS接口列表 这里填写需要用到的微信api openlocation为使用微信内置地图查看位置接口
});

这里需要注意的地方debug在上线后要改为false,jsApiList里要填你要使用的接口,不然没有作用

注意

签名算法

noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.weixin.qq.com?params=value

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

对string1进行sha1签名,得到signature:
0f9de62fce790f9a083d5c99e95740ceb90c27ed

invalid signature签名错误。建议按如下顺序检查:

确认签名算法正确,可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
页面工具进行校验。

确认config中nonceStr(js中驼峰标准大写S), timestamp与用以签名中的对应noncestr,
timestamp一致。

确认url是页面完整的url(请在当前页面alert(location.href.split(’#’)[0])确认),包括’http(s)?/‘部分,以及’?‘后面的GET参数部分,但不包括’#'hash后面的部分。

确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。

确保一定缓存access_token和jsapi_ticket。

确保你获取用来签名的url是动态获取的,动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名,前端需要用js获取当前页面除去’#‘hash部分的链接(可用location.href.split(’#’)[0]获取,而且需要encodeURIComponent),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。

var link = location.href.split('#')[0]; // 地址

这里link一定要location.href.split(’#’)[0];取当前的动态地址包括’http(s)?/‘部分,以及’?‘后面的GET参数部分,但不包括’#'hash后面的部分。 否者第二次分享会导致地址发生变化而报错

var imgUrl = ''
//分享朋友圈
wx.onMenuShareTimeline({
    title: '这是一个自定义的标题!',
    link: link,
    imgUrl: imgUrl,// 自定义图标
    trigger: function (res) {
        // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回.
        //alert('click shared');
    },
    success: function (res) {
        //alert('shared success');
        //some thing you should do
    },
    cancel: function (res) {
        //alert('shared cancle');
    },
    fail: function (res) {
        //alert(JSON.stringify(res));
    }
});
//分享给好友
wx.onMenuShareAppMessage({
    title: '这是一个自定义的标题!', // 分享标题
    desc: '这是一个自定义的描述!', // 分享描述
    link: link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: imgUrl, // 自定义图标
    type: 'link', // 分享类型,music、video或link,不填默认为link
    dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
    success: function () {
        // 用户确认分享后执行的回调函数
    },
    cancel: function () {
        // 用户取消分享后执行的回调函数
    }
});
wx.error(function (res) {
    alert(res.errMsg);
});
wx.error(function(res){
  console.log(res)
  // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
const url = location.href.split('#')[0];

注意

确保你获取用来签名的url是动态获取的,动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名,前端需要用js获取当前页面除去’#‘hash部分的链接(可用location.href.split(’#’)[0]获取,而且需要encodeURIComponent),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。

服务器每次生成ticket需要给当前的url

axios({
   method: 'post',
    url: config + '/ticket',
    data: {
        url: url
    }
}).then(function (response) {
  console.log(response)
  let data = response.data.data.ticket;
})
.catch(function (error) {
    console.log(error);
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

微信如何通过 js-sdk 调用 微信 分享接口 微信自定义分享朋友 的相关文章

  • win11怎么取消显示更多选项

    1 点击Windows键 xff0c 输入cmd xff0c 然后选择以管理员运行cmd xff0c 最后敲入下面命令 reg add HKCU Software Classes CLSID 86ca1aa0 34aa 4e8b a509
  • Docaker部署Nginx配置多个域名

    1 拉取nginx镜像 sudo docker pull nginx 2 映射端口指定配置文件和前端目录 sudo docker run d p 9524 9524 p 9525 9525 p 10080 10080 restart alw
  • 硬件消抖——开关并联电容的那点事儿

    硬件消抖 开关并电容的那点事儿 一年前做过的小脚丫的消抖实验和不消抖实验的区别 xff0c 开关如果不消抖 xff0c 产生的毛刺和电平变化确实给开关带来了不良影响 xff0c 比如按键不灵 xff0c 需要按暂停或者切换的时候要反复按多次
  • 微信电脑版登录不了了,怎么办?不显示二维码

    今天微信开发者工具不显示二维码 xff0c 很尬 xff0c 找了好了方法 xff0c 最满意的一个如下 xff0c 如果解决了 xff0c 记得给我点赞 电脑上无法登录微信的解决方法 xff1a 1 先退出电脑微信登录页面 2 按Win
  • eclipse集成git关联到gitee同步代码

    eclipse集成git关联到gitee同步代码 1 注册gitee2 eclipse集成git3 eclipse配置git4 gitee配置用户ssh公钥5 本地新建项目提交到本地git仓库6 本地git仓库提交到远程gitee仓库7 修
  • JavaEE互联网轻量级框架整合开发-1入门和技术基础-JDK代理

    JDK代理 1 定义接口 public interface HelloYuan public void sayHelloYuan 2 实现接口 public class HelloYuanImpl implements HelloYuan
  • 阿里巴巴代码规范4点

    阿里巴巴代码规范 一 安全规约 前端 后端接口进行权限和角色校验展示敏感数据时需脱敏 xff08 用户个人手机号码 xff1a 137 3927 xff09 SQL注入问题 xff08 字符串拼接访问数据库 xff09 xff0c 表示先编
  • Cannot read property ‘appendChild‘ of null错误

    记前端Js报错 xff0c Cannot read property appendChild of null 页面由上至下执行 xff0c 提示获取不到插入的节点 将js代码放到body中的最后面
  • The new driver class is `com.mysql.cj.jdbc.Driver‘.

    记一次数据库连接数据库报错 报错提示 xff1a Loading class com mysql jdbc Driver 39 This is deprecated The new driver class iscom mysql cj j
  • Consider defining a bean of type ‘com.project.springboot.mapper.UserMapper‘ in your configuration.

    新建springboot项目启动时出现报错 xff1a Consider defining a bean of type com project springboot mapper UserMapper in your configurat
  • 面试官:如何优化sql

    在面试的环节中 xff0c 面试官问到 xff1a 你是如何设计你的表结构的 xff0c 画一下E R图 xff1f 接着又继续深挖 xff0c 如果有慢查询 xff0c 你是如何优化你的sql的 xff1f 今天 xff0c 我就来和大家
  • PageNotFound.noHandlerFound No mapping found for HTTP request with URI

    学习SpringMVC接收参数 xff0c 不小心配置xml文件包名出错 浏览器访问出现以下报错 xff0c 后端提示 xff1a org span class token punctuation span springframework
  • The driver has not received any packets from the server

    idea启动本地项目提示报错 The driver has not received any packets from the server xff0c 可能是数据库Mysql服务被停止 解决办法 xff1a 1 打开计算机的任务管理器 2
  • [Vue-Treeselect Warning] Detected duplicate presence of node id

    只能说出现这个问题的小伙伴们 xff0c 和曾经的我一样 xff0c 给自己挖了一个巨坑 问题点 xff1a 不影响任何业务需求或者操作 xff0c 但是在控制台出现了以上截图报错 xff08 找到问题的我不顾上班时间 xff0c 愤怒写下
  • vmware-horizon-client安装失败无反应

    公司周日下午5点说开始远程办公 xff0c 让我们装上vmware horizon client开始居家办公啦 xff0c 但是捏 xff0c 我昨天光是安装就傻了 xff0c 整一晚上 xff0c 点击安装软件exe xff08 下面截图
  • springboot搭建web项目

    记录在本地搭建的springboot web项目 1 file gt New gt Project 2 选择Spring Initializr gt next 3 选择对应构建 开发语言 打包方式 JDK版本等内容 4 选择需要添加的依赖
  • SyntaxError: Unexpected token ‘.‘

    开发时vscode弹出插件更新 手一抖安装了插件vue Language Featues xff08 Volar xff09 本来正常运行的代码报错 xff1a SyntaxError Unexpected token span class
  • java项目调用SAP函数报错

    公司内部新增一个java项目调用SAP系统中的函数 调试时出现如下问题 xff08 xff09 问题一 xff1a com sap conn jco JCoException span class token punctuation spa
  • 计算机概论

    最近要学习Linux系统 xff0c 所以顺道将计算机的前世今生也学习了 xff0c 下面做个读书笔记增强记忆 一 计算机的组成 1 计算机硬件的五大单元 从外观看来 xff0c 计算机主要分为三部分 xff1a 输入单元 xff1a 包括
  • Ubuntu18.04安装QT5.14.2

    Ubuntu18 04安装QT5 14 2以及QT导入项目问题和解决办法 1 官网下载安装包2 官网注册账号3 安装4 解决bug5 QT导入项目6 其他Ubuntu18 04安装github desktop 7 QTimer不能同时使用两

随机推荐