Jw
首页
技术
英语
首页
技术
英语
  • 前端

    • 微信

      • H5

        • 网页授权
        • JSSDK 配置注入
        • 分享设置
        • 调起支付
      • 小程序

        • 腾讯云 IM - 获取签名
        • 腾讯云 IM - 登录
        • 腾讯云 IM - 最近联系人
        • 常用工具类
        • 实现 async/await

微信 H5 JSSDK 配置注入

安装 weixin-js-sdk、后台换取签名并注入 config,兼容 iOS 的 url 处理。

vue hash 模式

具体注意事项查看官方文档

  1. 先到公众号的基本开发配置,设置js接口安全域名(单域名就好,不带协议,不带路径)
  2. 安装 weixin-js-sdk 包
    • 命令 npm install weixin-js-sdk
  3. 引入包、配置注入sdk
  4. 注入成功

配置代码


    import wx from './weixin-js-sdk';
    const SDK_DEBUG = false;
    let SDK_config = jsApiList => {
        return new Promise((rs,rj)=>{
            _getConfigSign(_get_url_compatible_ios_config())    // 后台获取签名等其他配置信息/
            .then(res=>{
                wx.config({
                    debug:SDK_DEBUG,                            // 开启调试模式,调用的所有api的返回值会在客户端alert出来 bol
                    appId:res.appId,                            // 必填,公众号的唯一标识   str
                    timestamp:res.timestamp,                    // 必填,生成签名的时间戳 str
                    nonceStr:res.nonceStr,                      // 必填,生成签名的随机串 str
                    signature:res.signature,                    // 必填,签名   str
                    jsApiList:[...jsApiList],                   // 必填,需要使用的JS接口列表 arr
                })
                wx.ready(function(e){
                    console.log('ready:',JSON.stringify(e));
                    rs(e);

                    // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
                });
                wx.error(function(err){
                    console.warn('js-sdk配置失败-->',JSON.stringify(err));
                    rj(err);

                    // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
                }); 
            })
        })
    }

    //后台请求获取js-sdk 配置信息 //签名/时间等
    function _getConfigSign(url){   // 获取当前地址进行生成签名
        return ServerData.sdk_config({url})
        .then(e=>{
            if(e.code == 0){
                return e.data
            }else{
                console.warn('获取签名失败'+JSON.stringify(e))
                return Promise.reject(e);
            }
        })
    }

    //url处理/兼容ios 注入 sdk 出现签名失败
    function _get_url_compatible_ios_config(){
        let u = navigator.userAgent;
        let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android
        let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);               //ios终端
        if (isAndroid)return location.href;
        if (isIOS)return location.href.split('#')[0];   //hash后面的部分如果带上ios中config会不对
        return location.href
    }
    

注:

  1. config注入尽量避免并发,会出现兼容问题。
  2. 每次url变化之后都需要重新微信jssdk授权,要用到的页面,mounted 调用config注册sdk。
  3. ios签名入参的时候url路径不能含有'#'hash部分。
  4. 设置分享,链接中存在中文,进行encodeURIComponent(),安卓手机会自动encodeURIComponent,ios不会。
  5. 注意大小写nonceStr。

速查

# 安装微信 JS-SDK
npm install weixin-js-sdk
场景易错点
iOS 签名失败参与签名的 URL 不能带 # 之后的 hash
注入报错config 避免并发;url 变化后需重新注入
分享链接带中文先 encodeURIComponent() 再传(Android 会自动编码,iOS 不会)

相关

  • 微信 H5 分享设置:菜单分享内容自定义
  • 微信 H5 调起微信支付:chooseWXPay
最近更新: 2026/10/12 09:08
Contributors: liujw
Prev
网页授权
Next
分享设置