Vue单页式应用(Hash模式下)实现微信分享的实例

本文介绍了Vue单页式应用(Hash模式下)实现微信分享的实例，分享给大家，具体如下：

前端微信分享的基本步骤：

一.绑定域名：

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。这个不多说，微信开发的都应该清楚。

二.引入js文件：

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js。

请注意，如果你的页面启用了https，务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ，否则将无法在iOS9.0以上系统中成功使用JSSDK。

这里我采用了https，而且我用Vue-cli生成的项目，因此我将文件直接在index.html中引入。

三.通过config接口注入权限验证配置：

在下面会有实例说明，这里我只想说，接口可以放在自己写的AJAX回调用，将成功回调的值直接传入到wx.config需要的参数中。

四.通过ready接口处理成功验证

文档中说：“ config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。”

个人认为，这个可能是针对APP的，我的项目是微信的H5功能页面，如果想分享的话只能从右上角的“三个点点”中直接分享。（这仅是小生的个人想法，还望有学识有智谋的您给出确切的答案）。

五.通过error接口处理失败验证：这个我只是写到了项目中，不多做说明。

其他的文档中写的很清楚，聪明的你可能不需要我更多的解释。微信API给的还算详细，很多地方直接调用就可以。只是对于初次使用的人来说，放到自己的环境中会有些许小坑很难发现，导致浪费很多时间，但解决后发现并不难处理。以下是我开发时的部分笔记，如有不足还望各位观众老爷多多提点：

1.触及某个页面分享时，需要得到当前该页面的Url，用来传给后台。换取config中的参数。

2.页面分享出去的窗口中对应着一个接口，该接口中包含一个Url，这个Url是分享者希望分享出去的页面链接。在这个Url中可以拼加自己需要的参数，实现分享的追踪。

如：var shareUrl = 'https://show.mypro.com/#/product_details?userId=' + userId + '&level=' + level;这个shareUrl可以直接传到街口的参数中。

3.分享页面的JS中必须配置有config，在config中有一个jsApiList，在其中放置需要使用的JS接口列表，并以字符串的形式写入。

4.在config下方，有一个ready方法，该方法用来初始化我们要应用的js列表，而且任何方法一定要放在config方法后才可以。

如在Vue中，可以将该方法放在mounted中，并在其中放入‘分享给朋友'，‘分享至朋友圈'的js接口。

值得注意的是：两个接口并不是写在触发事件的方法中(如@click='Fun')，而是直接在页面初始化的时候，放在ready中直接被调用。

以上部分代码放在Vue的mounted中，当页面组件生成的时候直接被调用。

5.坑点

个人认为比较坑的点（1）：因为我的项目为单页式应用，并且采用了Vue中的hash模式，因此项目路径中带有#号的部分，微信可能会在其前面加一个？号（不知未来还会不会有变化）。这样当自己拼值时（如“？userId=123”）则需要取第二个问号后的值。之前无论如何都取不到自己拼在路径后的值，复制链接后才发现，微信默默地给加了一个问号和其他参数在其中。

个人认为比较坑的点（2）：我的项目中，如果在公众号中浏览各个界面，直接都是通过路由进行跳转的。但当浏览者从分享窗口进入后，他从分享页按着正常路由跳转到其他页面，其他页面的逻辑中如果有需要获取当前页面url的需要，会发现这个url和正常路由跳转的不一样。

例如：

这是正常跳转后的路径：https://show.mypro.com/#/firPage?userId=1

这是从分享页跳转后的路径：https://show.mypro.com/?#/firPage?userId=1

非常明显，如果根据问号的索引去获取当前Id，我永远获取不到。不知是否和坑（1）中同一个原因，因此我独立写了出来。因为是第一次做这个地方的东西，而且只能在移动端环境，我测了很多遍才发现。得知真相的我宛如醍（bei）醐（gou）灌（ri）顶（le）。可能是我经验太少，才如此踩坑。

6.后续坑点补充：

(1) 微信分享中：只要是分享出去的页面，如果为hash模式（在路由中带有#号），微信都会在#的前边给加一个‘？'。虽然微信API中有说过关于#的问题。但是很容易单纯的认为，仅仅在需要分享的页面的url会被修改，这也是我疏忽的一个地方。

(2) 苹果和iPhone打架后，我的微信功能页也莫名其妙的受到了影响，虽然我的公众号没有涉及到打赏的功能。具体问题如下：

我的分享shareUrl为：