微信公众号h5 微信分享朋友 分享给朋友圈 分享给朋友

微信公众号h5 微信分享朋友 分享给朋友圈 分享给朋友

我是在APP.vue里面引入的

1. 首先下载 微信jssdk
   npm install weixin-js-sdk -seve
2. 在app.vue里面引入
   import wx from ‘weixin-js-sdk’
3. 然后请求后端的签名接口

<script>
  import { zhou } from '@/api'    // 此处是引入的后端的签名接口
  import wx from 'weixin-js-sdk'    // 此处是引入的微信jssdk

  export default {
    name: 'App',
    data() {
      return {}
    },
    created() {},
    mounted() {
      this.getM01()
    },
    methods: {
      getzhou() {
        zhou({
          signurl: window.location.href.split('#')[0],    //   这里我用的路由模式是hash  所以只传#号前面的链接就行了    使用路由模式 history的话需要链接上的全部参数    signurl: window.location.href。
        }).then((res) => {
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.resBody.appid, // 必填，公众号的唯一标识            // 这里填你们后端返回的appid
            timestamp: res.resBody.timestamp, // 必填，生成签名的时间戳          // 这里填你们后端返回的生成签名的时间戳
            nonceStr: res.resBody.nonceStr, // 必填，生成签名的随机串               // 这里填你们后端返回的生成签名的随机串 
            signature: res.resBody.signature, // 必填，签名                      // 这里填你们后端返回的签名
            jsApiList: [
              'scanQRCode',
              'closeWindow',
              'chooseImage',
              'getLocalImgData',
              'updateAppMessageShareData',
              'updateTimelineShareData',
              'chooseWXPay',
              'getLocation',
              'onMenuShareTimeline',
              'onMenuShareAppMessage',
            ], // 必填，需要使用的JS接口列表
          })
          wx.ready(function () {
            wx.checkJsApi({
              jsApiList: [
                'scanQRCode',
                'closeWindow',
                'chooseImage',
                'getLocalImgData',
                'updateAppMessageShareData',
                'updateTimelineShareData',
                'chooseWXPay',
                'getLocation',
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
              ], // 需要检测的 JS 接口列表，所有 JS 接口列表见附录2,
              success: function (res) {
                console.log('wxJsApi success:', res)
              },
              fail: (err) => {
                console.log('wxJsApi fail:', err)
              },
            })
            // config信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中。
          })
        })
      },
    },
  }
</script>

以下进入分享实例 在你需要分享的页面里写入这些代码 （重要）

1. 首先还是引入微信的jssdk
   import wx from ‘weixin-js-sdk’
   下面就是分享的重要代码

  wx.ready(() => {
            //需在用户可能点击分享按钮前就先调用
            if (wx.updateAppMessageShareData) {  // 很多人疑惑了 这里我为什么要进行一个if判断看最下面
              console.log(res.resBody.item_name)
              wx.updateAppMessageShareData({
                //分享给朋友及分享到QQ
                title: this.goodsList.item_name,
                desc: this.goodsList.item_name,
                link: `需要分享出去的链接`,
                imgUrl: this.goodsList.pic_url,
                trigger: () => {
                  console.log('点击分享')
                },
                success: () => {
                  console.log('分享成功')
                },
                cancel: () => {
                  console.log('分享取消')
                },
                fail: () => {
                  console.log('分享失败')
                },
              })
            } else {
              console.log(this.goodsList.item_name)
              wx.onMenuShareAppMessage({
                //分享给朋友及分享到QQ
                title: this.goodsList.item_name,
                desc: this.goodsList.item_name,
                link: `需要分享出去的链接`,
                imgUrl: this.goodsList.pic_url,
                trigger: () => {
                  console.log('点击分享')
                },
                success: () => {
                  console.log('分享成功')
                },
                cancel: () => {
                  console.log('分享取消')
                },
                fail: () => {
                  console.log('分享失败')
                },
              })
            }
            if (wx.updateTimelineShareData) {
              wx.updateTimelineShareData({
                //分享到朋友圈及分享到QQ空间
                title: this.goodsList.item_name,
                link: `需要分享出去的链接`,
                imgUrl: this.goodsList.pic_url,
                trigger: () => {
                  console.log('点击分享')
                },
                success: () => {
                  console.log('分享成功')
                },
                cancel: () => {
                  console.log('分享取消')
                },
                fail: () => {
                  console.log('分享失败')
                },
              })
            } else {
              wx.onMenuShareTimeline({
                //分享到朋友圈及分享到QQ空间
                title: this.goodsList.item_name,
                link: `需要分享出去的链接`,
                imgUrl: this.goodsList.pic_url,
                trigger: () => {
                  console.log('点击分享')
                },
                success: () => {
                  console.log('分享成功')
                },
                cancel: () => {
                  console.log('分享取消')
                },
                fail: () => {
                  console.log('分享失败')
                },
              })
            }
          })
        

讲解一下上面代码中的if判断

if (wx.updateAppMessageShareData)
这个判断是判断的是否是true 这个true代表的有这个方法 有的手机机型不支持最新的微信分享方法 所以需要使用到老的微信分享的方法
如果有这个 就走最新的微信分享的方法

以上就是我的微信分享