vue weixin-js-sdk进行微信分享_vue单页面应用做微信jssdk分享-程序员宅基地

技术标签: vue  js  

第一步:安装weixin-js-sdk   

 

npm install weixin-js-sdk

第二步:

在assets文件下新建个common文件夹 ,然后再新建个utils.js文件

import wx from "weixin-js-sdk";

/*
* 微信分享
* 获取微信加签信息
* @param{data}:获取的微信加签
* @param{shareData}:分享配置参数
*/
export const wexinShare = (data, shareData) => {
	let appId = data.appId;
	let timestamp = data.timestamp;
	let nonceStr = data.nonceStr;
	let signature = data.signature;
	wx.config({
		debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
		appId: appId, // 必填,公众号的唯一标识
		timestamp: timestamp, // 必填,生成签名的时间戳
		nonceStr: nonceStr, // 必填,生成签名的随机串
		signature: signature, // 必填,签名,见附录1
		jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
	});
	wx.ready(function () {
		//分享到朋友圈”及“分享到QQ空间”
		wx.updateTimelineShareData({
			title: shareData.title, // 分享标题
			link: shareData.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			imgUrl: shareData.imgUrl, // 分享图标
			success: function (res) {
				// 设置成功
				// console.log("分享成功返回的信息为:", res);
			}
		})

		//“分享给朋友”及“分享到QQ”
		wx.updateAppMessageShareData({
			title: shareData.title, // 分享标题
			desc: shareData.desc, // 分享描述
			link: shareData.link, // 分享链接
			imgUrl: shareData.imgUrl, // 分享图标
			success: function (res) {
				// console.log("分享成功返回的信息为:", res);;
			}
		})

	});
	wx.error(function (res) {
		// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
		console.log('验证失败返回的信息:', res);
	});
}

 第三步:调用

import {wexinShare} from "@/common/utils.js";
//请求微信配置参数接口(获取签名),由后台给接口给
get_share(){
    var that = this;
    var urls = that.$qs.stringify(window.location.href.split('#')[0]);
    
    //看后台请求接口是get/post
    that.$axios.post("/xxx",urls).then((res) => {
       if (res.data) {
	    //微信加签
	    var obj = {
		    appId: res.data.appId,
		    nonceStr: res.data.nonceStr,
		    signature: res.data.signature,
		    timestamp: res.data.timestamp
	    }
	    //分享数据,这段主要是为了在hash模式下分享出去的链接不被浏览器截取,保证完全把链接分享出去
	    var shareWxLink = window.location.href.split('#')[0] + 'static/redirect.html?redirect=' + encodeURIComponent(window.location.href) + '&pid_uid=' + userinfo.uid;
	    // console.log('shareWxLink', shareWxLink)
	    let shareData = {
		    title: '标题', // 分享标题
		    link: shareWxLink,
		    imgUrl: 'http://xxx.jpg', // 分享图标
		    desc: '这里填写简介文字'
	    }
        //引用
	    wexinShare(obj, that, shareData);
	    } else {
		    that.$toast('获取sdk参数失败!');
	    } 

  })

}

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u014678583/article/details/106024611

智能推荐

stm32 里的0xFFFFFFul-程序员宅基地

文章浏览阅读3.3k次。表示常量类型的方法,就是放后面的;定义变量放前面。 “u”表示“unsigned”,无符号 “l”表示“long”,长整型 如果不加UL的话那就是默认的int型,UL后缀.也是一种强制转换方式.“SysTick_LOAD_RELOAD_Pos”代表“0” “SysTick_LOAD_RELOAD_Msk”代表“(0xFFFFFFul << SysTick_LOAD_RELOAD_Pos)”_0xfffffful

php正则替换首字符,php正则 字符怎么替换-程序员宅基地

文章浏览阅读77次。php正则 字符怎么替换2021-02-07 12:35:39php正则字符的替换方法:首先创建一个PHP示例文件;然后定义一个字符串;接着通过正则表达式“'/(\w+) (\d+), (\d+)/i'”将指定字符串进行替换即可。本文操作环境:windows7系统、PHP7.1版,DELL G3电脑。preg_replace 函数执行一个正则表达式的搜索和替换。语法mixed preg_repla..._php 判断开头的字符并替换

PyQT 跟我学做密码管理器(5)_pyqt-tool 密码-程序员宅基地

文章浏览阅读2.3k次。PyQT 跟我学做密码管理器(5) —— 备份数据到邮箱声明:本文借鉴https://blog.csdn.net/bigbennyguo/article/details/50755207 修改而来前言借鉴的文章是基于python2+pyqt4,本文是基于python3+pyqt5环境编辑器:Sublime Text3操作系统:win10Python3所需要的库:主要..._pyqt-tool 密码

浅谈Kaggle 当前算法趋势_kaggle 什么模型流行-程序员宅基地

文章浏览阅读1k次。浅谈Kaggle 当前算法趋势一年前我还在悉尼大学着实花费不少在房价预测的kaggle竞赛上,然而之后的一年,先是去聚宽做量化研究实习,接着在悉尼大学的最后一个学期我又抽风非要把商学院的物流方向读下来。于是好多次在kaggle上看到喜欢的竞赛头脑一热报了名,然后就没有然后了:(。近来回国找工作,同时考驾照(一直没考),终于有时间再看看kaggle。准备着手把喜欢的竞赛项目做一做,学一学;同时把..._kaggle 什么模型流行

【微信小程序】云开发+三级联动选择器_三级联动选择器 bed-程序员宅基地

文章浏览阅读1.2k次,点赞2次,收藏9次。目录前言一、数据结构二、Wxml代码三、关键JS代码(一)从数据库中获取数据(二)bindchange事件(三)bindcolumnchange事件(四)处理宿舍数据A.获取宿舍楼栋数据B.获取房号数据(数组与宿舍楼栋数组相对应)C.获取床位数据(数组与宿舍楼栋数组、房号数组相对应)四、整合(一)JS代码(二)Wxml..._三级联动选择器 bed

在linux上安装mysql,最全的安装过程_warning: file /usr/lib64/mysql/plugin/mysql_clear_-程序员宅基地

文章浏览阅读512次。安装linux系统下的mysql1.查看是否安装了mysql;rpm -qa |grep mysql #如果没有输出任何东西,证明没有安装2.找到liunx的版本,下载对应版本的mysql。cat /ect/redhat - release3.下载适合版本的文件来源。#获取我们的文件,通过在linux系统里输入命令和地址wget https://dev.mysql.com/get/mysql75-community-release-el8-1.noarch.rpm#通过找到mysql的官_warning: file /usr/lib64/mysql/plugin/mysql_clear_password.so: remove failed

随便推点

java中可以把代码做为返回值 参数吗_java中如何用函数返回值作为post提交的参数?...-程序员宅基地

文章浏览阅读100次。1.我想实现的功能是在java程序中导入HttpURLConnection类,然后将函数的值作为post方法要提交的参数,最后显示在显示台上。2.要用到的函数是自己写的可以显示实时计算机cpu、内存、硬盘利用率的一个方法,返回值是String.3.这是调用HttpURLConnection的代码> package com.httpclient;import java.io.BufferedR..._java返回结果了可以作为参数吗

JNI技术---clojure 调用C++库的方法_glpk c++-程序员宅基地

文章浏览阅读1.2k次。本文目的:加深理解—to JNI and clojure。JNI概述JNI,是Java Native Interface的缩写,中文为Java本地调用。 JavaTM Native Interface (JNI) is a standard programming interface for writing Java native methods and embedding the JavaTM_glpk c++

Scala中的Map操作_scala中map的用法-程序员宅基地

文章浏览阅读1.8k次。Scala中Map的常用方法_scala中map的用法

将一个浮点型的数通过串口发送出去_串口发浮点数-程序员宅基地

文章浏览阅读6.4k次,点赞19次,收藏85次。可能大家对发送字符串,整数,数组等待的没有问题,也想的明白,可是对于浮点型的数,或许有些不知所措(大佬绕过,小白我是这样)今天搞懂了,就记录下!其实发送原理还是通过字符串的形式发送出去的。只不过是我们将浮点型的数进行的拆解。ps:除运算与或运算不太懂的可以自己查查就可以了。假如一个浮点型的数 d = 25.6345879999我想将这个浮点型的数保留2位小数发送到串口,那我该怎么做呢?..._串口发浮点数

易语言PHP非对称加密,RSA非对称加密通信源码-程序员宅基地

文章浏览阅读573次。RSA非对称加密通信非对称加密是非常安全的一类加密算法TXQQ客户Duan的通信也用了椭圆曲线非对称加密(ECC)非对称加密算法需要两个密钥:公开密钥(publickey)和私有密钥(privatekey)。公开密钥与私有密钥是一对,如果用公开密钥对数据进行加密,只有用对应的私有密钥才能解密;如果用私有密钥对数据进行加密,那么只有用对应的公开密钥才能解密。因为加密和解密使用的是两个不同的密钥,所以..._易语言rsa算法

linux重定向文件输出到文件,【教程】linux 下重定向输入/输出到文件-程序员宅基地

文章浏览阅读879次。1. 引言今天考试遇到一个提交答案题,已经给出了答案检验器(已经编译了的,没有源码),但是手动输命令检验答案文件效率很低,我们最好是让检验器本来输出到屏幕的东西输出到文件,方便我们写程序自动检验。但是我们没有检验器源码,没法 freopen 怎么办呢 QvQ其实是 kb 提出了这个问题啦,下面我就来讲一下 linux(ubuntu)下的重定向输入/输出的方法。2. 输出重定向现在我们有个已经编译好..._重定向输出文件时怎么输出到文件的某一行