专栏首页考拉阅读前端团队vue + 微信二次分享/自定义分享

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之后,安卓机也可以正常分享。
  1. 判断当前客户端版本是否支持指定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可以在这里更新签名。 });


⚠️需要注意的点

  1. 通过后端的接口获取微信配置的参数时,需要传递当前页面url - url(当前网页的URL,不包含#及其后面部分),如果没有#,则需要传递完整的url - url需要编码 encodeURIComponent(url)
  2. 代码如下
//  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,则要提供数据链接,默认为空
}

已上 有什么不清楚的,或者需要纠正的,欢迎留言~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 记录一次开发微信网页分享

    最近在做一个项目需求,分享领好书活动,获取用户的个人信息以及unionID,并诱导用户分享给好友或朋友圈,达到裂变拉新的目的。在做的过程中遇到了一些坑的地方,所...

    super.x
  • 【算法解析LeetCode by Javascript】23. 合并K个排序链表

    我们只需要把相邻列表进行合并,这样的话我们只需要进行logN次操作就可以把列表归并成一个有序列表

    super.x
  • H5小游戏 【篇一】 组词游戏

    super.x
  • 聊聊nacos-sdk-go的NamingClient

    nacos-sdk-go-v0.3.2/clients/naming_client/naming_client.go

    codecraft
  • 聊聊nacos-sdk-go的NamingClient

    nacos-sdk-go-v0.3.2/clients/naming_client/naming_client.go

    codecraft
  • [数据知识]DAMA数据管理—数据管理概述

    "数据小兵认为"书中并未提及"运营"管理,"数据管理"如果作为组织体中的常设机构,应在企业组织结构中有明确的职能定位,作为职能部门应与企业的日常运营管理紧密集合...

    CDO首席数据官
  • vmalloc函数

    kmalloc、vmalloc和malloc这三个常用的API函数具有相当的分量,三者看上去很相似,但在实现上大有讲究。kmalloc基于slab分配器,sla...

    233333
  • 玩转nodeJS系列:使用cluster创建nodejs单机多核集群(多进程)

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    eguid
  • 不存在所谓的机器学习平台!

    在过去这几年,你可能注意到了供应商们以越来越快的步伐推出服务于AI生态系统的“平台”,即满足数据科学和机器学习的需求。“数据科学平台”和“机器学习平台”在竞相吸...

    物流IT圈
  • salt扩展与python脚本

    py3study

扫码关注云+社区

领取腾讯云代金券