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(
'分享标题',
'分享简介',
'分享地址',
'分享封面'
)
vue项目history模式下微信分享相关问题的更多相关文章
- Vue项目history模式下微信分享总结
原文 : http://justyeh.top/post/39/ 2019-07-02 Vue微信分享 每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信 ...
- vue history模式 ios微信分享坑
vue history模式 ios微信分享坑 问题分析:因为苹果分享会是调取签名失败是因为:苹果在微信中浏览器机制和安卓不同,有IOS缓存问题,和IOS对单页面的优化问题,通俗点说安卓进行页面跳转分享 ...
- 在nginx上部署vue项目(history模式);
在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...
- 在nginx上部署vue项目(history模式)--demo实列;
在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是讲的都是理论,所以今天做个demo来实战下.有必要让大家更好的理解,我发现搜索这类似的问题还是挺多的,因此在写一篇 ...
- vue history模式 ios微信分享 踩过的坑
背景:教育项目,整体依赖于微信环境,涉及到微信分享.微信二次分享 问题:vue使用history模式在iso微信下分享设置出错(签名认证错误.分享设置失败) 问题发现路径 1.按照微信公众号官方文档设 ...
- nginx反向代理部署vue项目(history模式)的方法
前言: 根据标题我们要区分出两个信息 1. history 模式部署 ( vue的路由模式如果使用history,刷新会报404错误.) 2. Nginx 做反向代理 问题1思考: vue-route ...
- vue hash模式下微信分享后打开首页,三种完美解决方案
微信分享功能给我们带来了很大的便利,使得基于微信开发出来的 H5 页面可以很好的通过微信平台进行传播.所以呢,基本上每个基于微信开发的 H5 都会集成微信分享功能.但是,前几天在对接微信分享 API ...
- Vue项目History模式404问题解决
本文主要解决Vue项目使用History模式发布到服务器Nginx上刷新页面404问题.(由于每个项目的情况都不尽相同,本方案已经完美解决本在所使用项目,具体情况可能还需要修改.) 1.项目背景分析 ...
- vue路由history模式下打包node服务器配置
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...
随机推荐
- spring aop影响dubbo返回值问题解决
问题描述: dubbo服务已经注册,客户端调用提供者服务返回值为空.(考虑动态代理.aop的返回值影响,dubbo基于spring2.5.6.SEC03,本次开发使用的是spring4.3.8) 解决 ...
- P3367 【模板】并查集
喵呜~~(题面) 这题其实很早就过了,但是呢,以前过的时候真的基本上是CtrlC+CtrlV,这次把代码重新码了一遍,对并查集也有了一个基本清晰的认识 #include<iostream> ...
- eureka配置参数
org.springframework.cloud.netflix.eureka.EurekaClientConfigBean 参数名称 说明 默认值 eureka.client.enabled 用于 ...
- squid的三种模式
一.squid代理服务器概述: 概述:Squid Cache(简称为Squid)是http代理服务器软件.Squid用途广泛,可以作为缓存服务器也可以作为缓存代理服务器,代理用户向web服务器请求数据 ...
- Akka系列(六):Actor解决了什么问题?
前言..... 文档来源于 : What problems does the actor model solve? Actor解决了什么问题? Akka使用Actor模型来克服传统面向对象编程模型的 ...
- 【Linux 驱动】简单字符设备驱动架构(LED驱动)
本文基于icool210开发板,内核版本:linux2.6.35: 驱动代码: (1)头文件:led.h #ifndef __LED_H__ #define __LED_H__ #define LED ...
- 洛谷 P2331 最大子矩阵 题解
题面 对于m==1和m==2两种状态进行不同的dp: 设sum[i][1]表示第一列的前缀和,sum[i][2]表示第二列的前缀和: sum[i][1]=sum[i-1][1]+a[i][1]; su ...
- centos7下安装phpmyadmin
安装环境 在同一台主机上部署LAMP Linux( CentOS 7.3 ) .Apache(httpd2.4).MariaDB(5.5).PHP(7.2) 主机IP:192.168.137.200 ...
- 均值滤波器(平滑空间滤波器)基本原理及Python实现
1. 基本原理 使用元素的领域内像素的平均值代替该元素,可明显的降低图像灰度的尖锐变换.它的一种重要应用是模糊处理:得到感兴趣的区域的粗略表示,将次要的/小的元素与背景融合,使得主要的/较大的元素变得 ...
- 小白学习django第三站-自定义过滤器及标签
要使用自定义过滤器和标签,首先要设置好目录结构 现在项目目录下建立common的python包 再将common加入到setting.py中的INSTALLED_APP列表中 在common创建目录t ...