微信公众号 H5 jssdk 分享卡片功能实现(亲测使用)

1,下载安装js-sdk uni-app包中直接cmd安装

npm install weixin-js-sdk

2,当前要设置页面引入(此时路径根据你当前项目为准 找js文件)

import wx from '@/node_modules/jweixin-module/lib/index.js'

3,调用后台接口使用 在onShow 周期函数中

 urlSdk 你当前网页的url地址 不传#号

 var urlSdk = window.location.href.split('#')[0] 标准写法

 SetwechatStart 是一个函数

onShow() {
      var _this = this
      var urlSdk = window.location.href.split('#')[0]
      _this.urlSdk = urlSdk

      uni.request({
        url: "", //后端请求地址
        method: "GET",
        data: {
          url: urlSdk
        },
        success(res) {
          console.log(res, "dfdfjdfjdjif");
          _this.sdkList = res.data
          _this.SetwechatStart(_this.sdkList)


        }
      })


    },

4,SetwechatStart函数中书写的分享

 SetwechatStart(obj) {
        wx.config({
          debug: false, // true时,手机微信环境访问会alert一些errmsg信息,如果显示errmsg:ok表示正常,否认表示出了问题
          appId: '微信公众号的AppId', // 必填,公众号的唯一标识
          timestamp: '', // 后台返回的数据中取
          nonceStr: '', // 后台返回的数据中取
          signature: '', // 后台返回的数据中取
          jsApiList: ["updateTimelineShareData", "updateAppMessageShareData"] // 必填,需要使用的JS接口列表
        })
        // 需在用户可能点击分享按钮前就先调用,说白了就是放在文章详情信息读取完后就可以执行下面的wx.ready()方法
        wx.ready(function() {
          // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
          wx.updateAppMessageShareData({
            title: '嶂石岩景区', // 分享标题
            desc: '旅游景区', // 分享描述
            link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: "https://image.jkxds.net/images/unlimited/20220623/d4ef2bed-9463-4297-aea6-8b5a352c01d0.jpg", // 分享图标
            success: function() {
              // 设置成功
              console.log("updateAppMessageShareData", "设置成功");
            }
          })
          // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
          wx.updateTimelineShareData({
            title: '嶂石岩景区', // 分享标题
            link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: "https://image.jkxds.net/images/unlimited/20220623/d4ef2bed-9463-4297-aea6-8b5a352c01d0.jpg", // 分享图标
            success: function() {
              // 设置成功
              console.log("updateAppMessageShareData", "设置成功");

            }
          })
        })
      },

 欢迎大家评论区提意见 这个功能就这么简单兄弟们 加油

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序公众号H5分享卡片是指在微信公众号平台上,通过小程序或H5页面来创建可分享卡片。这种分享卡片可以包含各种信息,如标题、描述、图片、链接等,用于吸引用户点击并进入小程序或H5页面。 在微信小程序中,我们可以通过设置小程序的分享参数来生成分享卡片。开发者可以在小程序的代码中,通过调用相关API来设置分享标题、描述和图片等信息,当用户点击分享按钮时,系统会自动根据设置生成分享卡片供用户分享到朋友圈、好友等渠道。 而在微信公众号H5页面中,我们可以使用微信提供的JSSDK实现分享功能。开发者可以在H5页面中引入微信提供的JSSDK使用,在页面加载完成后,通过调用相关API来设置分享标题、描述和图片等信息。当用户点击分享按钮时,系统会调用微信的接口生成分享卡片供用户分享。 通过微信小程序公众号H5分享卡片,用户可以将自己喜欢的小程序或H5页面分享给朋友,让朋友也能够体验到这些应用的功能。而对于开发者来说,分享功能可以增加应用的曝光度和用户量,提高用户参与度和用户粘性。 总之,微信小程序公众号H5分享卡片是一种方便快捷地实现小程序或H5页面分享功能的方式,能够帮助用户分享他们感兴趣的内容,也能够帮助开发者提升应用的影响力和用户数量。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值