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(
         '分享标题',
         '分享简介',
         '分享地址',
         '分享封面'
       )
  • 相关阅读:
    【转】关于维生素的那些事
    【转】MaBatis学习---源码分析MyBatis缓存原理
    【转】Spring学习---Bean配置的三种方式(XML、注解、Java类)介绍与对比
    【转】Java学习---垃圾回收算法与 JVM 垃圾回收器综述
    Qt 中的对象模型(Object Model)
    The Property System
    Qt--core模块概述
    QtCore概述
    在Android Studio中下载Android SDK的两种方式(Android Studio3.0、windows)
    同一个进程的多个线程堆栈共享状况
  • 原文地址:https://www.cnblogs.com/lanshengzhong/p/9995876.html
Copyright © 2011-2022 走看看