zoukankan      html  css  js  c++  java
  • vue项目history模式下微信分享相关问题

    import wx from '@/utils/wx'
    import { shareApi } from '@/api'
    
    // 微信验证
    export function requireConfig() {
      let url = window.location.href
    
      shareApi.share({
        url: url
      }).then(res => {
        if (res.code === 200) {
          wx.config({
            debug: false,
            appId: res.data.appid, // 必填,企业号的唯一标识,此处填写企业号corpid
            timestamp: res.data.timestamp, // 必填,生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
            signature: res.data.signature, // 必填,签名,见附录1
            jsApiList: [
              'onMenuShareTimeline',
              'onMenuShareAppMessage'
            ]
          })
        }
      })
    }
    
    // 验证分享
    export function requireShare(title, desc, link, imgUrl) {
      let u = navigator.userAgent
      // 安卓需要重新验证
      if (u.indexOf('Android') > -1) {
        requireConfig()
      }
    
      wx.ready(function() {
        // 分享给朋友
        wx.onMenuShareAppMessage({
          title: title, // 分享标题
          desc: desc, // 分享描述
          link: `http://share.tcm317.com${link}`, // 分享链接
          imgUrl: imgUrl, // 分享图标
          type: '', // 分享类型,music、video或link,不填默认为link
          dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
          success: function() {
            // 用户确认分享后执行的回调函数
          },
          cancel: function() {
            // 用户取消分享后执行的回调函数
          }
        })
        // 分享给朋友圈
        wx.onMenuShareTimeline({
          title: title, // 分享标题
          link: `http://share.tcm317.com${link}`, // 分享链接
          imgUrl: imgUrl, // 分享图标
          success: function() {
            // 用户确认分享后执行的回调函数
          },
          cancel: function() {
            // 用户取消分享后执行的回调函数
          }
        })
      })
    }

    APP.vue

    <template>
      <div id="app">
        <router-view/>
      </div>
    </template>
    
    <script>
    import { requireConfig } from '@/utils'
    
    export default {
      data() {
        return {
    
        }
      },
      mounted() {
        requireConfig()
      },
      methods: {
    
      }
    }
    </script>
    
    <style lang="scss">
    
    </style>

    需要分享的页面

      requireShare(
         '分享标题',
         '分享简介',
         '分享地址',
         '分享封面'
       )
  • 相关阅读:
    tyvjP1078
    红黑树笔记
    红黑树插入代码学习
    tyvjP1082找朋友
    牛棚回声USACO OCT09 3RD
    每日参悟
    全排列学习
    学习1.2
    学习笔记1.1
    学习笔记1.3
  • 原文地址:https://www.cnblogs.com/lanshengzhong/p/9995876.html
Copyright © 2011-2022 走看看