微信公众号网页开发

微信的关键配置项是用来做什么的？

微信关键配置入口：

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#63

下面列出几个关键配置：

• config接口：用来注入权限验证配置。

wx.config({

    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

    appId: '', // 必填，公众号的唯一标识

    timestamp: , // 必填，生成签名的时间戳

    nonceStr: '', // 必填，生成签名的随机串

    signature: '',// 必填，签名

    jsApiList: [] // 必填，需要使用的JS接口列表，比如：updateTimelineShareData（分享接口）、chooseWXPay（选择微信支付）

  });

• ready接口：用来处理成功验证。config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

wx.ready(function(){ });

• updateTimelineShareData接口：用来自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容。

wx.ready(function () {      //需在用户可能点击分享按钮前就先调用

  wx.updateTimelineShareData({

    title: '', // 分享标题

    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

    imgUrl: '', // 分享图标

    success: function () {

      // 设置成功

    }

  })

});

• chooseWXPay接口：发起一个微信支付请求

wx.ready(() => {

wx.chooseWXPay({

  timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符

  nonceStr: '', // 支付签名随机串，不长于 32 位

  package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）

  signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'

  paySign: '', // 支付签名

  success: function (res) {

// 支付成功后的回调函数

  }

});

})

备注：prepay_id 通过微信支付统一下单接口拿到，paySign 采用统一的微信支付 Sign 签名生成方法，注意这里 appId 也要参与签名，appId 与 config 中传入的 appId 一致，即最后参与签名的参数有appId, timeStamp, nonceStr, package, signType。

常见问题

• 微信分享没有缩略图

原因：签名有误，因为后端获取的Jsapi_ticket有错，需要后端修改获取Jsapi_ticket的方法。

代码如下：

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${access_token}&type=jsapi

type=jsapi 应该改为 type=wx_card ，如下：

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${access_token}&type=wx_card

备注：生成签名之前必须先了解一下jsapi_ticket，jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下，jsapi_ticket的有效期为7200秒，通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限，频繁刷新jsapi_ticket会导致api调用受限，影响自身业务，开发者必须在自己的服务全局缓存jsapi_ticket

附上微信js接口签名校验工具地址：

https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

• 获取微信openId的微信code只能使用一次

在再次发起支付的情况，比如：刷新页面，关闭微信支付密码填写窗口等，重新获取code

• 二次分享失败

Hash模式下，微信在第二次分享时会带上一些参数。

比如：

https://ddd.info.cn/index.html/#/home?skuId=202&traceId=4&cv=7

变为

https://ddd.info.cn /index.html?from=singlemessage&isappinstalled=0/#/home?skuId=202&traceId=4&cv=7

导致再次去后台验证签名时就会报错

解决方式：

获取url，将多余参数去掉

// 预防二次分享链接地址会自动添加from------解决方案-----重定向

      if (GetQueryString('from')) {

        const url = window.location.href.split('#')[0].split('?')[0] + '#' + window.location.href.split('#')[1]

        window.location.replace(url)

        return

      }

• 商家暂时没有此类交易权限，请联系商家客服

先检查你的下单接口是否指定了支付用户的身份，需单独开通指定身份支付权限方可使用

然后确认你使用的商户号是否有jsapi支付的权限，可登录商户平台-产品中心查看

• 当前页面的URL未注册：http://www.weixin.qq.com/pay.do

请检查下单接口中使用的商户号是否在商户平台（pay.weixin.qq.com）配置了对应的支付目录。

• redirect_url域名与后台配置不一致，错误码：10003

这是获取openid接口报的错误，需要检查下单接口传的appid与获取openid接口的appid是否同一个（需一致），然后检查appid对应的公众号后台（mp.weixin.qq.com），是否配置的授权域名和获取openid的域名一致。

授权域名配置路径：公众平台--设置--公众号设置--功能设置--网页授权域名