H5在微信浏览器中分享好友和朋友圈

H5在微信浏览器中分享好友和朋友圈

[网页授权流程分为四步:

  1. 在公众号平台配置安全域名

  2. 安装引入weixin-js-sdk

  3. 初始化配置

  4. 分享操作

  5. 注意事项

1.在公众号平台配置安全域名

  • 在微信公众号请求用户网页授权之前,开发者需要先到公众平台官网中的「设置与开发」-「功能设置」-「网页授权域名」的配置选项中,修改授权回调域名。请注意,这里填写的是域名(是一个字符串),而不是URL,因此请勿加 http:// 等协议头;

2.安装引入weixin-js-sdk

css 复制代码
npm i weixin-js-sdk
javascript 复制代码
import jweixin from 'weixin-js-sdk'

3.初始化配置

通过请求后端接口,传递当前要使用分享功能的页面url, 后端返回签名,再设置配置

javascript 复制代码
onLoad((e) => {
    initWeixinShareConfig()
})
const  initWeixinShareConfig = (options = {})=> {
    let _this = this;
    //动态获取当前的页面链接并且确保链接后面不能有#号
    let linkUrl = window.location.href.split("#")[0];
    //获取请求服务端获取签名信息
    request.request({
        url: '/xxx/xx',   后端接口
        method: 'POST',
        data:{
            url: linkUrl
        },
        success: (res) => {
            if (res.data.code==0) {
              //配置
              jweixin.config({
                debug: false, //根据服务端来控制是否开启调试模式
                appId: res.data.data.appId,
                timestamp: res.data.data.timestamp,
                nonceStr: res.data.data.nonceStr,
                signature: res.data.data.signature,
                jsApiList: ['updateAppMessageShareData','updateTimelineShareData'],
              });
            }
        }
    });
}
javascript 复制代码
//定义设置分享数据方法
const setShareInfo = (options)=>{
    //分享的触发动作必须写再ready里面
    jweixin.ready(() => {
      //配置分享数据
      let shareData = {
        title: options.title || "",  //分享的标题
        desc: options.desc || "",  //分享的描述
        link: options.link,   //分享的链接
        imgUrl: options.imgUrl || "", //分享的图片链接
        success(response) {
          //配置成功之后的回调(并不是分享成功之后的回调,这个地方是个坑,要注意下)
        },
      };
      //分享给朋友接口
      jweixin.updateAppMessageShareData(shareData);
      //分享到朋友圈接口
      jweixin.updateTimelineShareData(shareData);
    });
    cusShare?.value?.open('top')
}

//调用设置分享数据方法
const options = {
    title: "test" || "",  //分享的标题
    desc: "我发布了视频,快来看看吧",  //分享的描述
    link:"https://www.baidu.com" || "",
    imgUrl: "xxx" || "", //分享的图片链接
}
setShareInfo(options)

4.分享操作

进行过上边的操作,我们就可以点击右上角三个点进行朋友或朋友圈分享

5.注意事项

微信 JS 接口签名校验工具

  • 微信通过这种"www.baidu.com" 的url链接进入的,再分享,会只分享出一个url长链接,而不是卡片形式。解决办法:将其url链接发送给任意公众号,点击链接进入,再进行分享,即可正常卡片形式
相关推荐
如若1233 分钟前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~1 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语1 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport1 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
brrdg_sefg1 小时前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全
胡西风_foxww1 小时前
【es6复习笔记】rest参数(7)
前端·笔记·es6·参数·rest
m0_748254881 小时前
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
前端·vue.js·elementui
星就前端叭2 小时前
【开源】一款基于Vue3 + WebRTC + Node + SRS + FFmpeg搭建的直播间项目
前端·后端·开源·webrtc
m0_748234522 小时前
前端Vue3字体优化三部曲(webFont、font-spider、spa-font-spider-webpack-plugin)
前端·webpack·node.js
Web阿成2 小时前
3.学习webpack配置 尝试打包ts文件
前端·学习·webpack·typescript