小白实现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&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_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微信分享流程，这是本人第一次对接微信接口，如果有哪里不对的地方，希望各位大佬指教指教，嘻嘻^^-^