关于用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();

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

你可能感兴趣的:(关于用vue做自定义微信分享样式的问题)