vue用微信JS-SDK实现分享功能

最近我们开发了一个项目，把H5页面嵌入微信官方账号，用vue搭建。由于业务需求，需要实现微信自定义分享功能，所以在项目中集成了微信JS-SDK。微信JS-SDK是微信公众平台为网页开发者提供的基于微信的网页开发工具包。通过使用微信JS-SDK，网页开发者可以高效利用手机系统的拍照、选图、语音、定位等功能，直接使用微信独有的分享、扫描、卡券、支付等功能，为微信用户提供更好的网页体验。

1.绑定域名

微信微信官方账号开发测试账号：http://mp.weixin.qq.com/debug.需要填写接口配置，一个可由公网访问的域名，建议使用natapp/Routing Man。填写JS接口安全域名，设置好JS接口安全域后，开发者可以通过关注测试号，调用域名下微信的开放JS接口。请阅读微信JSSDK的开发文档

1)这里，路由器用于实现内网穿透http://www.luyouxia.com/,下载安装后，配置对应的内网映射地址

2)设置JS接口安全域

2.介绍JS文件

通过npm安装微信的js-sdk，或者直接在index.html页面添加脚本标签参考，这里是npm安装的。

npm安装微信-js-sdk

引入需要共享的页面

从' weixin-js-sdk '导入wx

js-sdk权威签名算法的3.java实现

1)jsapi_ticket

在生成签名之前，您必须了解jsapi_ticket。jsapi_ticket是微信官方账号用来调用微信JS接口的临时票证。一般情况下，jsapi_ticket的有效期为7200秒，通过access_token获取。由于获取jsapi_ticket的api调用次数非常有限，频繁刷新jsapi_ticket会导致api调用受限，影响自己的业务。开发人员必须在自己的服务中全局缓存jsapi_ticket。

2)获取access_token(有效期为7200秒，开发人员必须在自己的服务中全局缓存access_token)

Access_token是微信官方账号的全局唯一接口调用凭证。微信官方账号在调用各个界面时需要使用access_token。正式文件：

https://mp.weixin.qq.com/wiki.

@RequestMapping(值='/get_access_token '，方法=RequestMethod。GET)public String getassestoken(){ String URL=' https://API . weixin . QQ.com/CGI-bin/token '；string str=HttpClientTutil . SendGet(URL，' grant_type=' Constants。GRANTYPE“secret=”常量。APPSECRET 'appid='常量。APPID)；JSON object JSON object=JSON object . from object(str)；返回JSonobject . ToString()；}3)获取access_token后，通过http GET请求获取jsapi_ticket

@RequestMapping(值='/get_ticket '，方法=RequestMethod。GET)public String getTicket(){ String URL token=' https://API . weixin . QQ.com/CGI-bin/token '；string TokenObj=HttpClientTutil . SendGet(URl Token，‘grant _ type=’常量。GRANTYPE“secret=”常量。APPSECRET 'appid='常量。APPID)；JSON object jsonToken=JSON object . from object(token obj)；string access _ token=JSontoken . GetString(' access _ token ')；string URl ticket=' https://API . weixin . QQ.com/CGI-bin/ticket/getticket '；string STarticket=HttpClientTutil . SendGet(URl ticket，' type=jsapi ' ' access _ token=' access _ token ')；JSON object JSON tcket=JSON object . from object(Starticket)；返回jsonticket . tostring()；}4)签名算法

签名生成规则如下：参与签名的字段包括noncestr(随机字符串)、有效jsapi_ticket、时间戳、url(当前网页的URL，不包括#及其以下部分)。所有需要签名的参数按照字段名的ASCII码(字典顺序)从小到大排序，然后利用URL键值对的格式(即key 1=value 1k key 2=value 2…)拼接成字符串string1。需要注意的是，所有参数名称都是小写字符。Sha1加密在string1上执行，原始值用于字段名和字段值，不执行URL转义。

//张伯伦医生@ requestmapping(值='/get _ signature '，方法=RequestMethod).GET)公共映射字符串，string getsignature(字符串URL){映射字符串，String ret=new HashMapString，String()；string wx ticket=getwx API ticket()；字符串nonce _ str=create _ nonce _ str()；时间戳字符串=create_timestamp():字符串字串；字符串签名=';//范思哲范思哲范思哲，-什么str=' jsapi _ ticket=' wx ticket ' nonce _ str ' timestamp=' timestamp ' URL=' URL；记录器。信息(字符串)；尝试{消息摘要crypt=消息摘要。getinstance(' sha-1 ')；crypt.reset():crypt。更新(字符串。get bytes(' utf-8 ')；签名=bytetohex(crypt。digest())；} catch(nosuchcalgorithm异常e){ e . print stack trace()；} catch(unsupportdenodegeexception e){ e . print stack trace()；} ret.put('url '，URL)；ret.put('jsapi_ticket '，wx ticket)；S7-1200可编程控制器：ret.put('timestamp '，timestamp)；ret.put('签名，签名);ret.put('appId，常量)。应用编号返回后悔；}嘿嘿嘿嘿嘿嘿嘿

{ '签名： ' 4021 b3f 502 e 6bd 15798 a 0433 af 33 C4 ef1 be 4ff 83 '，' appId':'wx618f45e4948c3889 '，' jsapi _ ticket ' 3360 ' sm 4 aovdwfpe 4 dxk xges 8 voxnowlkg 3q 1 qp 1 pwa 8 mbingkcewidu 8 emlnx 8 Fe 0 zh-rgs 03 nu 8 bq吴登盛

1.唉哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼九条街你好时间戳-什么wx.config绿筠九条街你好时间戳阿金。

2.唉哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼网址(网址)周亚庆联署材料范仲淹又来了网址.

3.李亚男，李亚男，李亚男，李亚男，李亚男，李亚男，李亚男，李亚男，李亚男，李亚男，李亚男，李亚男，李亚男，李亚男，李亚男，李亚男，李亚男，-你好-你好。

4.阿久配置(配置)韩升洙韩升平韩升平韩升平韩升平韩升平韩升平韩升平韩升平韩升平韩升平韩升平韩升平韩升平韩升平韩升平韩升平韩升平

亚文亚文阿文阿文阿文阿文阿文阿文阿文阿文阿文阿文阿文阿文阿文阿文阿文阿文阿文阿文阿文阿文阿文js SDK(js SDK)不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，吴亚玲吴亚玲（哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟网址绿筠小姐，哥哥哥哥哥哥网址什么事水疗中心什么事网应用程序唉哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟网址嗨嗨嗨嗨嗨嗨嗨，阿胜安卓系统范仲淹呢穿上衣服什么事H5型乔金（签名),拜仁拜仁拜仁穿上衣服范仲景（电影)网络应用程序阿云阿云阿云阿云阿云阿云，绿筠小姐Android6.2尤高页：1。

wx.config({ debug: true，//胡志明（音译),沙吾提空气污染指数云娥预警李亚国，范仲淹，范仲淹，阿巧个人电脑阿成，哎哎哎哎哎哎日志(日志)阿祖曰，云娥个人电脑吴登盛（音译).appId: ' '，//苏慕恩，朱庇特朱庇特朱庇特时间戳3330,//苏慕恩，你好你好noncestr : ' '，//苏慕恩，-你好-你好3330 ' '、//苏慕恩，你好jsApiList: [] //苏慕恩，吴亚玲！吴亚玲联署材料阿胜});配置(配置)朱塞佩鲁塞姆鲁塞姆appid、时间戳、nonceStr、签名吉卜赛人吉卜赛人吉卜赛人吉卜赛人吉卜赛人吉卜赛人吉卜赛人吉卜赛人吉卜赛人吉卜赛人吉卜赛人吉卜赛人吉卜赛人吉卜赛人吉卜赛人吉卜赛人吉卜赛人吉卜赛人吉卜赛人，嗨！嗨！嗨axios(公理)唉哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟

this . axios . get('/wx/get _ signature？URL=' encodeuricomponent(location . href . split(' # ')[0])。然后((RES)={ wx . config({ debug 3360 true，//开启调试模式appid3360res.data.appid，//必选，微信官方账号唯一标识timestamp : RES . data . timestamp，//必选，生成签名的时间戳non crest : RES . data . non crest，//必选，生成签名的随机字符串signature : RES . data . signature，//必选。签署jsapi列表：[' updateappmessagesharedata '，//自定义“共享给好友”和“共享给QQ”按钮的共享内容' updateTimelineShareData '。//自定义“分享到朋友圈”和“分享到QQ空间”按钮的分享内容‘on menusharewibo’，//获取“分享到腾讯微博”按钮的点击状态，自定义分享内容界面]//必选，待用JS界面列表})})。catch((错误)={console.log(错误)})；//通过ready接口处理成功验证了wx . ready(function(){ this . wxsharetime())；this . wxsharappmessage()；ready方法将在验证配置信息后执行。所有的接口调用都必须在config接口得到结果之后进行。config是客户端的异步操作。因此，如果在加载页面时需要调用相关接口，则必须在ready函数中调用相关接口，以确保正确执行。对于只在用户触发时调用的接口，可以直接调用，不需要放在ready函数中。});wx . error(function(RES){//config information验证失败，将执行错误函数。如果由于签名过期而导致验证失败，则可以在Config的调试模式下或在返回的RES参数中查看特定的错误信息。对于SPA，签名可以在这里更新。});5.实现自定义分享好友/朋友圈

wxsharedtimeline(){//自定义“分享给好友”和“分享给QQ”按钮的分享内容wx . updateappmessagesharedata({ title : '世界那么大，我想看-微信测试'，//分享title desc: '世界那么大，我想看-微信测试'，//分享描述link : location . href . split(' # ')[0]，//分享链接，链接的域名或路径必须与微信一致IMgurl: ' http://www.baidu.com/fpehdoqbzm8ezgfz3ulbyxatsach',//share图标成功： ()={} })}，wxsharappmessage(){//自定义“分享到朋友圈”和“分享到QQ空间”按钮的分享内容wx . updatetimelinesharedata({ title : '世界那么大，我想看看-微信test2 '，//分享title desc: '世界那么大，我想看看-微信test2 '，//分享描述链接：位置链接的域名或路径必须与当前页面微信官方账号中对应的JS安全域名一致。Imgurl3360Require('。/logo.jpg ')。//共享图标(不能分配相对路径，必须是绝对路径)成功：()={ } })}

6.遇到问题

1)无效签名

获取的签名有误，可能是微信官方账号平台配置有问题，或者后台返回签名界面的算法有问题

2)无效的url域

当前页面的域名没有绑定到使用的appid。请确保正确填写绑定域名。只支持80(http)和443(https)端口，无需填写端口号。

3)不显示用户定义的缩略图

因为路径错误，不能用相对路径，必须是绝对路径。另一个原因是图片的大小和类型。建议使用jpg格式

4)二次共享导致调用自定义接口失败

url编码后发送到后台获取签名，这样计算就不会出错，因为微信会在共享链接后添加来自=singlemessageisappinginstalled=0的字符串。

7.微信官方账号访问_token和jsapi_ticket的全局缓存

1)通过数据库保存

方法是在获取access_token时，将当前系统时间和access_token保存在数据表中，再次获取时，查询上次获取的时间，并与当前系统时间进行比较，看时间是否超过2小时(7200s)。如果超过此时间限制，请获取另一个access_token，然后更新数据表的accessToken和getTime。

2)创建txt文件并通过物理磁盘保存

3)通过servlet启动线程，让线程定期执行采集

你可以参考https://blog.csdn.net/guobinh.

以上是调用微信js-sdk的总结。想了解更多，可以看看微信JS-SDK的https://mp.weixin.qq.com/wiki.

摘要

上面提到的是边肖给大家介绍的vue使用微信JS-SDK实现分享功能，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！