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(
     ‘分享标题‘,
     ‘分享简介‘,
     ‘分享地址‘,
     ‘分享封面‘
   )

原文地址:https://www.cnblogs.com/lanshengzhong/p/9995876.html

时间: 2024-07-31 17:23:00

vue项目history模式下微信分享相关问题的相关文章

vuex项目history模式下404问题的解决方案

在 ” etc/nginx/conf.d/  “路径下修改你的当前项目的conf文件 在location中添加,下文中加粗部分的代码,实现重写路径,以避免出现404. location / { root /root/www/dist; index index.html index.htm; if (!-e $request_filename) { rewrite ^/(.*) /index.html last; break; } } 其他解决方案请参考 https://blog.csdn.net

VUE的history模式下除了index外其他路由404报错

location / {index index.html;root /dist;try_files $uri $uri/ /index.html;}try_files首先会判断他是文件,还是一个目录,结果发现他是文件,与第一个参数 $uri变量匹配.然后去到网站目录下去查找文件是否存在,如果存在直接读取返回.如果不存在直接跳转到第三个参数. 现在不明白的是既然跳到了index为什么显示的还是路由后的界面 原文地址:https://blog.51cto.com/14207669/2431296

Laravel+vue实现history模式URL可行方案

项目:laravel + vue 实现前后端分离.vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. hash URL 例如:http://yoursite.com/#/user/id. history 模式时,URL就像正常的 url,例如 http://yoursite.com/user/id. 没有特别的要求的话,hash模式亦正常访问.好嘛,产品要求URL要像正常那样的 -- history模

vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 &quot;invalid signature&quot;错误解决方案

项目背景 vue-cli生成的单页面项目,router使用history模式.产品会在公众号内使用,需要添加微信JSSDK,做分享相关配置. 遇到的问题 相关配置与JS接口安全域名都已经ok,发布后,pc端微信开发者工具与Android手机 内测试分享都没问题,无论怎么跳转再分享也没问题.IOS 手机,首次到页面分享没问题,但是跳转后,就会报invalid signature 签名错误. 就是说 从 [http://aaa.com/index] 跳到 [http://aaa.com/detail

vue history模式下出现空白页情况

问题描述:   vue搭建的项目,路由一直用的hash模式,所以url中都会带有一个“#”号.现在想要去掉“#”,于是使用history模式 { mode: 'history' },代码如下: import Vue from 'vue'; import App from './App'; import routers from './router'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const router = ne

微信分享相关

一.微信js-SDK说明文档 1.概述 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.卡券.支付等微信特有的能力,为微信用户提供更优质的网页体验. 此文档面向网页开发者介绍微信JS-SDK如何使用及相关注意事项 2.JSSDK使用步骤 2.1步骤一:绑定域名 先登录微信公众平台进入"公众号设置"的"功能设置&quo

vue项目在IE下报 [vuex] vuex requires a Promise polyfill in this browser问题

如下图所示,项目在IE11下打开报错: 因为使用了 ES6 中用来传递异步消息的的Promise,而IE浏览器都不支持. 解决方法: 第一步: 安装 babel-polyfill . babel-polyfill可以模拟ES6使用的环境,可以使用ES6的所有新方法 $ npm install --save babel-polyfill npm WARN ajv[email protected] requires a peer of [email protected]^6.0.0 but none

Vue路由History模式打包后页面空白,刷新404

项目的入口文件index.html直接在服务器访问地址的根目录下,即项目独占一个端口 vue中配置保持不变 nginx中配置如下: server { listen 8899; server_name localhost; location / { try_files $uri $uri/ /index.html; } } 第二种就是 # 打包配置 config-index.js 修改路径: assetsPublicPath: './'; # 前端路由配置 router.js: const rou

vue项目windowServer nginx下部署

https://www.cnblogs.com/jiangwangxiang/p/8481661.html nginx下载地址 http://nginx.org/en/download.html 下载nginx后 ,在目录下cmd   执行 nginx.exe 在进程中查看是否启动nginx.  关闭nginx   ,也要到进程中关闭.' 2.参考  打包本地的vue项目文件,在html目录下创建文件夹zic,然后把打包好的 dist 目录下的 static文件夹和index.html放入到zi