小白实现H5微信分享

详见官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

准备：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 备注：登录后可在“开发者中心”查看对应的接口权限。

前端

1、引入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）。

2、通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。 注：该部分信息应从后台进行返回

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

3、通过ready接口处理成功验证

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

4、通过error接口处理失败验证

wx.error(function(res){ // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。 });

前端代码

params = params.data; // params代表着从后台所获取到的配置信息 wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: params.appId, // 必填，公众号的唯一标识 timestamp: params.timeStamp, // 必填，生成签名的时间戳 nonceStr: params.nonceStr, // 必填，生成签名的随机串 signature: params.signature,// 必填，签名 jsApiList: ['updateAppMessageShareData', "updateTimelineShareData"] // 必填，需要使用的JS接口列表 }) wx.ready(function(){ // TODO wx.updateAppMessageShareData({ title, // 分享标题 desc, // 分享描述 link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: image, // 分享图标 success: function (d) { // 设置成功 callback&&callback(d); } }) wx.updateTimelineShareData({ title, // 分享标题 link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: image, // 分享图标 success: function (d) { // 设置成功 callback&&callback(d); } }) }) wx.error(function(res){ // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。 uni.showToast({ title: "微信验证失败", icon: 'none' }); });

后端

1、获取demo

在官网上下载jssdk demo DEMO页面： https://www.weixinsxy.com/jssdk/ 示例代码：http://demo.open.weixin.qq.com/jssdk/sample.zip

本文以PHP作为示例 将代码中的JSSDK.php移到项目适合的路径中，并将其余文件移入到方便读取的文件夹，然后修改JSSDK.php中的getJsApiTicket和getAccessToken中的读取路径（若所有文件在同一个文件夹则无需修改）

2、传入分享链接

JSSDK.php -> getSignPackage 该方法中的$url即是我们所需要分享的链接，在这里改为所传入的参数

后端代码

public function getSignPackage($url) { $jsapiTicket = $this->getJsApiTicket(); $timestamp = time(); $nonceStr = $this->createNonceStr(); // 这里参数的顺序要按照 key 值 ASCII 码升序排序 $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url"; $signature = sha1($string); $signPackage = array( "appId" => $this->appId, "nonceStr" => $nonceStr, "timeStamp" => $timestamp, "url" => $url, "signature" => $signature, // "rawString" => $string ); return $signPackage; } private function getJsApiTicket() { // jsapi_ticket 应该全局存储与更新，以下代码以写入到文件中做示例 $data = json_decode(file_get_contents('jsapi_ticket.txt'));// 该地方因为修改文件格式，故直接使用file_get_contents if ($data->expire_time < time()) { $accessToken = $this->getAccessToken(); // 如果是企业号用以下 URL 获取 ticket // $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken"; $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken"; $res = json_decode($this->httpGet($url)); $ticket = $res->ticket; if ($ticket) { $data->expire_time = time() + 7000; $data->jsapi_ticket = $ticket; file_put_contents('jsapi_ticket.txt', json_encode($data)); } } else { $ticket = $data->jsapi_ticket; } return $ticket; } private function getAccessToken() { // access_token 应该全局存储与更新，以下代码以写入到文件中做示例 $data = json_decode(file_get_contents('jsapi_ticket.txt')); if ($data->expire_time < time()) { // 如果是企业号用以下URL获取access_token // $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret"; $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret"; $res = json_decode($this->httpGet($url)); $access_token = $res->access_token; if ($access_token) { $data->expire_time = time() + 7000; $data->access_token = $access_token; file_put_contents('access_token.txt', json_encode($data)); } } else { $access_token = $data->access_token; } return $access_token; } /** * 获取分享 */ public function getShare($appId, $appSecret, $url) { $jssdk = new Jssdk($appId, $appSecret); return $jssdk->getSignPackage($url); }

注：获取access_token时一定要在开放平台/公众平台（具体哪一个忘记了）上添加IP白名单，不然会报非法IP的错误

总结

综上就是最简单的H5微信分享流程，这是本人第一次对接微信接口，如果有哪里不对的地方，希望各位大佬指教指教，嘻嘻^^-^