vue单应用在ios系统中实现微信分享功能操作


Posted in Javascript onSeptember 07, 2020

表示是第一次使用vue做单应用显目,也是在逐渐的摸索中~更是各种踩坑,各种填坑,打算写博客么?是因为不想写笔记了,嗯嗯 就是这么简单 进入正题。

刚开始做微信分享的这个功能的时候,脑补了官方文档微信JS-SDK说明文档

基础的知识不多说了,反正多看文档总是没错的~在安卓系统上面分享是没出错的,但是在ios上面问题就来了,表示无限吐槽ios,但是吐槽归吐槽,问题总是该解决的—在网上百度了很多vue单应用在ios系统中实现微信分享失败的原因以及解决方案

原因

单页面应用通过什么入口进去的 url保持不变 比如说入口是./index 后面不管页面怎么跳转 地址栏的地址都保持./index不变 这就导致微信分享的时候 地址栏的地址与当前页面的url不匹配 获取签名失败 所以分享就失败了~

解决方案

可以使用window.location.href去跳转,而不使用路由跳转,这样可以使地址栏的地址与当前页的地址一样,可以分享成功(适合分享的页面不多的情况下)

把入口地址保存在本地,等需要获取签名的时候 取出来(有效~强推!!!)

注意:sessionStorage.setItem(‘href',href); 只在刚进入单应用的时候保存!

mounted: function() {
   this.$nextTick(function() { //vue里面全部加载好了再执行的函数 (类似于setTimeout)
    this.myAddressSlots[0].defaultIndex = 0
   });
   var href = window.location.href;
   if(!sessionStorage.getItem('href')){//将入口地址保存下来 ios分享会使用
    sessionStorage.setItem('href',href);
   }
  },

在使用存在本地的url去做分享的时候,建议安卓与iOS做判断,毕竟坑的只是iOS~

var url = 'lms-service/wechat-services/wechat-share-sign';
    var curl = window.location.href;
    if (!KZ.isAndroidOrIos() && KZ.isWeiXin()) {//isAndroidOrIos()安卓true IOS为false
     curl = sessionStorage.getItem('href');
     if(!curl){
      curl = KZ_CONFIG.DOMAIN;
     }
    }

好吧 就这样 能看到这篇博文的应该都是同路人~希望能够帮助到你们,还有就是 第一次写 思绪有点乱 多多包涵哈

补充知识:vue 微信分享及ios二次微信分享invalid signature解决

我就废话不多说了,大家还是直接看代码吧~

npm install weixin-js-sdk

页面中引入

import wx from 'weixin-js-sdk'

methods: {
	init() {
		var that = this;
		var url = encodeURIComponent(window.location.href.split('#')[0]);
		http.post(api.getSdk,url,function(data){
				let appId = data.appId;
				let timestamp = data.timestamp;
				let signature = data.signature;
				let nonceStr = data.nonceStr;
				that.initwx(appId, timestamp, signature, nonceStr);
		})	
	},
 
	initwx(appId, timestamp, signature, nonceStr) {
		var link = window.location.href;
		var imgUrl = 'https格式的图片'
		var shareData = {
			"imgUrl": imgUrl,// 分享显示的缩略图地址 ,根据自己情况而定
			"link": link,// 分享地址
			"desc": '描述',// 分享描述
			"title": '标题'// 分享标题
		};
		wx.config({
			debug: false,//调试模式
			appId: appId,// 公众号的唯一标识
			timestamp: timestamp,//生成签名的时间戳
			nonceStr: nonceStr,//生成签名的随机串
			signature: signature,
			jsApiList: ['onMenuShareTimeline', //
			'onMenuShareAppMessage'] //
		});
		wx.checkJsApi({
			jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
		});
		wx.ready(function() {
			wx.onMenuShareTimeline(shareData); //分享到朋友圈
			wx.onMenuShareAppMessage(shareData); //分享给朋友
		});
	}
},
created(){
  this.init();
},

备注:ios第二次分享 会出现invalid signature

原因分享后出现微信会在链接会自动加以下字符串,再次签名的时候,因为&特殊字符传给后台,后台未处理,需要对链接encodeURIComponent处理,就不会出现invalid问题

朋友圈 from=timeline&isappinstalled=0

微信群 from=groupmessage&isappinstalled=0

好友分享 from=singlemessage&isappinstalled=0

以上这篇vue单应用在ios系统中实现微信分享功能操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js判断变量是否未定义的代码
Mar 28 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
JavaScript中的函数(二)
Dec 23 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
Angular 向组件传递模板的两种方法
Feb 23 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
vue 父组件中调用子组件函数的方法
Jun 06 Javascript
微信小程序实现页面浮动导航
Jan 08 Javascript
解决小程序无法触发SESSION问题
Feb 03 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 #Javascript
一篇文章带你从零快速上手Rollup
Sep 07 #Javascript
基于vue hash模式微信分享#号的解决
Sep 07 #Javascript
在项目vue中使用echarts的操作步骤
Sep 07 #Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 #Javascript
Vue.js原理分析之nextTick实现详解
Sep 07 #Javascript
小程序实现可拖动的悬浮按钮
Sep 07 #Javascript
You might like
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
ThinkPHP写第一个模块应用
2012/02/20 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
js 对象是否存在判断
2009/07/15 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
javascript编写实用的省市选择器
2015/02/12 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
Vue.js中extend选项和delimiters选项的比较
2017/07/17 Javascript
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
python获取文件扩展名的方法
2015/07/06 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
opencv 查找连通区域 最大面积实例
2020/06/04 Python
Python实现数字的格式化输出
2020/08/01 Python
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
国际会议邀请函范文
2014/01/16 职场文书
旅游管理专业大学生职业规划书
2014/02/27 职场文书
525心理活动总结
2014/07/04 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
数学教师求职信范文
2015/03/20 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
创业计划之特色精品店
2019/08/12 职场文书