关于用vue做自定义微信分享样式的问题

需求

为客户做微信公众号的内容，客户要求分享页面的时候能显示自己的缩略图，标题与内容。

微信默认分享的样式一般是： 标题，内容， 缩略图。一般如果没有自定义分享样式的话，微信会选取页面title作为标题，页面的链接作为内容。这样使得分享样式很不友好。因此我们想在分享的时候增加自己的标识，自己的内容与图标。这样不仅样式好看，而且增加自己公众号的知名度。

准备工作

参考学习链接（微信官方的开放开发文档）：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

经过借鉴上面的微信开发文档，得知大致的解决方法：调用微信的JS-SDK实现自定义微信分享的效果，但是调用过程有些繁琐。要求也比较严格。

前提：1.要有个通过实名认证的微信服务号一个。 2.一个ICP备案的域名。 3.通过AppId和AppSecret请求accessToken,然后通过accessToken获取jsapi_ticket，生成config接口所需参数（timestamp， nonceStr， signature）（这些都是后台获取的，具体如何获取的这里不多说，本文章重点简述前端工作部分）。

以上前端调用的微信wx.config API所需的参数都获取好之后，就可以开始我们前端的工作了。

具体描述

1.引入js文件 

vue： 1.安装 install  weixin-js-sdk -dev  2. 在main.js中引入 import wx from 'weixin-js-sdk' . （如若不使用vue开发项目，可引入：

2. 在main.js中编写函数wxShare ,  首先通过请求后台数据获取到（appId, timestamp， nonceStr， signature), 然后调用wx.config接口查看是否连接成功。 具体代码如下：

在子页面中可通过：this.wxShare({title: '您想要展示的标题’, desc: ‘您想要展示的内容', link: ‘当前页面的url’, imgUrl: ‘您想要展示的缩略图地址' , success: function(){success } });

总结注意

1. 在以上代码中调试的时候把，config中的debug设置为true, 这样你在调试的时候，如果出错或者成功，页面会弹窗提示，很方便。

2. 其中在向后台获取config接口所需的参数的时候，需要向后台传递一个url参数（上述的wx_name为我们项目所需，您可以不传），其中url必须要与当前的页面的url一致（链接#后面的不要）。 如果不一致，页面会跳出 signature无效

3. undroid 和 ios 有时候会不一样，例如在您刚进入页面www.text.cc的时候，调用wx.config接口是对的，然后你跳转到www.text.cc/pages就会提示，signature无效。如果您刷新页面，会发现此问题就不存在了。这是由于 ios在使用路由跳转的时候url总是第一次进入页面的url， 因此此时您传递到后台的url与当前页面不一致。 所以我们采用 url: Vue.prototype._isIos() ? Vue.prototype.g_first_url : url, 通过Vue.prototype._isIos() 函数判断当前系统类型， 如果是ios ，我们则传递Vue.prototype.g_first_url（第一次进入时的url ） 给后台，若是undroid 就传递url 。 其中：Vue.prototype.g_first_url = window.location.href.split('#')[0].toString();

以上就是全部内容，写出来是为了大家一起学习，如有不足，请补充。万分感谢！