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 相关文章推荐
深入理解JavaScript系列(3) 全面解析Module模式
Jan 15 Javascript
js模仿hover的具体实现代码
Dec 30 Javascript
js获取元素相对窗口位置的实现代码
Sep 28 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
javaScript中with函数用法实例分析
Jun 08 Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
vue.js中过滤器的使用教程
Jun 08 Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
Apr 11 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 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
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
对盗链说再见...
2006/10/09 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
mac下多个php版本快速切换的方法
2016/10/09 PHP
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
javascript 应用小技巧方法汇总
2015/07/05 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
使用原生JS实现滚轮翻页效果的示例代码
2020/05/31 Javascript
[49:41]NB vs NAVI Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
Python实现随机选择元素功能
2017/09/14 Python
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
利用python循环创建多个文件的方法
2018/10/25 Python
Python读取YAML文件过程详解
2019/12/30 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
企划经理的岗位职责
2013/11/17 职场文书
假释思想汇报范文
2014/10/11 职场文书
2015年教师节慰问信
2015/03/23 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
Golang 实现获取当前函数名称和文件行号等操作
2021/05/08 Golang
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA