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

一:需求

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

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

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

图四:不让开发哥哥来折腾的网页,分享的效果(没有自定义图片,不能能自定义标题和描述文字)

二:需求明确,进入开发

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

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我哟。

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180518G1W08P00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券