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

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

  1. Vue项目history模式下微信分享总结

    原文 : http://justyeh.top/post/39/ 2019-07-02 Vue微信分享 每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信 ...

  2. vue history模式 ios微信分享坑

    vue history模式 ios微信分享坑 问题分析:因为苹果分享会是调取签名失败是因为:苹果在微信中浏览器机制和安卓不同,有IOS缓存问题,和IOS对单页面的优化问题,通俗点说安卓进行页面跳转分享 ...

  3. 在nginx上部署vue项目(history模式);

    在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...

  4. 在nginx上部署vue项目(history模式)--demo实列;

    在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是讲的都是理论,所以今天做个demo来实战下.有必要让大家更好的理解,我发现搜索这类似的问题还是挺多的,因此在写一篇 ...

  5. vue history模式 ios微信分享 踩过的坑

    背景:教育项目,整体依赖于微信环境,涉及到微信分享.微信二次分享 问题:vue使用history模式在iso微信下分享设置出错(签名认证错误.分享设置失败) 问题发现路径 1.按照微信公众号官方文档设 ...

  6. nginx反向代理部署vue项目(history模式)的方法

    前言: 根据标题我们要区分出两个信息 1. history 模式部署 ( vue的路由模式如果使用history,刷新会报404错误.) 2. Nginx 做反向代理 问题1思考: vue-route ...

  7. vue hash模式下微信分享后打开首页,三种完美解决方案

    微信分享功能给我们带来了很大的便利,使得基于微信开发出来的 H5 页面可以很好的通过微信平台进行传播.所以呢,基本上每个基于微信开发的 H5 都会集成微信分享功能.但是,前几天在对接微信分享 API ...

  8. Vue项目History模式404问题解决

    本文主要解决Vue项目使用History模式发布到服务器Nginx上刷新页面404问题.(由于每个项目的情况都不尽相同,本方案已经完美解决本在所使用项目,具体情况可能还需要修改.) 1.项目背景分析 ...

  9. vue路由history模式下打包node服务器配置

    vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...

随机推荐

  1. 阶段3 2.Spring_02.程序间耦合_7 分析工厂模式中的问题并改造

    循环打印 工厂了的打印先注释掉 打印出来了5次对象. 打印数字i同时,让i++操作.为了看他被常见了几次实例 调用保存的方法 没个都想都有一个唯一的实例.在创建对象的时候,重新初始化了i的值.所以i每 ...

  2. [不错]A step-by-step guide to enabling security, TLS/SSL, and PKI authentication in Elasticsearch

    Now posted on the Elastic blog December 12, 2018 update: This article has been published on Elastic’ ...

  3. 【Python开发】【神经网络与深度学习】网络爬虫之图片自动下载器

    python爬虫实战--图片自动下载器 之前介绍了那么多基本知识[Python爬虫]入门知识(没看的赶紧去看)大家也估计手痒了.想要实际做个小东西来看看,毕竟: talk is cheap show ...

  4. CountDownLatch与CyclicBarrier的对比

    CountDownLatch: CountDownLatch通过计数器来实现,计数器表示线程的数量.每当一个线程执行结束后,计数器的值就会减1,并在await方法处阻塞.一旦计数器为0,所有阻塞的线程 ...

  5. tableau单机版安装

    参考: https://help.tableau.com/current/server-linux/zh-cn/requ.htm   先将服务器防火墙80级8850端口打开 临时关闭SELinux/防 ...

  6. poj1061(扩展欧基里德定理)

    题目链接:https://vjudge.net/problem/POJ-1061 题意:在一个首位相接的坐标轴上,A.B开始时分别位于X,Y处,每个单位时间向右移动m,n米,问是否能相遇,坐标轴长L. ...

  7. SQLSERVER 秘钥整理

    SQLSERVER 2017 Enterprise Core 6GPYM-VHN83-PHDM2-Q9T2R-KBV83 Developer ---- Enterprise TDKQD-PKV44-P ...

  8. [转帖]RSA算法与DSA算法的区别

    RSA算法与DSA算法的区别 https://cloud.tencent.com/developer/news/254061 文章来源:企鹅号 - SuperFullStack 本文译自:StackE ...

  9. 2015沈阳区域赛Meeting(最短路 + 建图)

    Meeting Time Limit: 12000/6000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Total ...

  10. 【6.28校内test】T1 Jelly的难题1

    Jelly的难题[题目链接] 废话一句:今天中考出成绩,感觉大家考的都超级棒,不管怎样,愿大家成为最好的自己. 好了废话完了,下面是题解部分: SOLUTION: 首先你可能发生的,是看不懂题: 定睛 ...