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 相关文章推荐
jQuery设置和获取HTML、文本和值示例
Jul 08 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 Javascript
jQuery模拟窗口抖动效果
Mar 15 Javascript
利用require.js与angular搭建spa应用的方法实例
Jul 19 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 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
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
php知道与问问的采集插件代码
2010/10/12 PHP
CI框架中zip类应用示例
2014/06/17 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
JavaScript中的null和undefined解析
2012/04/14 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
代码实例ajax实现点击加载更多数据图片
2018/10/12 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
从零学Python之入门(二)基本数据类型
2014/05/25 Python
介绍Python中几个常用的类方法
2015/04/08 Python
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
python实现C4.5决策树算法
2018/08/29 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
Python检测数据类型的方法总结
2019/05/20 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
澳大利亚运动鞋零售商:The Athlete’s Foot
2018/11/04 全球购物
Intersport西班牙:在线体育商店
2019/11/06 全球购物
维稳工作承诺书
2015/01/20 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
golang 接口嵌套实现复用的操作
2021/04/29 Golang
Python实现列表拼接和去重的三种方式
2021/07/02 Python
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫