Vue+Vue-router微信分享功能
在使用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微信分享功能的更多相关文章
- AndroidStudio用微信官方方法接入微信分享功能
转载请注明出处:http://www.cnblogs.com/wangoublog/p/5367950.html 现在微信的功能众所周知,用户量.影响力也是惊人,很多应用接入微信的功能已成为一种不可缺 ...
- 微信分享功能引入页面-控制分享时候调用的标题、图片、url和微信按钮隐藏显示控制
1.设置分享调用的标题.图片.url预览. 2.控制右上角三个点按钮的隐藏显示(和底部工具栏的显示隐藏--未测试). 3.判断网页是否在微信中被调用. <!doctype html> &l ...
- android APP 中微信分享功能实现 的总结
//花了很长时间最终完成了微信分享功能,中间走了很多弯路,在此做一下小结,希望对在应用中使用到微信分享的朋友有所帮助. 主要问题就是下面两个: 1.为什么运行了项目之后,微信分享只是闪了一下就没有了? ...
- 微信开发】【Asp.net MVC】-- 微信分享功能
[微信开发][Asp.net MVC]-- 微信分享功能 2017-01-15 09:09 by stoneniqiu, 12886 阅读, 15 评论, 收藏, 编辑 内嵌在微信中的网页,右上角都会 ...
- AndroidStudio怎么实现微信分享功能
在应用中添加微信分享功能,需要在微信开放平台上传你的应用,审核通过后方可使用此功能. https://open.weixin.qq.com/网址 申请的过程比较简单,这里就不追溯了,贴一个友情链接 h ...
- Android微信分享功能实例+demo
Android微信分享功能实例 1 微信开放平台注册 2 获得appId,添加到程序中,并运行程序 3 使用应用签名apk生成签名,添加到微信开放平台应用签名,完成注册 4 测试分享功能. 有问题请留 ...
- php框架tp3.2.3和js写的微信分享功能心得,分享的标题内容图片自定义
https://blog.csdn.net/weixin_42231483/article/details/81585322 最近用PHP的tp3.2.3框架和js写的微信分享功能心得,分享的标题内容 ...
- VueJs单页应用实现微信网页授权及微信分享功能
在实际开发中,无论是做PC端.WebApp端还是微信公众号等类型的项目的时候,或多或少都会涉及到微信相关的开发,最近公司项目要求实现微信网页授权,并获取微信用户基本信息的功能及微信分享的功能,现在总算 ...
- 【微信开发】【Asp.net MVC】-- 微信分享功能
内嵌在微信中的网页,右上角都会有一个默认的分享功能.如下图所示,第一个为自定义的效果,第二个为默认的效果.实现了自定义的分享链接是不是更让人有点击的欲望?下面讲解下开发的过程. 一.准备,设置js接口 ...
随机推荐
- CodeForce VKcup C 树形dp
题意: 给出一棵树,一个人可以在树上跳,每次最多跳k(1≤k≤5)个点定义f(s,t)为从顶点ss跳到顶点tt最少需要跳多少次求∑(s<t)f(s,t) 链接: 点我 dp[i][j]表示以i点 ...
- setuid setgid
http://blog.csdn.net/oo__yan/article/details/7076889 在Linux系统中每个普通用户都可以更改自己的密码,这是合理的设置. 问题是:用户的信息保存在 ...
- [P1441]砝码称重 (搜索+DP)
对于我这种蒟蒻,是很不错的一题了. dfs搜索当前状态 满足时DP 比较坑的地方就是起始的地方 我一开始从1开始,搜索写的是从0开始. 后来就统一用0开始的了. #include<bits/st ...
- C++学习笔记54:关联容器,函数对象
关联容器的特点 1.每个关联容器都有一个键(key) 2.可以根据键高效查找元素 集合set 集合用来存储一组无重复的元素,由于集合的元素本身是有序的,可以高效地查找元素,也可以方便地指定大小范围的元 ...
- hihocoder1051 补提交卡(贪心)
http://hihocoder.com/problemset/problem/1051 一开始dfs暴搜超时 这题关键在于理解到,肯定是补连续的几天.所以说写贪心之前要好好想想,怎么贪. //补题卡 ...
- 本机ip、127.0.0.1和0.0.0.0区别及内环流量
本机ip.127.0.0.1和0.0.0.0区别及内环流量 所谓内环流量 简单的说是指 计算机内部,程序间通讯产生的流量,或者叫 本地流量,对应的是来自网络的流量. 比如,你安装了卡巴斯基,avast ...
- jQuery Distpicker插件 省市区三级联动 动态赋值修改地址
在获取创建页面数据后需要在编辑页面调取之前提交的数据,在使用这个插件后发现无法动态赋值,查找资料后发现需要先销毁实例,$(’#target’).distpicker(‘destroy’); 第一步 引 ...
- 自定义UIPickView
效果图 源码 https://github.com/YouXianMing/Animations 说明 1. 数据适配器PickerViewDataAdapter含有PickerViewCompone ...
- socket.io常用api
1. 服务端 io.on('connection',function(socket)); 监听客户端连接,回调函数会传递本次连接的socket io.sockets.emit('String',dat ...
- AlexNet总结
https://blog.csdn.net/Rasin_Wu/article/details/80017920 https://blog.csdn.net/chaipp0607/article/det ...