H5引入微信SDK

1、引入JS文件

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 标准模块加载方法加载

2、通过微信接口获取accessToken

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);
      }
    });
  });
}

3、通过accessToken获取 jsapi_ticket(临时凭证)

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);
      }
    });
  });
}

4、生成签名

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);
}

5、配置 SDK

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 填入非空任意值即可
相关推荐
飞翔的佩奇22 分钟前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15881 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追2 小时前
Vue组件化开发
前端·html
艾德金的溪2 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长2 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH2 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴2 小时前
Android Studio新手开发第二十六天
android·前端·android studio
JH30733 小时前
B/S架构、HTTP协议与Web服务器详解
前端·http·架构
yi碗汤园3 小时前
【超详细】C#自定义工具类-StringHelper
开发语言·前端·unity·c#·游戏引擎
Kevin Wang7274 小时前
解除chrome中http无法录音问题,权限
前端·chrome