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 相关文章推荐
jQuery 遍历json数组的实现代码
Sep 22 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
Apr 01 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
阿里云ecs服务器中安装部署node.js的步骤
Oct 08 Javascript
Ionic3实现图片瀑布流布局
Aug 09 Javascript
使用SVG基本操作API的实例讲解
Sep 14 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
详解vue-property-decorator使用手册
Jul 29 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 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/11/12 PHP
IIS下PHP的三种配置方式对比
2014/11/20 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
利用JavaScript阻止表单提交的两种方法
2016/08/11 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
回顾Javascript React基础
2019/06/15 Javascript
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
对于Python的Django框架使用的一些实用建议
2015/04/03 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
python  logging日志打印过程解析
2019/10/22 Python
django自定义模板标签过程解析
2019/12/14 Python
如何表示python中的相对路径
2020/07/08 Python
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
英国网上超市:Ocado
2020/03/05 全球购物
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
军训自我鉴定范文
2014/02/13 职场文书
工商干部先进事迹
2014/05/14 职场文书
2014年教师节寄语
2014/08/11 职场文书
网络研修随笔感言
2015/11/18 职场文书
《纸船和风筝》教学反思
2016/02/18 职场文书
Ajax实现异步加载数据
2021/11/17 Javascript
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL