前段时间由于公司业务发展，需要开发一个微信端的支付页面，并需要嵌入到公众号中。本文着手记录开发过程以及几点需要注意的地方。
需求简述
在微信公众号中，底部添加导航栏充值入口。点击进入充值页面后，选择相应商品购买，能调起微信支付。
前期准备
-
因为公众号页面中使用了微信支付，所以需要在公众号对应的商户后台内配置微信支付授权目录，支付授权目录详细配置如下：
- 进入该公众号对应的微信商户平台
- 进入产品中心——开发配置——支付设置
- 在支付授权目录中填写支付页面的链接，选择对应的协议
http或https - 链接写到最后一级目录，如支付页面是
https://yoursite/dir/index.html，则支付授权目录为：https://yoursite/dir/
否则可能会出现
chooseWXPay:fail, the permission value is offline verifying等错误。参考链接 -
页面还涉及到获取微信用户信息，所以页面需要接入微信网页授权。需要配置授权回调域名：
在微信公众号请求用户网页授权之前，开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中，修改授权回调域名。请注意，这里填写的是域名（是一个字符串），而不是URL，因此请勿加 http:// 等协议头；
详细的接入配置请阅读上述微信网页授权文档。
页面制作
上述配置完成后，我们可以使用下面这种格式的授权链接：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=公众号对应的APPID&redirect_uri=授权成功之后的跳转链接&response_type=code&scope=授权类型&state=STATE#wechat_redirect
关于网页授权的两种scope的区别说明
1、以snsapi_base为scope发起的网页授权，是用来获取进入页面的用户的openid的，并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页（往往是业务页面）
2、以snsapi_userinfo为scope发起的网页授权，是用来获取用户的基本信息的。但这种授权需要用户手动同意，并且由于用户同意过，所以无须关注，就可在授权后获取该用户的基本信息。
3、用户管理类接口中的“获取用户基本信息接口”，是在用户和公众号产生消息交互或关注后事件推送后，才能根据用户OpenID来获取用户基本信息。这个接口，包括其他微信接口，都是需要该用户（即openid）关注了公众号后，才能调用成功的。
引导用户在微信浏览器中打开该链接，微信会自动拉起授权。当授权成功之后，页面会自动重定向到上述链接中的redirect_uri页面，并且会以GET参数的形式携带授权成功的参数code，该链接中redirect_uri参数对应的值（业务页面链接）需要使用URI编码。
当微信授权成功之后，页面会跳转到填写的业务页面。然后在业务页面中取得url中微信传过来的code，去服务器请求open_id，再进行下一步的业务逻辑。
当用户选完商品之后，点击购买按钮，页面将商品信息和open_id等发送给后台。后台接入微信生成预订单并将预订单的信息返回给前端。在前端接收到预订单信息之后，可以使用下述代码调起微信支付（仅在微信浏览器中生效）
function onBridgeReady() {
WeixinJSBridge.invoke(
"getBrandWCPayRequest",
{
appId: 对应的appid, //公众号名称，由商户传入
timeStamp: res.timeStamp, //时间戳，自1970年以来的秒数
nonceStr: res.nonceStr, //随机串
package: "prepay_id=" + res.prepay_id,
signType: "MD5", //微信签名方式：
paySign: res.paySign //微信签名
},
function(res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示：
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
}
}
);
}
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener(
"WeixinJSBridgeReady",
onBridgeReady,
false
);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
}
} else {
onBridgeReady();
}
至此主体的业务逻辑即是完成了。
公众号自定义菜单配置
当业务页面都开发完成之后，我们需要将页面的链接配置到微信公众号的底部菜单中。此时我们可以登录进微信工作平台，在左侧的功能菜单下，找到自定义菜单选项。点击即可进入自定义菜单配置，这种配置方式比较直观和简单。
还有一种情况是，点击了自定义菜单，但是页面提示：
未开启自定义菜单
由于开发者通过接口修改了菜单配置，当前菜单配置已失效并停用。你可以前往开发者中心进行停用。
当出现这种情况的时候，有两种解决办法
- 第一种是根据提示，进入开发者中心，停用掉服务器配置，再进行修改菜单，再启用服务器配置，再找到“添加功能插件”中的自定义菜单，选择启用。这种方式需要停用服务器配置，在此期间可能会影响到线上的自动回复等功能，并不建议，这里建议第二种方法
- 第二种方式是直接使用接口的方式向微信发起一次post请求，并且携带需要配置的菜单信息，这种方式需要获得Access Token，这里有一篇文章写得非常详细：微信公众平台开发（58）自定义菜单，这里就不赘述了。
注意事项
这里有几个需要注意的地方
如果在微信公众号调试工具中，无法正确调起支付，那可以尝试在真机上进行调试。
如果在安卓机器上，可以唤起支付但是不出现输密码的步骤而且没报错，可以在IOS平台的微信上重试一下，也许就会有错误信息出现
-
无法正常调起支付优先检查代码，如果不是代码错误则检查配置，几个配置需要检查的点：
- 是否在公众号后台中配置了授权回调域名，授权回调域名格式是否正确（多加了http协议头，多了空格等）
- 公众号对应的商户后台，是否配置了支付授权目录，支付授权目录的格式是否正确（http和https是否和实际访问链接匹配，链接是否写到了最后一级目录）
在调起支付的参数中，前端代码中的timeStamp中的S是大写的，写错了也可能会无法调起支付。
