罗竞旭-手把手教你实现-微信分享自定义内容及缩略图……

一：需求

最近在做一个响应式的网站项目，有个需求是，用户使用微信扫描网页的二维码，在微信里打开网站，然后点击手机右上角分享到朋友或者朋友圈等，使用自定义标题，描述及图片缩略图。说这么多，还是配上图，好理解点。

如图一：使用微信扫描网页上二维码，在微信上打开该网页

图三：分享到朋友圈，实现自定义分享的标题，及缩略图片

图四：不让开发哥哥来折腾的网页，分享的效果（没有自定义图片，不能能自定义标题和描述文字）

二：需求明确，进入开发

既然知道了具体需求，我们先来看看，要实现这个需求。看看微信分享需要有哪些前提条件：

1.你得有个微信公众号，重点是：你的公众号得通过微信认证（只有认证的微信公众号，才有自定义分享内容的权限）

这个条件达不到的话，不用往下看了。

（o(￣ヘ￣o＃)，我知道，好学的你，即使没有认证的公众号，也会继续往下看......）

好了，废话不多说，下面跟着我一步一步走上搬砖巅峰吧，呸，是走上人生巅峰......

三：前端开发代码逻辑

假设，现有一个index.html的网页，代码结构如下图：

如上图，就是前端同学需要写的代码量，没多少东西，是吧，很简单，是吧。注意点有如下几点：

四：后端开发代码逻辑

我们先来看看，前端需要的参数是什么，根据wx.config()代码，我们知道，前端需要参数为：

1.appid，这个是公众号自带有的，可以我们后台返回给前端，也可以让前端自己填上。

2.timestamp，时间戳，

3.nonceStr，随机字符串

4.signature，签名，由ticket（后边讲），时间戳，随机字符串，分享页面url通过排序，然后sha算法加密HEX签名而得

好了，既然知道需要返回这些参数给前端，我们来一个一个的设置。

首先，生成时间戳（生成时间戳方法）：

createTimestamp() {

return parseInt(new Date().getTime() / 1000);

};

接着，生成随机字符串方法：

createNonceStr() {

return Math.random().toString(36).substr(2, 15);

};

下面，来到重点的signature参数了。上面已经说，这个参数需要多个值来进行sha加密签名的，其中需要的值中，重要的一个是：jsapi_ticket，这个需要调用微信对外接口，才能获取。而要调用这个jsapi_ticket微信接口，需要一个微信token，所以要想获取jsapi_ticket，我们得先拿到access_token。所以，他们之间的关系是：

3.通过拿到jsapi_ticket，进行签名，得到signature参数，返回给前端

好了，到这里。需要的东西，我们都拿到了。接下来就是用拿到的jsapi_ticket进行签名，即可。

signature签名方法：

到此为止，所有的主要的步骤，都差不多了。接下来，还需要有两个地方需要配置：

IP白名单，

js安全域名

js安全域名，就是微信会访问你的服务器一个特定的路由，你返回其指定的东西。这样，整个微信分享才算真正的大功告成.

添加js安全域名之前，得按要求，实现下面这个，才能在上面添加域名成功（你网站的域名）

解析：意思是，你的网站，存在这个路由，你网站域名/MP_xxxx.txt，返回其对应的字符即可。只有你的网站加了这个路由，微信能正常访问的到，那你现在就可以添加你的域名了，否则，你添加域名的时候会报错。

彩蛋：

你能看到最后，证明是好学的（相信你不是直接滑到最后）。虽然只有通过微信认证的公众号，才能使用微信自定义分享功能，但是，我们这些个人开发者，怎么办，我就是只想测试下，掌握下该技能。不用怕，使用微信提供的测试账号即可。

如果你在开发时，遇到什么问题，可以M我哟。