H5引入微信SDK

perl 复制代码

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。

备注：支持使用 AMD/CMD 标准模块加载方法加载

javascript 复制代码

const getAccessToken = () => {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=你的APPID&secret=你的APPSECRET',
      type: 'GET',
      success: function(res) {
        res.errcode === 0 ? resolve(res.access_token) : reject(res.errmsg);
      },
      error: function(err) {
        reject(err);
      }
    });
  });
}

javascript 复制代码

const getJsApiTicket = (accessToken) => {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=' + accessToken,
      type: 'GET',
      success: function(res) {
        res.errcode === 0 ? resolve(res.ticket) : reject(res.errmsg);
      },
      error: function(err) {
        reject(err);
      }
    });
  });
}

typescript 复制代码

const sha1 = (str) => {
  // 这里使用CryptoJS库来计算SHA1
  return CryptoJS.SHA1(str).toString();
}
 
const getSignature = (noncestr, timestamp, url) => {
  // 你的应用的appsecret
  const appSecret = '你的应用的appsecret';
  // 需要使用应用的appId、appSecret、时间戳、随机字符串进行加密
  const string = `jsapi_ticket=${jsapiTicket}&noncestr=${noncestr}&timestamp=${timestamp}&url=${url}`;
  return sha1(string);
}

javascript 复制代码

// 获取token
const accessToken = await getAccessToken();
// 获取临时凭证
const jsapiTicket = await getJsApiTicket(accessToken);
// 生成随机字符串
const nonceStr = Math.random().toString(36).substr(2, 15);
// 生成时间戳，转为36进制并补足4位（毫秒）
const timestamp = new Date().getTime().toString(36) + '000';
// 获取当前页面的 URL，不包含 hash 部分
const url = window.location.href.split('#')[0];
// 生成 signature
const signature = getSignature(nonceStr, timestamp, url, jsapiTicket);
// 使用 signature 和其他参数配置 SDK
wx.config({
  appId: '你的APPID', // 必填，公众号的唯一标识
  timestamp: timestamp, // 必填，生成签名的时间戳
  nonceStr: nonceStr, // 必填，生成签名的随机串
  signature: signature, // 必填，签名，见附录1
  jsApiList: ['chooseImage', 'uploadImage', 'onMenuShareTimeline'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
注意：如果使用的是小程序云开发静态网站托管的域名的网页，可以免鉴权直接跳任意合法合规小程序，调用 wx.config 时 appId 需填入非个人主体的已认证小程序，不需计算签名，timestamp、nonceStr、signature 填入非空任意值即可

1、引入JS文件

2、通过微信接口获取accessToken

3、通过accessToken获取 jsapi_ticket（临时凭证）

4、生成签名

5、配置 SDK