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 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
Javascript 中介者模式实例
Dec 16 Javascript
jquery ready(fn)事件使用介绍
Aug 21 Javascript
node.js WEB开发中图片验证码的实现方法
Jun 03 Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 Javascript
JavaScript自定义超时API代码实例
Apr 30 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记录代码执行时间(实现代码)
2013/07/05 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
CI框架扩展系统核心类的方法分析
2016/05/23 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
JavaScript prototype属性使用说明
2010/05/13 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
Vue.js对象转换实例
2017/06/07 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
Angularjs实现控制器之间通信方式实例总结
2018/03/27 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
浅谈vue3中effect与computed的亲密关系
2019/10/10 Javascript
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
django框架创建应用操作示例
2019/09/26 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
基于Python正确读取资源文件
2020/09/14 Python
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
无毒社区工作方案
2014/05/23 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
大跃进口号
2014/06/16 职场文书
离婚协议书怎么写(范本参考)
2014/09/30 职场文书
社团个人总结范文
2015/03/05 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
升学宴学生致辞
2015/09/29 职场文书
导游词之北京明十三陵
2019/10/28 职场文书