搜索
您的当前位置:首页正文

浅谈微信JS-SDK 微信分享接口开发(介绍版)

2023-12-07 来源:爱乐情感

本文主要是分享自己的开发过程,希望能给部分存在同样问题的朋友一点点帮助;

最近项目中的网页通过微信分享朋友或朋友圈等功能出现了无法显示分享图片等信息,后经过排查发现是微信版本升级导致,采用js-sdk完成分享接口,为了快速实现该功能效果,于是我打算通过前台js进行实现来看看分享效果。

通过查看微信公众平台文档,找到自己所需要的说明文档,明确开发步骤,说明文档截图如下:

开发步骤:

1、按照说明文档完成步骤1.1.1

2、引入js文件

在分享的页面中添加js文件 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- 必须引入的文件--> <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script src="https://www.gxlcms.com/commonScripts/jquery-1.5.1.min.js"></script> <!-- sha1加密js文件--> <script src="https://www.gxlcms.com/commonScripts/wxShare_sha1.js"></script> <!-- 组装微信配置信息js文件--> <script src="https://www.gxlcms.com/commonScripts/wxShare_data.js"></script> <!-- 微信分享时调用对应的接口js文件--> <script src="https://www.gxlcms.com/commonScripts/wxShare.js"></script> </head> <body id="weixinshare"> 微信分享开发 <img style="width:672px; height:345px; cursor:pointer" alt="banner01" src="https://www.gxlcms.com/mobileimg/123.jpg"> </body> </html>

3、配置wxShare.js

 var $wx_account = wxdata.wx_account, // 自定义数据,见wxShare_data.js $wx_share = wxdata.wx_share; // 自定义数据 ,见wxShare_data.js //配置微信信息wx.config ({ debug : false, // true:调试时候弹窗 appId : $wx_account[0], // 微信appid timestamp : $wx_account[1], // 时间戳 nonceStr : $wx_account[2], // 随机字符串 signature : $wx_account[3], // 签名 jsApiList : [ // 所有要调用的 API 都要加到这个列表中 'onMenuShareTimeline', // 分享到朋友圈接口 'onMenuShareAppMessage', // 分享到朋友接口 'onMenuShareQQ', // 分享到QQ接口 'onMenuShareWeibo' // 分享到微博接口 ]});wx.ready (function () { // 微信分享的数据 var shareData = { "imgUrl" : $wx_share[0], // 分享显示的缩略图地址 "link" : $wx_share[1], // 分享地址 "desc" : $wx_share[2], // 分享描述 "title" : $wx_share[3], // 分享标题 success : function () { // 分享成功可以做相应的数据处理 //alert("分享成功"); } }; wx.onMenuShareTimeline (shareData); wx.onMenuShareAppMessage (shareData); wx.onMenuShareQQ (shareData); wx.onMenuShareWeibo (shareData);}); wx.error(function(res){ // config信息验证失败会执行error函数,如签名过期导致验证失败, // 具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看, //对于SPA可以在这里更新签名。 alert("好像出错了!!");});

4、组装微信的配置信息wxShare_data.js

var wxdata = {wx_account : new Array(4),wx_share : new Array(4),wx_myuser : new Array("appid","appsecret"),access_token : "", // 凭证token_expires_in : "" , // 凭证过期时间 单位:sjsapi_ticket : "", // 凭证ticket_expires_in : "" , // 凭证过期时间 单位:surl : "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + wxdata.wx_myuser[0] + "&secret=" + wxdata.wx_myuser[1], // 获取access_token // *注意* 经过实际开发测试,微信分享不支持跨域请求,因此获取access_token的请求必须从服务器发起,否则无法获取到access_tokenget_access_token : function (){$.ajax({type : "GET",url : wxdata.urldataType : "jsonp", // 解决跨域问题,jsonp不支持同步操作cache : false,//jsonp :'callback',success : function(msg) { // 获取正常 {"access_token":"ACCESS_TOKEN","expires_in":7200}// 获取失败 {"errcode":40013,"errmsg":"invalid appid"}wxdata.access_token = msg.access_token; // 获取到的交互凭证 需要缓存,存活时间token_expires_in 默认为7200swxdata.token_expires_in = msg.expires_in; // 过期时间 单位:sif (access_token != "" || access_token != null) {console.log("get access_token success: " + wxdata.access_token);} else {console.log("get access_token fail " +wxdata.access_token);}},error : function(msg){alert("get access_token error!! : ");}});},// 获取jsapi_ticket// *注意* 经过实际开发测试,微信分享不支持跨域请求,因此获取jsapi_ticket的请求必须从服务器发起,否则无法获取到jsapi_ticketget_jsapi_ticket : function(){$.ajax({type : "GET",url : "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + wxdata.access_token +"&type=jsapi",dataType : "jsonp",cache : false,async : false,jsonp :'callback',success : function(msg) { /* {"errcode":0,"errmsg":"ok","ticket":"e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA","expires_in":7200} */if(msg.errcode == 0){wxdata.jsapi_ticket = msg.ticket; // 需要缓存,存活时间ticket_expires_in 默认为7200swxdata.ticket_expires_in = msg.expires_in; // 过期时间 单位:sconsole.log("get jsapi_ticket success");} else {console.log("get jsapi_ticket fail");}},error : function(msg){alert("get jsapi_ticket error!!! ");}});},// 数据签名 create_signature : function(nocestr,ticket,timestamp,url){var signature = "";// 这里参数的顺序要按照 key 值 ASCII 码升序排序var s = "jsapi_ticket=" + ticket + "&noncestr=" + nocestr + "×tamp=" + timestamp + "&url=" + url;return hex_sha1(s); }, // 自定义创建随机串 自定义个数0 < ? < 32 create_noncestr : function () { var str= "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; var val = ""; for (var i = 0; i < 16; i++) { val += str.substr(Math.round((Math.random() * 10)), 1); } return val; },// 自定义创建时间戳create_timestamp : function () { return new Date().getSeconds(); }} //wxdata.get_access_token(); // 1wxdata.access_token = "B06fRIti5GDmvNLKsV5OkJ4fU1qd3YyyW0cgwenxhqI7XwmpTrpwY6Uc7nNtnumdJvnPJXcACAVPD"; //2 //wxdata.get_jsapi_ticket(); //3wxdata.jsapi_ticket = "XGEs8VD-_kgoxt8jcijupT7j_EA-nP07ro_MmUNDVD0oR8unfqY4C_YIMXAQvhztlTk8j2A" //4 // ----- 5 开始 ------var timestamp = wxdata.create_timestamp(); // timestampvar noncestr = wxdata.create_noncestr(); // noncestrvar url = window.location.href; wxdata.wx_account[0] = wxdata.wx_myuser[0]; // appidwxdata.wx_account[1] = timestamp; // timestampwxdata.wx_account[2] = noncestr; // noncestrwxdata.wx_account[3] = wxdata.create_signature(noncestr, wxdata.jsapi_ticket ,timestamp ,url);//signature wxdata.wx_share[0] = "http://www.123456.com/img/123.jpg"; // share_img 分享缩略图图片wxdata.wx_share[1] = window.location.href;// share_link 分享页面的url地址,如果地址无效,则分享失败wxdata.wx_share[2] = "this is share_desc";// share_descwxdata.wx_share[3] = "this is share_title";// share_title// -------- 5 结束 ---------- 

说明:

4.1 分享流程:

用户创建时间戳,随机字符串,当前需要分享的页面的url三个变量,接着将自己的appid和APPsecret作为请求参数获取access_token,再根据access_token获取jsapi_ticket,  然后将获取的jsapi_ticket,以及自己创建的三个变量进行签名,注意签名过程案按照 key 值 ASCII 码升序排序,具体参加程序,

4.2 请求后的响应程序无法处理 问题

get_access_token()函数中对微信发起获取access_token的请求,存在跨域问题,设置dataType:"jsonp"无法解决,通过浏览器查看请求发现微信相应的数据并没有包装数据,猜测微信不支持这个请求的跨域,因为ajax程序无法通过程序正常获取access_token的值,但可以在浏览器调式获取access_token的值,这个值有7200s,足够去获取jsapi_ticket ,获取jsapi_ticket的请求过程存在同样的问题,因此获取access_token和jsapi_token必须从服务端后端代码。

这篇文章主要是想用js请求来完成分享的效果属于介绍篇,因而没有开发服务器端请求代码(勿喷),服务器篇代码见后续的应用篇

那么如何正常才能让程序跑起来,正常的分享页面呢??

在wxShare_data.js 代码中,首先发起 wxdata.get_access_token();  注释②③④⑤代码,将浏览器获取的access_token,手动的放到②变量处,

手动完成了access_token的赋值后,注释①,打开②③,开始  wxdata.get_jsapi_ticket();    注释④⑤处代码

同样的操作 从浏览器获取 jsapi_ticket值将其赋值给④处变量,注释①③,打开②④⑤处代码,最终代码见wxShare_data.js

5、wxShare_sha1.js

对数据进行签名  sha1.js下载

6、此时页面可以正常运行并完成微信分享了,

成功页面展示

微信分享给朋友

至此完成想要的验证效果,接下来就可以在服务器带开发代码了!!!期待完整版微信分享

小编还为您整理了以下内容,可能对您也有帮助:

如何使用微信JS-SDK实际分享功能

1、登录微信平台,点击“公众号设置”。

2、点击“功能设置”,然后点击“设置”。

3、设置JS接口安全域名。这里填写的是一级域名,不带www和http。

最多可以设置三个域名。

设置完后点击确定。

(多说一句,相比以前的分享没有任何域名,这里设置安全域名,目的是为了当发现此公众平台发现诱导分享行为时,可以根据此域名追溯到所有分享出去的链接,以及通过这些链接增加的粉丝。这样,微信就可以牢牢控制了你的微信平台,一旦发现违规,让分享链接失效,删除掉诱导行为增加的粉丝,是瞬间就可以完成的。

因此,微信平台的开发者,一定要合理来使用分享功能,不要因小失大。等到你的微信平台被封,估计哭都来不及)

4、在开发者中心中获取你的AppID和AppSecret,接下来在获取令牌时,需要这两个信息。

5、获取令牌。在服务器端完成,代码如下:

function wx_get_token() {

    $token = S('access_token');

    if (!$token) {

        $res = file_get_contents('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='            .'你的AppID'.'&secret='            .'你的AppSecret');

        $res = json_decode($res, true);

        $token = $res['access_token'];

        // 注意:这里需要将获取到的token缓存起来(或写到数据库中)

        // 不能频繁的访问https://api.weixin.qq.com/cgi-bin/token,每日有次数

        // 通过此接口返回的token的有效期目前为2小时。令牌失效后,JS-SDK也就不能用了。

        // 因此,这里将token值缓存1小时,比2小时小。缓存失效后,再从接口获取新的token,这样

        // 就可以避免token失效。

        // S()是ThinkPhp的缓存函数,如果使用的是不ThinkPhp框架,可以使用你的缓存函数,或使用数据库来保存。

        S('access_token', $token, 3600);

    }

    return $token;

}

注意:返回的access_token长度至少要留够512字节。接口返回值:

{"access_token":"ACCESS_TOKEN","expires_in":7200}

{"access_token":"vdlThyTfyB0N5eMoi3n_aMFMKPuwkE0MgyGf_0h0fpzL8p_hsdUX8VGxz5oSXuq5dM69lxP9wBwN9Yzg-0kVHY33BykRC0YXZZZ-WdxEic4","expires_in":7200}

6、获取jsapi的ticket。jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取。

function wx_get_jsapi_ticket(){

    $ticket = "";

    do{

        $ticket = S('wx_ticket');

        if (!empty($ticket)) {

            break;

        }

        $token = S('access_token');

        if (empty($token)){

            wx_get_token();

        }

        $token = S('access_token');

        if (empty($token)) {

            logErr("get access token error.");

            break;

        }

7、签名,将jsapi_ticket、noncestr、timestamp、分享的url按字母顺序连接起来,进行sha1签名。

noncestr是你设置的任意字符串。

timestamp为时间戳。

            $timestamp = time();

            $wxnonceStr = "任意字符串";

            $wxticket = wx_get_jsapi_ticket();

            $wxOri = sprintf("jsapi_ticket=%s&noncestr=%s&timestamp=%s&url=%s",

                $wxticket, $wxnonceStr, $timestamp,

                '要分享的url(从http开始,如果有参数,包含参数)'

                );

           $wxSha1 = sha1($wxOri);

8、添加JS代码:

生成签名后,就可以使用js代码了。在用户的html中,进行如下设置即可。

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

<script type="text/javascript">

// 微信配置

wx.config({

    debug: false, 

    appId: "你的AppID", 

    timestamp: '上一步生成的时间戳', 

    nonceStr: '上一步中的字符串', 

    signature: '上一步生成的签名',

    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 功能列表,我们要使用JS-SDK的什么功能

});

// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在 页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready 函数中。

wx.ready(function(){

    // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口

    wx.onMenuShareTimeline({

        title: '分享标题', // 分享标题

        link:"分享的url,以http或https开头",

        imgUrl: "分享图标的url,以http或https开头" // 分享图标

    });

    // 获取“分享给朋友”按钮点击状态及自定义分享内容接口

    wx.onMenuShareAppMessage({

        title: '分享标题', // 分享标题

        desc: "分享描述", // 分享描述

        link:"分享的url,以http或https开头",

        imgUrl: "分享图标的url,以http或https开头", // 分享图标

        type: 'link', // 分享类型,music、video或link,不填默认为link

    });

});

</script>

公众号h5中使用微信JS-SDK(个人笔记)

通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。

例子为在vue中使用微信JS-SDK,步骤如下:

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注:登录后可在“开发者中心”查看对应的接口权限。

插件方式:

引入js文件方式:

在需要调用JS接口的页面引入如下JS文件,(支持https): http://res.wx.qq.com/open/js/jweixin-1.6.0.js

如需进一步提升服务稳定性,当上述资源不可访问时,可改访问: http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)。

挂载到Vue原型

与使用 JS-SDK 配置方式相同,所有需要使用开放标签的页面必须先注入配置信息,并通过openTagList字段申请所需要的开放标签,否则将无法使用(同一个 url 仅需调用一次)。开放标签的申请和 JS 接口的申请相互,因此是可以同时申请的。

配置成功之后,就可以使用相关的api了。例子为微信支付。

3.分享出去的是链接,不是卡片的原因及解决方案:

原因: 微信开放全域名访问后出现的。

解决方法:

这会导致别人通过分享卡进来的页面不是自己配置的页面。

解决办法: 把路由hash模式改成history模式。(让后端把匹配不到的页面重定向到首页)

开发者需要配合使用微信开放平台提供的 SDK 进行一次性订阅消息授权请求接入。正确接入 SDK 后,开发者移动应用会在终端本地 拉起微信应用进行订阅消息授权 ,微信用户确认后微信将拉起开发者移动应用,并带上授权用户 openid 等信息。

使用方式: 引导用户打开 https://mp.weixin.qq.com/mp/subscribemsg?action=get_confirm&appid=wxaba38c7f163da69b&scene=1000&template_id=1uDxHNXwYQfBmXOfPJcjAS3FynHArD8aWMEFNRGSbCc&redirect_url=http%3a%2f%2fsupport.qq.com&reserved=test#wechat_redirect 链接。

可拉起微信打开一次性消息订阅授权页:

使用方式:

如需添加参数,可在redirect_uri后面进行拼接,授权成功之后会带回来。

其他问题请参考: https://www.jianshu.com/p/d343067b1ce6

如何使用微信JS-SDK实际分享功能

你好,//通过config接口注入权限验证配置wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: ', // 必填,公众号的唯一标识 timestamp: , // 必填,生成签名的时间戳 nonceStr: ', // 必填,生成签名的随机串 signature: ',// 必填,签名,见附录1 jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2});//例如 ://“分享给朋友”按钮点击状态及自定义分享内容接口wx.onMenuShareAppMessage({ title: ', // 分享标题 desc: ', // 分享描述 link: ', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: ', // 分享图标 type: ', // 分享类型,music、video或link,不填默认为link dataUrl: ', // 如果type是music或video,则要提供数据链接,默认为空 success: function () { // 用户确认分享后执行的回调函数 }, cancel: function () { // 用户取消分享后执行的回调函数 }});如何使用微信JS-SDK实际分享功能

爱乐情感还为您提供以下相关内容希望对您有帮助:

jssdk是什么意思

JSSDK全称为JavaScriptSDK,是微信公众号开发所需要的一组API接口集合。在微信公众号中,JSSDK能够帮助开发者实现一些常用的功能,例如分享到朋友圈、微信支付等。由于微信用户每月活跃人数较大,JSSDK相当于公众号开发的必要工具...

公众号h5中使用微信JS-SDK(个人笔记)

例子为在vue中使用微信JS-SDK,步骤如下:先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 备注:登录后可在“开发者中心”查看对应的接口权限。插件方式:引入js文件方式:在需要调用JS接...

如何使用微信JS-SDK实际分享功能

// 不能频繁的访问https://api.weixin.qq.com/cgi-bin/token,每日有次数限制 // 通过此接口返回的token的有效期目前为2小时。令牌失效后,JS-SDK也就不能用了。// 因此,这里将token值缓存1小时,比2小时小。缓存...

自定义微信分享链接(使用JS-SDK) + 实现预览pdf

由于在网页中直接查看pdf的路径是无法在微信中查看(安卓)和分享(ios),因此使用pdf插件进行优化 --- pdf.js 。其原理是绘制成canvas,最终在真机上放大时可能出现模糊的问题。创建之后控制台会报错出现跨域问题,因为pdf...

js处理微信分享配置

整理一下通过h5做微信分享相关配置。登录微信公众号, 获取AppID , 配置白名单 ,然后 配置JS接口安全域名 。登录公众号后,左侧菜单栏选择:开发 =&gt; 基本配置,直接复制开发者ID(AppID)即可:注意使用公网IP 左侧菜单栏...

如何使用微信JS-SDK实际分享功能

登录你的微信平台,点击“公众号设置”。2 点击“功能设置”,然后点击“设置”。3 设置JS接口安全域名。这里填写的是一级域名,不带www和http。最多可以设置三个域名。设置完后点击确定。(多说一句,相比以前的分享没有...

如何使用微信JS-SDK实际分享功能

登录你的微信平台,点击“公众号设置”。2 点击“功能设置”,然后点击“设置”。3 设置JS接口安全域名。这里填写的是一级域名,不带www和http。最多可以设置三个域名。设置完后点击确定。(多说一句,相比以前的分享没有...

如何使用微信JS-SDK实际分享功能

登录你的微信平台,点击“公众号设置”点击“功能设置”,然后点击“设置”。设置JS接口安全域名。这里填写的是一级域名,不带www和http。最多可以设置三个域名。设置完后点击确定。在开发者中心中获取你的AppID和AppSecret,...

微信公众号开发之如何使用JSSDK

服务号、订阅号可以通过登录 微信公众平台 查看 开发&gt;接口权限 使用JSSDK主要包括 1、判断当前客户端版本是否支持指定JS接口、 2、分享接口(微信认证) 3、图像接口 4、音频接口 5、智能接口(识别语音并...

如何使用微信JS-SDK实际分享功能

你好,//通过config接口注入权限验证配置wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

Top