vue实现微信分享功能

2024-09-29 05:37:01

本文实例为大家分享了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.changeData() + '/member/weChatShare',
 method: "post",
 params: {
  url : window.location.href.split('#')[0]
 }
 }).then(function(res){
 // console.log(res)
 wx.config({
  //debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: res.data.appId, // 必填，公众号的唯一标识
  timestamp: res.data.timestamp, // 必填，生成签名的时间戳
  nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
  signature: res.data.signature,// 必填，签名
  jsApiList: ["onMenuShareAppMessage","onMenuShareTimeline"] // 必填，需要使用的JS接口列表
 });

 wx.ready(function(){
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
  //分享给朋友
  wx.onMenuShareAppMessage({
  title: that.projectDetail.project_name, // 分享标题
  desc: '卖铺宝', // 分享描述
  link: window.location.href.split('#')[0], // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  imgUrl: that.projectPic[0], // 分享图标
  type: '', // 分享类型,music、video或link，不填默认为link
  dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
  success: function () {
   // 用户点击了分享后执行的回调函数
  }
  });

  //分享到朋友圈
  wx.onMenuShareTimeline({
  title: that.projectDetail.project_name, // 分享标题
  link: window.location.href.split('#')[0], // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  imgUrl: that.projectPic[0], // 分享图标
  success: function () {
   // 用户点击了分享后执行的回调函数
  }
  });
 });
 wx.error(function(res){
  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
 });
 }.bind(this)).catch(function(err){
 console.log("商店详情页面错误：",err)
 });
},

3.ios兼容性问题

beforeRouteEnter (to, from, next) {
 var u = navigator.userAgent;
 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
 // XXX: 修复iOS版微信HTML5 History兼容性问题
 if (isiOS && to.path !== location.pathname) {
 // 此处不可使用location.replace
 location.assign(to.fullPath)
 } else {
 next()
 }
},

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

详解Vue开发微信H5微信分享签名失败问题解决方案

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

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

一.index.html中引入微信官方分享js <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> 二.在src下的assets/js文件夹下新建wx.jsapi.js文件,把分享做成公用方法使用axios来发送请求,参照 //www.jb51.net/article/141008.htm 配置vue-cl
vue-router history模式下的微信分享小结

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

本文介绍了Vue单页式应用(Hash模式下)实现微信分享的实例,分享给大家,具体如下: 前端微信分享的基本步骤: 一.绑定域名: 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名".这个不多说,微信开发的都应该清楚. 二.引入js文件: 在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js. 请注意,如果你的页面启用了ht
vue微信分享 vue实现当前页面分享其他页面

本文实例为大家分享了vue微信分享展示的具体代码,供大家参考,具体内容如下首先以分享给朋友为例 1.先看官方文档 wx.onMenuShareAppMessage({ title: '', // 分享标题 desc: '', // 分享描述 link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: '', // 分享图标 type: '', // 分享类型,music.video或link,不填默认为link dataUrl: '', //
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项目全局配置微信分享思路详解

这个项目为移动端项目,主要用于接入公众号服务.项目采用两种登录方式,微信授权登录以及账号密码登录.对于移动端项目而言,为了便于项目扩展以及提供开发热更新速度,项目分为不同的模块,每个模块是一个单页面应用.页面分为两种,一种是需要用户登录之后才能浏览,另一种是用户无需登录即可浏览.无论哪一种,均配置微信分享. 使用的技术 1.使用vue作为框架 2.使用vux作为UI组件库全局配置微信分享思路 1.区分一般和特殊,一般情况,全局配置默认分享文案:特殊情况分两种,一种是分享内容不需要异步获取,则在
vue微信分享出来的链接点开是首页问题的解决方法

最近工作上遇到了这样一个Bug:"vue微信分享出来的链接点开是首页" 公司网站有PC端和移动端,两个版本.其中如果手机访问PC端,则自动跳转到移动端.(这是常规操作,没啥稀奇点.) 可神奇的问题来了. 在移动端中有微信分享功能,如果手机直接访问手机端的地址进入子页面分享,点开分享的链接进入的是子页面.但是如果是从PC端跳转进入手机端,分享子页面链接打开将会是主页. 这个问题我也百度了各种方法,折腾了一天,然而都没啥用. 最后自己想了一个替代方案: 在static目录下新建一个名为ht
vue实现微信分享朋友圈,发送朋友的示例讲解

首先下载微信jssdk引入项目中,这里我就不说怎么去安装了,如果不会的可以看一下npm教程和es6的教程. 第一步,引入微信jssdk,此处我是通过下载微信jssdk,然后用webpack引入进项目的. 第二步,获取详情数据,渲染页面. 第三步,获取详情数据成功后再获取微信签名,token等配置信息. 第四步,通过api配置所想要的功能代码: <template> <div class="details"> <player :videoUrl="

vue实现微信分享功能

相关推荐

随机推荐