在使用vue和vue-router路由框架已经开发过好几个项目了,其中也遇到不少坑,有些坑各种搜也没有找到非常理想的答案。

vue学习相对来说还是比较简单,官方文档说明非常清楚(https://cn.vuejs.org/v2/guide/),多做一些Demo就可以熟练上手了,并且现在也有好多框架(vuex,MintUI,Element,iView等),根据项目需要自行学则,因此本人也就没有怎么写过关于vue这方面的文章。

这次主要是把自己在微信中分享遇到的问题分享一下,Android机器中分享不会存在问题,主要是IOS分享各种签名,标题、内容、图片不改变问题。

1.微信分享当然要引入微信JS-SDK

  微信JS-SDK说明文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

  分享页面引入:http://res.wx.qq.com/open/js/jweixin-1.2.0.js

  vue框架可以使用:https://github.com/yanxi-me/weixin-js-sdk   命令:npm install weixin-js-sdk

  2.封装一下微信分享的功能,如下:

 import wx from 'weixin-js-sdk';
import apiUrl from "@/config/apiUrl.js";
export default {
wxChat : ($vue, param) => {
let appId = "";
let timestamp="";
let nonceStr = "";
let signature = "";
let options = {
title: "",
desc: "",
link: "",
imgUrl: "",
type: "link",
dataUrl: "",
localUrl: ""
};
options = Object.assign({}, options, param);
//
$vue.$httpPost(apiUrl.weChatShare, {shareLink: options.localUrl}).then((res) => {
if(res.data&&res.data.status==="1000") {
wx.config({
debug: false,
appId: res.data.appId, // 和获取Ticke的必须一样------必填,公众号的唯一标识
timestamp: res.data.timestamp, // 必填,生成签名的时间戳
nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
signature: res.data.signature, // 必填,签名
jsApiList: [
'onMenuShareAppMessage', 'onMenuShareTimeline',
'onMenuShareQQ', 'onMenuShareQZone'
]
});
//处理验证失败的信息
wx.error(function (res) {
console.log('验证失败返回的信息:', res);
});
//处理验证成功的信息
wx.ready(function () {
//分享到朋友圈
wx.onMenuShareTimeline({
title: options.title, // 分享标题
link: options.link, // 分享链接
imgUrl: options.imgUrl, // 分享图标
success: function (res) {
// 用户确认分享后执行的回调函数
console.log("分享到朋友圈成功返回的信息为:", res);
showMsg("分享成功!");
},
cancel: function (res) {
// 用户取消分享后执行的回调函数
console.log("取消分享到朋友圈返回的信息为:", res);
}
});
//分享给朋友
wx.onMenuShareAppMessage({
title: options.title,
desc: options.desc,
link: options.link,
imgUrl: options.imgUrl,
type: options.type, // 分享类型,music、video或link,不填默认为link
dataUrl: options.dataUrl, // 如果type是music或video,则要提供数据链接,默认为空
success: function (res) {
// 用户确认分享后执行的回调函数
console.log("分享给朋友成功返回的信息为:", res);
showMsg(JSON.stringify(options));
},
cancel: function (res) {
// 用户取消分享后执行的回调函数
console.log("取消分享给朋友返回的信息为:", res);
}
});
//分享到QQ
wx.onMenuShareQQ({
title: options.title,
desc: options.desc,
link: options.link,
imgUrl: options.imgUrl,
success: function (res) {
// 用户确认分享后执行的回调函数
console.log("分享到QQ好友成功返回的信息为:", res);
},
cancel: function (res) {
// 用户取消分享后执行的回调函数
console.log("取消分享给QQ好友返回的信息为:", res);
}
});
//分享到QQ空间
wx.onMenuShareQZone({
title: options.title,
desc: options.desc,
link: options.link,
imgUrl: options.imgUrl,
success: function (res) {
// 用户确认分享后执行的回调函数
console.log("分享到QQ空间成功返回的信息为:", res);
},
cancel: function (res) {
// 用户取消分享后执行的回调函数
console.log("取消分享到QQ空间返回的信息为:", res);
}
});
});
} else {
console.log(res.data.msg);
}
}).catch((err) => {
console.log(err);
});
}
};

3.如何使用封装的分享

  如果使用vue路由hash模式,IOS中打开页面获取的地址永远都是一开始打开的地址,不是跳转后的当前页面地址,所以可以在打开的页面进行初始化调用或者在分享页面初始化满足(android),可以获取不同内核区分;要不就在跳转页面的时候使用location.href = "",不要使用路由,这样只需要在分享页面调用微信初始化。为了保险可以在router.beforeEach钩子里面保存跳转后的地址到localStorage.set("LocalUrl",document.URL)。

  跳转页面:location.href = "?#/invite?userId=3" ;

 import weixin from "@/utils/wechat.js";
initWxChat: function() {
let url = window.localStorage.getItem("LocalUrl")||window.location.href;
let param = {
title: "邀请有礼",
desc: "欢迎您参加邀请有礼",
link: window.location.href,
imgUrl: this.headPortrait,
localUrl: url
};
weixin.wxChat(this, param);
}

4.微信签名认证可以通过,但是自定义分享的内容不一定好使

  这个问题主要是分享的页面带参数,由于路由Hash模式自动会加入#号,微信在IOS中自动加入了自己的内容,然后把#后面的内容放在了它的后面所以获取参数就会出现问题,或许签名认证也会出现问题,这样就想到了加入一个特殊符号去处理,在传入地址的参数#号前面加入一个?号,并且传递的参数最好只有一个,如果是多个话还是会存在问题。

  获取当前页面地址:let url = window.localStorage.getItem("LocalUrl")||window.location.href;

  分享授权认证页面localUrl:http://localhost:9000/?#/invite?userId=3;

  真正要分享的页面link:window.location.href.split('#')[0] + "#/invite_share?userId=3";

  

如过没有看明白的可以私信我,或者大家有其它更好的解决办法欢迎留言,共同学习。

Vue+Vue-router微信分享功能的更多相关文章

  1. AndroidStudio用微信官方方法接入微信分享功能

    转载请注明出处:http://www.cnblogs.com/wangoublog/p/5367950.html 现在微信的功能众所周知,用户量.影响力也是惊人,很多应用接入微信的功能已成为一种不可缺 ...

  2. 微信分享功能引入页面-控制分享时候调用的标题、图片、url和微信按钮隐藏显示控制

    1.设置分享调用的标题.图片.url预览. 2.控制右上角三个点按钮的隐藏显示(和底部工具栏的显示隐藏--未测试). 3.判断网页是否在微信中被调用. <!doctype html> &l ...

  3. android APP 中微信分享功能实现 的总结

    //花了很长时间最终完成了微信分享功能,中间走了很多弯路,在此做一下小结,希望对在应用中使用到微信分享的朋友有所帮助. 主要问题就是下面两个: 1.为什么运行了项目之后,微信分享只是闪了一下就没有了? ...

  4. 微信开发】【Asp.net MVC】-- 微信分享功能

    [微信开发][Asp.net MVC]-- 微信分享功能 2017-01-15 09:09 by stoneniqiu, 12886 阅读, 15 评论, 收藏, 编辑 内嵌在微信中的网页,右上角都会 ...

  5. AndroidStudio怎么实现微信分享功能

    在应用中添加微信分享功能,需要在微信开放平台上传你的应用,审核通过后方可使用此功能. https://open.weixin.qq.com/网址 申请的过程比较简单,这里就不追溯了,贴一个友情链接 h ...

  6. Android微信分享功能实例+demo

    Android微信分享功能实例 1 微信开放平台注册 2 获得appId,添加到程序中,并运行程序 3 使用应用签名apk生成签名,添加到微信开放平台应用签名,完成注册 4 测试分享功能. 有问题请留 ...

  7. php框架tp3.2.3和js写的微信分享功能心得,分享的标题内容图片自定义

    https://blog.csdn.net/weixin_42231483/article/details/81585322 最近用PHP的tp3.2.3框架和js写的微信分享功能心得,分享的标题内容 ...

  8. VueJs单页应用实现微信网页授权及微信分享功能

    在实际开发中,无论是做PC端.WebApp端还是微信公众号等类型的项目的时候,或多或少都会涉及到微信相关的开发,最近公司项目要求实现微信网页授权,并获取微信用户基本信息的功能及微信分享的功能,现在总算 ...

  9. 【微信开发】【Asp.net MVC】-- 微信分享功能

    内嵌在微信中的网页,右上角都会有一个默认的分享功能.如下图所示,第一个为自定义的效果,第二个为默认的效果.实现了自定义的分享链接是不是更让人有点击的欲望?下面讲解下开发的过程. 一.准备,设置js接口 ...

随机推荐

  1. [jzoj]3760.【BJOI2014】Euler

    Link https://jzoj.net/senior/#main/show/3760 Description 欧拉函数  φ(n)  定义为不超过正整数 n 并且与 n 互素的整数的数目. 可以证 ...

  2. Java weak reference

    一个对象被回收,必须满足两个条件: 没有任何引用指向它和GC在运行.把所有指向某个对象的引用置空来保证这个对象在下次GC运行时被回收. Object c = new Car(); c = null; ...

  3. Mybatis Hibernate->MyBatis

    Hibernate对JDBC的封装程度比较高,不需要编写SQL(Structured Query Language)语句,只要使用HQL(Hibernate Query Language)语言就可以了 ...

  4. python对象转化为json串、json串转化为python串

    1.1. JSON简介: JavaScript Object Notation(JavaScript对象表示法) JSON是存储和交换文本信息的语法.类似XML JSON比XML更小.更快.更易解析 ...

  5. Spring-context 实现Hello World

    Spring-context 实现Hello World 本文作为Spring入门笔记,用Spring-context实现控制台的hello world Spring简介 Spring是一个开放源代码 ...

  6. java基础知识总结--多线程

    1.扩展Java.lang.Thread类 1.1.进程和线程的区别: 进程:每个进程都有自己独立的代码和数据空间(进程上下文),进程间的切换会有较大的开销,一个进程包含1~n个线程. 线程:同一类线 ...

  7. 11-14 dom

    1.DOM document object model (1) 节点树状图:Document>documentElement>body>tagname 2.我们常用的节点类型 元素节 ...

  8. ionic2引入cordova插件时提示 no provider for * 错误

    直接上答案,如果出现这个错误,直接在component里添加一行代码: import { FileOpener } from '@ionic-native/file-opener'; @Compone ...

  9. db2 执行报错收集

    1.对于执行中的报错,可以在db2命令行下运行命令 : db2=>? SQLxxx 查看对应的报错原因及解决方法. 2.错误SQL0206N SQLSTATE=42703  检测到一个未定义的列 ...

  10. CSS之优先级

    css的优先级 所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序. 样式表中的特殊性描述了不同规则的相对权重,它的基本规则是: 1 内联样式表的权值最高               sty ...