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


Posted in Javascript onJuly 21, 2017

本文介绍了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接口列表,并以字符串的形式写入。

//接口入住权限验证配置
wx.config({ 
   debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

   appId: appId, // 必填,公众号的唯一标识 
   timestamp: timestamp, // 必填,生成签名的时间戳 
   nonceStr: nonceStr, // 必填,生成签名的随机串 
   signature: signature, // 必填,签名,见附录1 
   jsApiList: [
     'onMenuShareTimeline',
     'onMenuShareAppMessage'
  ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

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

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

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

wx.ready(function() {
  wx.onMenuShareAppMessage({
    title: shareTitle, // 分享标题
    desc: 'This is a test!', // 分享描述
    link: shareUrl, // 分享链接
    imgUrl: imgUrl, // 分享图标
    type: '', // 分享类型,music、video或link,不填默认为link
    dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
    success: function() {
      // 用户确认分享后执行的回调函数
    },
    cancel: function() {
      // 用户取消分享后执行的回调函数
    }
  });
  wx.onMenuShareTimeline({
    title: shareTitle, // 分享标题
    link: shareUrl,
    imgUrl: imgUrl, // 分享图标
    success: function() {
      // 用户确认分享后执行的回调函数
    },
    cancel: function() {
      // 用户取消分享后执行的回调函数
    }
  });
});

以上部分代码放在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为:

var shareUrl = 'https://migxin.mypro.com/#/product_details?custId=null&shareCustId=' + custId + '&shareProductId=' + productId;

通过安卓分享出去的页面可以成功获取页面url后的值,并且成功显示页面。url如下:

https://migxin.mypro.com/#/product_details?custId=7&shareCustId=7&shareProductId=1223

但是在iphone中,页面URl后的值被截取掉了,页面因为无法获取值而无法显示。url如下:

https://migxin.mypro.com/?from=timeline#/product_details

可以看到微信把我的#前给加了东西,并且截取掉了我?后边拼接的值。这个问题依然存在,也希望有这方面经验的大神可以留下您宝贵的建议或者解决办法。

这对这个问题我目前用了个很牵强的处理办法:把shareUrl换成一个ajax请求,打开时直接像后台发请求,然后返回给我一个他那边拼的页面url我来进行解析,这样我就可以从这个url中解析值了。

7.有关微信公众号的关注页面:

目前我们不用自己去做公众号的关注页面,进入公众号,查看历史消息,在该页面会提供进入公众号的接口按钮。在这个页面中,按钮的状态为“进入公众号”,“关注”。可以自行判断当前用户是否已经关注公众号。该页面的链接也是直接可以复制得到的,对于迭代期比较紧张的情况 will do the trick~可以直接拿来使用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
jquery中文乱码的多种解决方法
Jun 21 Javascript
javascript学习笔记(六)数据类型和JSON格式
Oct 08 Javascript
深入探究使JavaScript动画流畅的一些方法
Jun 30 Javascript
浅析Bootstrap验证控件的使用
Jun 23 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
jquery css实现邮箱自动补全
Nov 14 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
May 07 Javascript
node创建Vue项目步骤详解
Mar 06 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
Aug 25 Javascript
vue-resource调用promise取数据方式详解
Jul 21 #Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 #Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
Jul 21 #Javascript
es7学习教程之Decorators(修饰器)详解
Jul 21 #Javascript
VUE中使用Vue-resource完成交互
Jul 21 #Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 #Javascript
js图片轮播插件的封装
Jul 21 #Javascript
You might like
PHP4中实现动态代理
2006/10/09 PHP
php curl获取网页内容(IPV6下超时)的解决办法
2013/07/16 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
php数组生成html下拉列表的方法
2015/07/20 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
2012/02/27 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
node.js中的fs.ftruncate方法使用说明
2014/12/15 Javascript
javascript数组排序汇总
2015/07/07 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
laydate.js日期时间选择插件
2017/01/04 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
Python中replace方法实例分析
2014/08/20 Python
不可错过的十本Python好书
2017/07/06 Python
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
Python装饰器原理与简单用法实例分析
2018/04/29 Python
pycharm安装和首次使用教程
2018/08/27 Python
Tensorflow 定义变量,函数,数值计算等名字的更新方式
2020/02/10 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
html svg生成环形进度条的实现方法
2019/09/23 HTML / CSS
荷兰睡眠专家:Beter Bed
2020/11/23 全球购物
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
新锐科技Java程序员面试题
2016/07/25 面试题
九年级英语教学反思
2014/01/31 职场文书
物理研修随笔感言
2014/02/14 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
绿色环保口号
2014/06/12 职场文书
公司股东出资证明书
2014/11/01 职场文书
python编写函数注意事项总结
2021/03/29 Python
扩展多台相同的Web服务器
2021/04/01 Servers