记录vue做微信自定义分享的一些问题

2024-11-28 18:53:31

前言

众所周知，在使用vue做项目的时候，微信自定义分享一直是一个坑，只是ios上坑明显的多。

然后每次遇到问题都要度娘很久。

奇怪的是貌似和很多人遇到的问题一样，但是他们写的解决方案都没办法直接解决我遇到的问题。

这里就记录一下遇到过的一些坑，和解决方式。

目前项目里面，安卓和ios上面的自定义分享已经没有什么问题了。

问题及解决方式

hash模式

在微信的官方文档中，提到关于jsapi_ticket的签名算法中，生成签名的时候，当前网页的URL，不包含#及其后面的部分；而且自定义分享出去的链接，微信也会主动往链接的后面拼接一些参数，比如from之类的；这也就造成了一些问题，比如要么签名不正确，要么分析那个出去的链接，二次分享又回出问题。

那么我这里的解决方式就是直接不用hash模式了，问题又多，链接也不好看，直接使用mode: 'history'。

切换页面签名失效

这个在网上也有很多解决方案。由于我这里的项目里不需要细致到每个页面都必须做自定义分享，只需要在触发某些条件的时候触发自定义分享，所以是这么做的。

在main.js文件中编写自定义分享的函数逻辑；

// 微信自定义分享
Vue.prototype.wxShare = async function ({title , desc , link = window.location.href,imgUrl ,success}) {
  let that = this;
  // 当前页面地址
  let url = window.location.href;
  // 调用后端服务获取微信签名内容
  let {data: wxCfg} = await that.ajax({api: that.api.wechatGetWxSdk, data: {url: url}})
  if (!wx || !wxCfg) return;
  wx.config({
    debug: false,
    appId: wxCfg.appId,
    timestamp: wxCfg.timestamp,
    nonceStr: wxCfg.nonceStr,
    signature: wxCfg.signature,
    jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareTimeline', 'onMenuShareAppMessage']
  });
  wx.ready(function () {
    wx.updateAppMessageShareData({
      title: title, desc: desc, link: link, imgUrl: imgUrl,
      success: function () {
        success ? success() : ''
      }
    })
    wx.updateTimelineShareData({
      title: title, link: link, imgUrl: imgUrl,
      success: function () {
        success ? success() : ''
      }
    })
    wx.onMenuShareTimeline({
      title: title, link: link, imgUrl: imgUrl,
      success: function () {
        success ? success() : ''
      }
    })
    wx.onMenuShareAppMessage({
      title: title, desc: desc, link: link, imgUrl: imgUrl,
      success: function () {
        success ? success() : ''
      }
    })
  })
  wx.error(function (res) {
    that.$toast('请刷新当前页面后重试')
  });
}

在需要调用自定义分享的时候，就这样调用

await this.wxShare({
  title: '分享的标题',
  desc: '分享的摘要',
  link: '分享出去的链接地址',
  imgUrl: '分享的封面图',
  success: function(){
    // 调用成功的回调
  }
})

IOS路由跳转之后依然签名失效

上面的问题解决之后，项目上线了，很多ios的用户反馈个别页面还是无法成功调用自定义分享，前期的解决方案很暴力...怼用户，让用户刷新一下当前页面，诶不成想，就好了！

后来越来越多的反馈..没办法了，必须得想想辙解决一下...

就开始找原因，发现android一点问题没有。

但是在ios上，无论路由跳转多少次，复制出来的链接都是首次进入的页面的链接，于是改造一下上面的调用函数。
首先记录首次进入页面的url

Vue.prototype.firstUrl = window.location.href;

然后在wxShare函数中加了一个判断。

大致意思就是判断当前设备是不是ios，如果是，签名用的url就使用firstUrl，如果不是，就使用window.location.href

然后上线，发现就没有再出过问题咯。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue项目中实现的微信分享功能示例

本文实例讲述了vue项目中实现的微信分享功能.分享给大家供大家参考,具体如下: /* 微信分享 */ Vue.prototype.wechatShare = (shareData) => { let resource = { title: '随我心愿!', desc: '体验优质服务', link: 'https://www.abc.cn/', img: 'https://www.abc.cn/images/share_logo.jpg' } let obj = Object.assign({}
vue微信分享到朋友圈 vue微信发送给好友

本文为大家分享了vue微信分享至朋友圈&&分享至朋友代码的封装,供大家参考,具体内容如下 1.新建share.js文件 import {shareSDK} from "../api/common";//分享api import wx from 'weixin-js-sdk' export const shareTitle = '测试'; export const shareUrl = '测试连接'; export const shareImg = '测试图片'; exp
vue-router history模式下的微信分享小结

背景旧项目改造,进行前后端分离.做成了spa,为了保证后端路由时期链接可用性,使用了history模式. 因为不同的页面有不同的分享内容,所以每次路由都要重新进行wx.config/wx.ready调用微信分享遇到的坑微信官方文档上有下面一段话: 所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushSt
vue实现微信分享功能

本文实例为大家分享了vue实现微信分享功能的具体代码,供大家参考,具体内容如下 1.引入微信js <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> 2.从后台获取签名并分享 fenxiangFun(){//详情分享 var that = this; this.$http({ url:this.changeDa
关于在vue-cli中使用微信自动登录和分享的实例

(以下所有接口由后台提供) 一.微信自动登录 //定义事件 methods:{ //判断是否微信登陆是不是微信浏览器 isWeiXin() { let ua = window.navigator.userAgent.toLowerCase(); console.log(ua);//mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mo
VueJs单页应用实现微信网页授权及微信分享功能示例

在实际开发中,无论是做PC端.WebApp端还是微信公众号等类型的项目的时候,或多或少都会涉及到微信相关的开发,最近公司项目要求实现微信网页授权,并获取微信用户基本信息的功能及微信分享的功能,现在总算完成了,但开发过程中遇到好几个坑.废话不多说了,开始正题. 描述点微信相关开发知识了解怎么样实现微信相关功能本地测试微信网页授权微信分享微信相关开发知识了解微信公众号的appId,AppSecret 当我们注册一个微信公众号后,便能够得到一个appId(每个微信公众号只有一个,一个微信公
vue实现微信二次分享以及自定义分享的示例

微信二次分享/自定义分享从App中使用App分享(一次分享) 使用微信导航栏的分享(二次分享) --已做处理使用微信导航栏的分享(二次分享) --未做处理如上图,如果不做相关处理,页面进行二次分享,用户看到的就是链接+空图,上面显示的文案(考拉阅读)实际上是获取的title标签中的文案,我在网上查的相关例子有说明,图片如果不设置,将会自动获取浏览器渲染的第一张图片,经过个人测试,并没有实现(朋友圈同理,不做图片展示). 微信js-sdk说明文档先登录微信公众平台进入"公众号设置"
记录vue做微信自定义分享的一些问题

前言众所周知,在使用vue做项目的时候,微信自定义分享一直是一个坑,只是ios上坑明显的多. 然后每次遇到问题都要度娘很久. 奇怪的是貌似和很多人遇到的问题一样,但是他们写的解决方案都没办法直接解决我遇到的问题. 这里就记录一下遇到过的一些坑,和解决方式. 目前项目里面,安卓和ios上面的自定义分享已经没有什么问题了. 问题及解决方式 hash模式在微信的官方文档中,提到关于jsapi_ticket的签名算法中,生成签名的时候,当前网页的URL,不包含#及其后面的部分:而且自定义分享出去的链
微信自定义分享php代码分析

前一段之间做微信自定义分享,积累了一些经验,分享给大家. 步骤一.二在微信开发者文档中已经很详细了,直接从步骤三开始吧. 步骤三要参数微信的参数,除了appId之外,其他的参数都是动态的,这里,我用的php语言,在后端生成的参数,代码如下: php端代码: public function getwxinfo(){ $dataurl = I('dataurl'); include('./ThinkPHP/Library/Vendor/jssdk/jssdk.php'); $jssdk = new
基于thinkPHP实现的微信自定义分享功能示例

本文实例讲述了基于thinkPHP实现的微信自定义分享功能.分享给大家供大家参考,具体如下: 在许多大的网站我们都会看到点击分享就可以把数据分享到微信或QQ或其它的平台了,下面我们来看一段php版微信自定义分享代码,代码参考官方开发的没有任何问题. 分享需要认证微信订阅号或者服务号. php 代码(thinkphp): $appid='xxx'; $appsecret='xxxx'; $timestamp = time(); $noncestr = $this->getRandStr(15);
微信自定义分享链接信息（标题，图片和内容）实现过程详解

网页分享到微信要怎么才能自定义标题,内容和图片呢? 需求概述微信中可以直接转发网页链接,用户在微信内置浏览器中打开后可以通过微信浏览器中右上角进行分享到朋友,朋友圈,QQ等.但直接这样分享的话,用户看到的只是一条链接,没有任何的图文内容. 如下图,图1是别人分享给我的链接效果,图2是我分享给别人的效果.两种方案的用户体验我想都不用我多说了,一眼就能看的出来. 方案实现要达到上图自定义文案与图标的效果,必须要采用微信提供的JS-SDK,微信JS-SDK是微信公众平台面向网页开发者提供的基于微信
vue 做移动端微信公众号采坑经验记录

自己用vue做微信公众号项目有一段时间了,遇到各种奇葩的问题,下面细数那些坑: 第一坑:微信分享导致安卓手机无法调起相册和无法调起微信充值解决方案: setTimeout(_ => { wx.config(sdkConfig) }, 500) 需要将微信分享延迟500毫秒,这样就解决了安卓手机无法调用相册和微信充值的问题,如果用了微信分享需要加个延迟. 第二坑:部分手机第三方输入法会将页面网上挤的问题解决方案: // 特定需求页面,比如评论页面,输入框在顶部之类的 const interva
vue使用微信JS-SDK实现分享功能

最近开发微信公众号内嵌H5页面,使用vue搭建的项目,由于业务需求,需要实现微信自定义分享功能,所以项目中集成微信JS-SDK.微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包.通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.卡券.支付等微信特有的能力,为微信用户提供更优质的网页体验. 1.绑定域名微信公众号开发测试帐号: http://mp.weixin.qq.com/debug
vue引入微信sdk 实现分享朋友圈获取地理位置功能

最近入职的公司主要做微信端的h5,所以在所难免要引用sdk.虽然官方文档写的还算清楚,但是还是有坑. 1.在index.html中引入微信sdk <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> 2.在assets/js 下新建文件 wx.js export default { wxShowMenu: fu
详解Vue开发微信H5微信分享签名失败问题解决方案

关于Vue中路由使用history模式,开发微信H5页面分享时在安卓上签名有效成功,但是在IOS设备上一直报错签名失效问题问题描述:在Vue开发过程中,路由使用History模式下,在使用微信分享时,在微信开发者工具上一切正常.在安卓上一切正常. 但是!!!在IOS上反复报签名错误. 以下是真机测试截图,划掉黑线的是我个人IOS设备分享出来一直是服务号,接着下面分享出来自定义内容是安卓分享正常,话不多说上图!!!! 我的代码: 需求描述:需要从首页进入活动详情页,然后在详情页分享详情页面内容.
记录一次开发微信网页分享的步骤

需求最近在做一个项目需求,分享领好书活动,获取用户的个人信息以及unionID,并诱导用户分享给好友或朋友圈,达到裂变拉新的目的.在做的过程中遇到了一些坑的地方,所以回过来总结一下技术方案使用微信JS-SDK自定义分享到好友和分享到朋友圈实现步骤 1.要实现微信H5网页自定义分享功能,必须先熟悉下微信公众平台开发文档,具体文档里面说的很详细,这里说下需要注意的点,别忘了绑定开发者权限,还有绑定js安全域名,要不然有可能会报redirect_uri参数错误. 2.首先一般在做微信H5网页活

记录vue做微信自定义分享的一些问题

相关推荐

随机推荐