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 相关文章推荐
prettify 代码高亮着色器google出品
Dec 28 Javascript
js面向对象 多种创建对象方法小结
May 21 Javascript
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
Javascript中判断变量是数组还是对象(array还是object)
Aug 14 Javascript
js监听鼠标事件控制textarea输入字符串的个数
Sep 29 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
浅谈JS继承_寄生式继承 & 寄生组合式继承
Aug 16 Javascript
JS实现太极旋转思路分析
Dec 09 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 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
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
PHP和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
php类自动加载器实现方法
2015/07/28 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
javascript alert乱码的解决方法
2013/11/05 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
nodejs中使用archive压缩文件的实现代码
2019/11/26 NodeJs
Python实现八大排序算法
2016/08/13 Python
python解决js文件utf-8编码乱码问题(推荐)
2018/05/02 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
pandas如何处理缺失值
2019/07/31 Python
在django模板中实现超链接配置
2019/08/21 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
Django权限控制的使用
2021/01/07 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
细说CSS3中的选择符
2008/10/17 HTML / CSS
见习报告格式要求
2014/11/04 职场文书
骨干教师事迹材料
2014/12/17 职场文书
优秀班集体申报材料
2014/12/25 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers