VUE项目引入微信JSSDK 实现微信自定义分享
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了VUE项目引入微信JSSDK 实现微信自定义分享,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3197字,纯文字阅读大概需要5分钟。
内容图文
![VUE项目引入微信JSSDK 实现微信自定义分享](/upload/InfoBanner/zyjiaocheng/1034/ed6d2cccc4754ce595d778f0065f6b60.jpg)
VUE项目引入微信JSSDK 实现自定义分享
前端vue、后端php
问题:后端获取config参数所需的url 需要和请求自定义分享页面url一致
一、微信公众号后台添加 js安全域名(白名单)
二、(前端) VUE引入微信JSSDK
1、yarn add weixin-js-sdk
或者npm install weixin-js-sdk --save-dev
2、封装wx分享功能
在asset中新建wx.js
import axios from "axios";
import wx from 'weixin-js-sdk';
//初始化微信sdk
const wxShowMenu = shareData => {
return new Promise((resolve, reject) => {
axios
.get("******") //请求你们公司后台的接口 获取相关的配置
.then(
res => {
var getMsg = res.data;
// console.log("微信配置----------")
wx.config({
debug: false, //生产环境需要关闭debug模式 测试环境下可以设置为true 可以在开发者工具中查看问题
appId: getMsg.appId, //appId通过微信服务号后台查看
timestamp: getMsg.timestamp, //生成签名的时间戳
nonceStr: getMsg.nonceStr, //生成签名的随机字符串
signature: getMsg.signature, //签名
jsApiList: [ //需要调用的JS接口列表
"updateAppMessageShareData", //自定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0) 新接口
"updateTimelineShareData", //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容(1.4.0) 老接口
"onMenuShareTimeline", //分享到朋友圈 老接口
"onMenuShareAppMessage",//分享给盆友 老接口
]
});
wx.error(function (res) {
//alert(JSON.stringify(res))
console.log(res)
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
wx.ready(function () {
wx.onMenuShareAppMessage({
title: shareData.tTitle,
link: shareData.timeLineLink,
imgUrl: shareData.imgUrl,
desc: shareData.tContent,
success: function () { }
});
wx.onMenuShareQQ({
title: shareData.tTitle,
link: shareData.timeLineLink,
imgUrl: shareData.imgUrl,
desc: shareData.tContent,
success: function () { }
});
wx.onMenuShareTimeline({
title: shareData.tTitle,
link: shareData.timeLineLink,
imgUrl: shareData.imgUrl,
success: function () { }
});
});
resolve(res);
},
err => {
reject(err);
}
);
});
};
export { wxShowMenu };
3、在要使用自定义分享的页面中引入wx.js,并自定义分享内容
import { wxShowMenu } from "../assets/wx";
//初始化分享信息
wxShareInfo(data) {
var vm = this;
var shareData = {
imgUrl: data.share_info.pic, //域名在白名单中
timeLineLink:data.share_info.url,//域名在白名单中
tTitle: data.share_info.title,
tContent: data.share_info.content
};
二、(后端)php生成config参数返回
没有使用前端传当前url的形式,直接获取了request 中的REFERER,一层请求可以。
如果有多层调用还是需要用传url的形式!url是页面完整的url,location.href.split(’#’)[0]为了排除微信自己添加的参数,encodeURIComponent处理后传给后端,后端再解析。
后端api接口
<?php
define("APPID","***");
define("APPSECRET","*****");
include_once('wx_js_sdk_http.php');
$ourl = $_SERVER['HTTP_REFERER'];
$jssdk = new JSSDK(APPID, APPSECRET,$ourl);
$signPackage = $jssdk->getSignPackage();
echo json_encode($signPackage);
wx_js_sdk_http.php之前写过php脚本式的获取方式
只需要修改几处即可
//添加$Ourl外部传入的请求url
public function __construct($appId, $appSecret,$Ourl) {
$this->appId = $appId;
$this->appSecret = $appSecret;
$this->Ourl = $Ourl;
}
....
//修改使用的url为传入的
//$protocol = $_SERVER['HTTP_X_FORWARDED_PROTO']=='https'? "https://" : "http://";
//$url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
$url = $this->Ourl;
...
内容总结
以上是互联网集市为您收集整理的VUE项目引入微信JSSDK 实现微信自定义分享全部内容,希望文章能够帮你解决VUE项目引入微信JSSDK 实现微信自定义分享所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。