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};//调用初始化方法wxShowMenu(shareData).then(res => {console.log(res);},err => {console.log(err);});},

二、(后端)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外部传入的请求urlpublic 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项目中，使用微信js-sdk打开微信内置导航，唤醒第三方导航，
vue项目中,使用微信js-sdk打开微信内置导航,唤醒第三方导航一.准备工作二.开发须知三.开始安装sdk 四.通过微信的config接口注入权限验证配置附上代码最近在搞vue项目需要在手 ...
vue项目引入微信sdk报错记录
前言 vue项目引入微信sdk $ npm install weixin-js-sdk --save 运行报错如下: npm install weixin-js-sdk --save下载失败显示未配置 ...
vue项目html引入css,vue项目引入自定义.css的样式文件
ES6的引入方式: .vue文件中 css文件引入 @import "../assets/common/common.css";//自定义.css的样式路径 js文件的引入在ma ...
微信内 H5 页面自定义分享
起源: 最近公司在做一个活动的h5页面,在微信内打开时需要进行微信授权,然后后端会重定向到这个页面并且携带了一些参数(openid等).问题是点击微信的原生分享时,会把携带的这些参数一起分享出去,等于 ...
vue项目引入CNZZ数据专家（方法汇总篇）
vue项目引入CNZZ数据专家(方法汇总篇) 很多网站都有cnzz数据统计,用于分析网站页面受访情况. 今天就来备注一下开发经验: vue如何集成cnzz数据专家进行受访记录? 友盟+CNZZ官方文档 ...
微信JS-SDK调用微信接口方法说明
微信公众平台微信JS-SDK说明文档地址:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 概述微信JS ...
微信小程序之——自定义分享按钮（完整版）
声明 onShareAppMessage 函数 onShareAppMessage() { return { title: '弹出分享时显示的分享标题' desc: ' ...
vue项目引入typescript（vue与ts混用）
说明为什么要在vue项目中使用ts? 新公司给了一个关于vue项目的需求,又由于ts是JavaScript的超集,强类型数据,组件化友好.故我选择在vue项目中引入ts. 下载typescript和 ...
html页面调用微信扫一扫功能,微信JSSDK调用微信扫一扫功能的方法
如何利用微信jssdk调用微信扫一扫功能?具体内容如下 1. 确保有调起微信扫一扫接口权限,测试号可能不行: 2. 导入相关js 3. 页面触发扫码元素 4. 相关js代码 var _appid ...

VUE项目引入微信JSSDK 实现微信自定义分享

前端vue、后端php

一、微信公众号后台添加 js安全域名（白名单）

二、(前端) VUE引入微信JSSDK

二、(后端)php生成config参数返回

VUE项目引入微信JSSDK 实现微信自定义分享相关推荐

最新文章

热门文章