SPA单页面应用在微信浏览器中的问题

Q1. 使用微信浏览器复制链接功能只能复制第一次进入页面的地址
A1:

// -- App.vue 入口组件
watch: {
    // 监听路由变化
    '$route' (to, from) {
      // 微信分享
      if (to.meta.share) {
        this.$weixin.changeUrl();
        if (to.meta.share == 'auto') {
          this.$weixin.wxfx();
        }
      }
    },
  },
// -- wx.js
// 改变url地址
	static changeUrl() {
		// 判断是否为微信浏览器
		// if (!this.IsWeChat()) {
		// 	return;
		// }

		var userid = localStorage.getItem('userid');
		if (!userid) {
			return;
		}
		
		var share_url = window.location.origin + window.location.pathname + '?r=' + Date.now() + '#' + router.currentRoute.path;
		if (share_url != window.location.href) {
			window.history.replaceState(null, null, share_url);
		}
	}
	/**
	 * 微信分享配置
	 * @param {Object} share_config 分享对象
	 * @param {Object} share_config.title 分享描述
	 * @param {Object} share_config.desc 摘要
	 * @param {Object} share_config.link 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
	 * @param {Object} share_config.imgUrl 分享图片
	 */
	static wxfx(share_config) {

		var default_share_config = {
			title: "",
			desc: "",
			link: window.location.href,
			imgUrl: window.location.origin + window.location.pathname.replace('index.html', '') + 'share_default_img.png',
			success: function() {
				console.log('分享设置成功');
			},
			fail: function(err) {
				console.log('分享设置失败', err);
			}
		};
		share_config = Object.assign({}, default_share_config, share_config);
		share_config.desc = share_config.desc || share_config.title;

		WeChatJsTicket({
			controller: 'WXApi',
			action:'WeChatJsTicket',
			key: '',
			url: encodeURIComponent(share_config.link)
		}, {
			loading: false
		}).then(res => {
			var appId = res.data.appId;
		    var timestamp = res.data.timestamp;
		    var nonceStr = res.data.nonceStr;
		    var signature = res.data.signature;
		    wx.config({
		    	debug: false,
		    	appId: appId,
		    	timestamp: timestamp,
		    	nonceStr: nonceStr,
		    	signature: signature,
		    	jsApiList: [
		    		'updateAppMessageShareData',
		    		'updateTimelineShareData',
		    	]
			});
		    	
		    wx.ready(function() {
		    	/* 分享到朋友圈 */
		    	wx.updateAppMessageShareData(share_config);
		    	/* 分享给朋友 */
		    	wx.updateTimelineShareData(share_config);
		    });
		}).catch(err => {});
	}

Q2. axios库在定义url为完整http地址,请求方式为get的时候带data参数或自定义headers,会出现isAxiosError为true的js错误,目前只在iphone5上的微信浏览器出现这个问题
A2: url完成http地址时候不带data参数和自定义headers就可解决

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值