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 相关文章推荐
cloudgamer出品ImageZoom 图片放大效果
Apr 01 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
js实现继承的方法及优缺点总结
May 08 Javascript
js实现开关灯效果
Mar 30 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 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
用PHP实现的随机广告显示代码
2007/06/14 PHP
PHP实现的浏览器检查类
2016/04/11 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
jquery构造器的实现代码小结
2011/05/16 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
jQuery.deferred对象使用详解
2016/03/18 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
js oncontextmenu事件使用详解
2017/03/25 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
如何使用python爬取csdn博客访问量
2016/02/14 Python
Python实现视频下载功能
2017/03/14 Python
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
布隆过滤器的概述及Python实现方法
2019/12/08 Python
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
日本最大的眼镜购物网站:Oh My Glasses
2016/11/13 全球购物
软件测试英文面试题
2012/10/14 面试题
致长跑运动员广播稿
2014/01/31 职场文书
服务标兵事迹材料
2014/05/04 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
机械设计及其自动化专业求职信
2014/06/09 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
小学课改工作总结
2015/08/13 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书
六年级作文之家庭作文
2019/12/12 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang
Python趣味挑战之教你用pygame画进度条
2021/05/31 Python
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL
python析构函数用法及注意事项
2021/06/22 Python