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 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
vue插槽slot的理解和使用方法
Apr 03 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 Javascript
JS实现放大镜效果
Sep 21 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
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
PHP赋值的内部是如何跑的详解
2019/01/13 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
再谈Yii Framework框架中的事件event原理与应用
2020/04/07 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
jQuery列表拖动排列具体实现
2013/11/04 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
jquery简单实现外部链接用新窗口打开的方法
2015/05/30 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
2016/01/31 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
2016/03/04 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
JavaScript基础之流程控制语句的用法
2017/08/31 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
2018/10/29 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
Python读写ini文件的方法
2015/05/28 Python
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
Python cookbook(数据结构与算法)从任意长度的可迭代对象中分解元素操作示例
2018/02/13 Python
详解Python with/as使用说明
2018/12/13 Python
Python编写打字训练小程序
2019/09/26 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
师范大学生求职信
2014/06/13 职场文书
竞选大队干部演讲稿
2014/09/11 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
解除劳动合同证明书
2014/09/26 职场文书