|
|
@@ -0,0 +1,140 @@
|
|
|
+// npm i crypto-js string-random weixin-js-sdk
|
|
|
+// npm i --save-dev @types/crypto-js
|
|
|
+import crypto from "crypto-js";
|
|
|
+import axios from "axios";
|
|
|
+import random from "string-random";
|
|
|
+
|
|
|
+
|
|
|
+import wx from "weixin-js-sdk";
|
|
|
+
|
|
|
+const WX_URL = window.location.href.split("#")[0];
|
|
|
+
|
|
|
+// 调试使用
|
|
|
+// const APP_ID = "wx5322ebef16888678";
|
|
|
+// const APP_SECRET = "5e7139c342b1621f88aaf9bf6e75a652";
|
|
|
+
|
|
|
+// 央视网
|
|
|
+const APP_ID = "wx2805e0c14291bbd7";
|
|
|
+
|
|
|
+const generatorSha1 = (str) => {
|
|
|
+ return crypto.SHA1(str).toString(crypto.enc.Hex);
|
|
|
+};
|
|
|
+/**
|
|
|
+ * 获签名信息
|
|
|
+ */
|
|
|
+const getSignature = async () => {
|
|
|
+ const getticketResult = await axios.get(`wxMini/getTicket`, {
|
|
|
+ // 从 public 里面的 wxData里面拿
|
|
|
+ baseURL: WX_BASE_URL,
|
|
|
+ });
|
|
|
+ const jsapi_ticket = getticketResult.data.data.ticket;
|
|
|
+ const nonceStr = random(16); // 'Wm3WZYTPz0wzccnW'
|
|
|
+ const timestamp = new Date().getTime();
|
|
|
+ const str = `jsapi_ticket=${jsapi_ticket}&noncestr=${nonceStr}×tamp=${timestamp}&url=${WX_URL}`;
|
|
|
+ const signature = generatorSha1(str);
|
|
|
+ const result = {
|
|
|
+ nonceStr,
|
|
|
+ jsapi_ticket,
|
|
|
+ timestamp,
|
|
|
+ signature,
|
|
|
+ appId: APP_ID,
|
|
|
+ };
|
|
|
+ return result;
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * 通过config接口注入权限验证配置
|
|
|
+ * 请在前端页面调用
|
|
|
+ * @param {Object} params
|
|
|
+ */
|
|
|
+const wxConfig = async (params) => {
|
|
|
+ const { appId, timestamp, nonceStr, signature, jsApiList, onReady, onError } =
|
|
|
+ params;
|
|
|
+ wx.config({
|
|
|
+ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
|
|
|
+ appId, // 必填，公众号的唯一标识
|
|
|
+ timestamp, // 必填，生成签名的时间戳
|
|
|
+ nonceStr, // 必填，生成签名的随机串
|
|
|
+ signature, // 必填，签名
|
|
|
+ jsApiList: jsApiList, // 必填，需要使用的JS接口列表
|
|
|
+ });
|
|
|
+ // 通过ready接口处理成功验证
|
|
|
+ wx.ready(function () {
|
|
|
+ onReady && onReady();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 通过error接口处理失败验证
|
|
|
+ wx.error(function (error) {
|
|
|
+ onError && onError(error);
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const shareApp = (params) => {
|
|
|
+ const { title, desc, link, imgUrl } = params;
|
|
|
+ // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
|
|
|
+ wx.updateAppMessageShareData({
|
|
|
+ title, // 分享标题
|
|
|
+ desc, // 分享描述
|
|
|
+ link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
|
|
|
+ imgUrl, // 分享图标
|
|
|
+ success: function () {
|
|
|
+ // 设置成功
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
|
|
|
+ wx.updateTimelineShareData({
|
|
|
+ title, // 分享标题
|
|
|
+ link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
|
|
|
+ imgUrl, // 分享图标
|
|
|
+ success: function () {
|
|
|
+ // 设置成功
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ // 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
|
|
|
+ wx.onMenuShareWeibo({
|
|
|
+ title, // 分享标题
|
|
|
+ desc, // 分享描述
|
|
|
+ link, // 分享链接
|
|
|
+ imgUrl, // 分享图标
|
|
|
+ success: function () {
|
|
|
+ // 用户确认分享后执行的回调函数
|
|
|
+ },
|
|
|
+ cancel: function () {
|
|
|
+ // 用户取消分享后执行的回调函数
|
|
|
+ },
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * 微信Api初始化
|
|
|
+ * 请在需要分享的前端页面调用
|
|
|
+ */
|
|
|
+export const wxShareInit = async () => {
|
|
|
+ const data = await getSignature(); // 后端提供的获取签名api，具体实现可以看上面的”获取签名信息参考代码”小节
|
|
|
+ const { appId, timestamp, nonceStr, signature } = data;
|
|
|
+ wxConfig({
|
|
|
+ appId,
|
|
|
+ timestamp,
|
|
|
+ nonceStr,
|
|
|
+ signature,
|
|
|
+ jsApiList: [
|
|
|
+ // 分享需要用到以下几个接口
|
|
|
+ "updateAppMessageShareData", // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
|
|
|
+ "updateTimelineShareData", // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
|
|
|
+ "updateTimelineShareData", // 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
|
|
|
+ ],
|
|
|
+ onReady: () => {
|
|
|
+ shareApp({
|
|
|
+ title: WX_TITLE,
|
|
|
+ desc: WX_DESC,
|
|
|
+ link: WX_URL,
|
|
|
+ imgUrl: WX_IMGURL,
|
|
|
+ }); // 分享配置
|
|
|
+ },
|
|
|
+ onError: (error) => {
|
|
|
+ console.log("初始化失败", error);
|
|
|
+ },
|
|
|
+ });
|
|
|
+};
|
