vue实现微信二次分享以及自定义分享的示例

 更新时间:2019年03月20日 15:19:45   作者:桃小妖  
这篇文章主要介绍了vue实现微信二次分享以及自定义分享的示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

微信二次分享/自定义分享

从App中使用App分享(一次分享)

使用微信导航栏的分享(二次分享) --已做处理

使用微信导航栏的分享(二次分享) --未做处理

如上图,如果不做相关处理,页面进行二次分享,用户看到的就是链接+空图,上面显示的文案(考拉阅读)实际上是获取的title标签中的文案,我在网上查的相关例子有说明,图片如果不设置,将会自动获取浏览器渲染的第一张图片,经过个人测试,并没有实现(朋友圈同理,不做图片展示)。

微信js-sdk说明文档

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。(一般后端配置)

前端需要调取后端的接口,获取微信的congfig所需要的参数

wx.config({
 debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
 appId: '', // 必填,公众号的唯一标识
 timestamp: , // 必填,生成签名的时间戳
 nonceStr: '', // 必填,生成签名的随机串
 signature: '',// 必填,签名
 jsApiList: [] // 必填,需要使用的JS接口列表
});

jsApiList里面需要填写你调用的jsApi,updateAppMessageShareData(分享微信,QQ),updateTimelineShareData(微信朋友圈,QQ空间),onMenuShareTimeline/onMenuShareAppMessage/onMenuShareQQ 这三个即将废弃,不建议使用。

⚠️但是在本次开发中,我只使用了updateAppMessageShareData,updateTimelineShareData,个别Android(微信版本7.0.3)分享出来的还是没有图片和文案,ios的是没有问题,所以又加上了弃用的onMenuShareTimeline,onMenuShareAppMessage之后,安卓机也可以正常分享。

判断当前客户端版本是否支持指定JS接口

wx.checkJsApi({
 jsApiList: ['chooseImage'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
 success: function(res) {
 // 以键值对的形式返回,可用的api值true,不可用为false
 // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
 }
});

wx.config中的 debug 设为true,在微信测试时会自动弹出相关信息,在微信开发者工具中也会打印出流程(分为begin,end),如下图

1、通过ready接口处理成功验证

2、在ready接口中调取updateAppMessageShareData,updateTimelineShareData方法

wx.ready(function () { //需在用户可能点击分享按钮前就先调用
 wx.updateAppMessageShareData({ 
  title: '', // 分享标题
  desc: '', // 分享描述
  link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  imgUrl: '', // 分享图标
  success: function () {
   // 设置成功
  }
 })
});

在vue的开发项目中,可在created或mounted生命周期中调用

3、通过error接口处理失败验证

wx.error(function(res){
 // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});

⚠️需要注意的点

通过后端的接口获取微信配置的参数时,需要传递当前页面url

  • - url(当前网页的URL,不包含#及其后面部分),如果没有#,则需要传递完整的url
  • - url需要编码    encodeURIComponent(url)

代码如下

// wetchat.js -- 个人封装
import wx from 'weixin-js-sdk'; // 引入wxJS
import apiUrl from "@/api/index"; // 本项目的api (根据自己项目)
export function wxChatShare(param) {
 let _url = encodeURIComponent(param.url) // 当前页面的url
 apiUrl.wechatConfig(_url) // wechatConfig是获取微信配置相关信息的接口,此处根据个人项目写法而定,类似于this.$ajax
 .then (res => {
  if(res.data.code==200) {
  // 接口返回配置信息
   wx.config({
    debug: false,
    appId: res.data.content.appid,
    timestamp: res.data.content.timestamp, // 必填,生成签名的时间戳
    nonceStr: res.data.content.nonceStr, // 必填,生成签名的随机串
    signature: res.data.content.signature, // 必填,签名
    jsApiList: [ // 用的方法都要加进来
     'updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareTimeline', 'onMenuShareAppMessage'
    ]
   });
   wx.ready(function () {
    //分享到朋友圈

    wx.updateTimelineShareData({ 
     title: param.title, // 分享标题
     link: param.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
     imgUrl: param.imgUrl, // 分享图标
     success: function () {
      // 设置成功
      console.log("分享到朋友圈成功返回的信息为:", res);
      this.$Message.message("设置成功!");
     }
    })

    wx.onMenuShareTimeline({
     title: param.title, // 分享标题
     link: param.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
     imgUrl: param.imgUrl, // 分享图标
     success: function () {
     // 用户点击了分享后执行的回调函数
     },
    })

    //分享给朋友

    wx.updateAppMessageShareData({ 
     title: param.title, // 分享标题
     desc: param.desc, // 分享描述
     link: param.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
     imgUrl: param.imgUrl, // 分享图标
     success: function () {
      // 设置成功
      console.log("分享到朋友圈成功返回的信息为:", res);
      this.$Message.message("设置成功!");
     }
    })
    wx.onMenuShareAppMessage({
     title: param.title, // 分享标题
     desc: param.desc, // 分享描述
     link: param.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
     imgUrl: param.imgUrl, // 分享图标
     type: param.type, // 分享类型,music、video或link,不填默认为link
     dataUrl: param.dataUrl, // 如果type是music或video,则要提供数据链接,默认为空
     success: function () {
     // 用户点击了分享后执行的回调函数
     }
    });
   });
   wx.error(function (res) {
    console.log('验证失败返回的信息:', res);
   });
  } else {
   console.log(res.data.message);
  }
 })
 }
// home.vue

 import * as wechatJS from '@/utils/wechat' // 引入wechat.js

// 写在方法中调用,或者在生命周期中调用
let _param = {
 studentId: 1, // 个人项目而定
 activityId: 1, // 个人项目而定
 url: window.location.href, // 当前页面url
 title: "为我点赞,一起免费抢考拉阅读VIP会员卡,畅读一万本好书~", // 分享数据配置
 desc: "孩子要读书,上考拉阅读", // 分享数据配置
 link: _nowUrl, // 分享数据配置
 imgUrl: url, // 分享数据配置 -- 全路径
 type: "link", // 分享类型,music、video或link,不填默认为link
 dataUrl: " ", // 如果type是music或video,则要提供数据链接,默认为空

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

相关文章

  • vue3 v-bind="$attrs"继承组件全部属性的解决方案

    vue3 v-bind="$attrs"继承组件全部属性的解决方案

    这篇文章主要介绍了vue3 v-bind=“$attrs“ 继承组件全部属性的解决方案,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • vue实现div单选多选功能

    vue实现div单选多选功能

    这篇文章主要为大家详细介绍了vue实现div单选多选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07
  • 详细聊聊vue组件是如何实现组件通讯的

    详细聊聊vue组件是如何实现组件通讯的

    组件间通信简单来说就是组件间进行数据传递,就像我们日常的打电话,就是通讯的一种方式,下面这篇文章主要给大家介绍了关于vue组件是如何实现组件通讯的相关资料,需要的朋友可以参考下
    2022-05-05
  • 用vuex写了一个购物车H5页面的示例代码

    用vuex写了一个购物车H5页面的示例代码

    本篇文章主要介绍了用vuex写了一个购物车H5页面的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • vue element 生成无线级左侧菜单的实现代码

    vue element 生成无线级左侧菜单的实现代码

    这篇文章主要介绍了vue element 生成无线级左侧菜单的实现代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • 深入了解Vue.js中的Vuex状态管理模式

    深入了解Vue.js中的Vuex状态管理模式

    Vuex是Vue.js的官方状态管理模式,它为Vue.js应用程序提供了一个集中式的状态管理解决方案,Vuex可以帮助我们管理应用程序中所有组件的状态,使得状态管理变得更加简单和可靠,需要详细了解可以参考下文
    2023-05-05
  • Vue中计算属性和监听属性及数据的响应式更新和依赖收集基本原理讲解

    Vue中计算属性和监听属性及数据的响应式更新和依赖收集基本原理讲解

    computed是vue的配置选项,它的值是一个对象,其中可定义多个计算属性,每个计算属性就是一个函数,下面这篇文章主要给大家介绍了关于vue中计算属性computed的详细讲解,需要的朋友可以参考下
    2023-03-03
  • Vue3.0版本强势升级点特性详解

    Vue3.0版本强势升级点特性详解

    这篇文章主要介绍了Vue3.0版本强势升级点特性详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪<BR>
    2022-06-06
  • element-ui使用导航栏跳转路由的用法详解

    element-ui使用导航栏跳转路由的用法详解

    今天小编就为大家分享一篇element-ui使用导航栏跳转路由的用法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)

    你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)

    这篇文章主要介绍了你不知道的Vue技巧之--开发一个可以通过方法调用的组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论