【公众号】微信H5调用sdk分享

微信H5调用sdk分享

一、公众号配置

绑定域名

也就是只有这里的域名才能权限访问微信开发平台

引入 JS 文件

<script>
  var wxShareScript = document.createElement("script");
  wxShareScript.type = "text/javascript";
  wxShareScript.src = "https://res.wx.qq.com/open/js/jweixin-1.6.0.js";
  wxShareScript.onload = function () {
    // ...
  };
  document.head.appendChild(wxShareScript);
</script>

二、发起调用请求

const params = {
    href: location.href,
};
const queryString = new URLSearchParams(params).toString();
const url = `xxxx?${queryString}` // 替换为服务端接口
fetch(url)
    .then((response) => response.json())
    .then((data) => {
    if (data.code === 0) {
        const { appId, signature, nonceStr, timestamp } = data.result;
        wx.config({
            appId,
            timestamp,
            nonceStr,
            signature,
            jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
        });
    }
    })
    .catch((error) => {
        console.error("load wxShareScript error", error);
    });

三、服务端接口

去微信公众平台get appid和appsecret，同时配置IP白名单，否则接口无法调用

代码示例

// 引入 Egg.js 控制器
const { Controller } = require('egg');
// 引入 axios 库
const axios = require('axios');
const jsSHA = require('jssha');

// 微信公众号的 AppID 和 AppSecret
const appid = 'xxx';
const appsecret = 'xxx';

// 全局变量用于保存 jsapi_ticket 和过期时间
let jsapiTicket = '';
let ticketExpiresAt = 0;

/**
 * 获取 access_token
 * @returns {Promise<string>} access_token
 */
async function getAccessToken(ctx) {
  try {
    const response = await axios.get(`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${appsecret}`);
    const accessToken = response.data.access_token;
    return accessToken;
  } catch (error) {
    ctx.logger.info('Failed to get access token:', error.response.data);
    throw error;
  }
}

/**
 * 获取 jsapi_ticket
 * @returns {Promise<string>} jsapi_ticket
 */
async function getJsApiTicket(ctx) {
  try {
    const accessToken = await getAccessToken(ctx);
    const response = await axios.get(`https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${accessToken}&type=jsapi`);
    const ticket = response.data.ticket;
    return ticket;
  } catch (error) {
    ctx.logger.info('Failed to get jsapi ticket:', error.response.data);
    throw error;
  }
}
var raw = function (args) {
  var keys = Object.keys(args);
  keys = keys.sort();
  var newArgs = {};
  keys.forEach(function (key) {
    newArgs[key.toLowerCase()] = args[key];
  });

  var string = '';
  for (var k in newArgs) {
    string += '&' + k + '=' + newArgs[k];
  }
  string = string.substr(1);
  return string;
};

class ShareController extends Controller {
  /**
   * 获取签名信息的接口
   */
  async getWechatSignature() {
    const { ctx } = this;
    const url = ctx.query.href;

    const timestamp = parseInt(new Date().getTime() / 1000); // 当前时间戳
    const noncestr = Math.random().toString(36).substr(2, 15); // 生成随机字符串

    if (!jsapiTicket || timestamp >= ticketExpiresAt) {
      jsapiTicket = await getJsApiTicket(ctx);
      // 设置过期时间为 7000 秒（提前200秒过期）
      ticketExpiresAt = timestamp + 7000;
    }

    var ret = {
      jsapi_ticket: jsapiTicket,
      nonceStr: noncestr,
      timestamp: timestamp + '',
      url: url,
    };

    var string = raw(ret);
    var shaObj = new jsSHA(string, 'TEXT');
    const signature = shaObj.getHash('SHA-1', 'HEX');

    // 将签名信息返回给前端
    ctx.body = {
      code: 0,
      result: {
        timestamp: timestamp,
        nonceStr: noncestr,
        signature: signature,
        appId: appid,
      },
    };
  }
}

module.exports = ShareController;