详见官方文档：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(){// TODOwx.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&timestamp=$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_contentsif ($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微信分享流程，这是本人第一次对接微信接口，如果有哪里不对的地方，希望各位大佬指教指教，嘻嘻^^-^