微信公众号开发总结

本次微信公众号的开发是，依托AA公众号的一个配置入口，然后做一个BB的功能开发，其中涉及到跨项目的用户信息认证，支付，移动端的适配，https协议升级等问题

跨域cookie认证

背景：

• 辅导服务号的前端域名：https://testfudao-wechat.AAA.com
• 好分数服务号前端域名：https://hfs-wechat.AAA.com/test
• 辅导后端的接口域名：https://testhfsfd-be.BBB.com

问题：

• 好分数后端的用户信息认证用的都是cookie，而cookie是不能跨域携带的(其实严格来说，不同的浏览器有不同的行为规范，Chrome是可以携带但是在对用的请求header里面是不可见的，Chrome假装隐藏，其实后端同学是可以通过header.cookie拿到的，但是Safari是真的就没有带cookie)，我们想要做的，就是在好分数(.AAA.com)登录，把cookie拿给辅导后端同学(.BBB.com)，后端同学再把数据返回给辅导(.AAA.com)
• 整体的流程在安卓上是没有问题的，但是在IOS上用户信息是认证不了的

---

解决方案:

• 由于IOS的高封闭性导致cookie是严格不能跨domain携带的，所以必须要另外在申请域名，把.AAA.com的后端服务在新绑定一个.BBB.com的域名，这样就没有cookie的domain限制了。
• 前端需要把本地测试和生产的所有的 .AAA.com 的接口换成 .BBB.com

跨公众号支付（JSAPI）

背景：

• 好分数公众号，配置辅导一对一的入口，涉及学费充值，用的是辅导公众号的支付，路由和配置

服务号支付涉及点：

• appID — 公众号id(wx33089c6046****)
• code — 用户授权获取CODE
• openid — 用户唯一标识（获取方法：需要授权获取CODE，再去换openId）
• mch_id — 商户收款账号(1421457202)
• api_key — 交易过程生成签名的密钥
• api_secret — 与appID对应的接口密码

开发注意流程

• 需要在微信公众平台配置网页授权，比如：https://testfudao-wechat.AAA.com（注意是根域）
• 需要在当前项目的WEB容器里配置授权，在公众平台的配置页面下载对应的授权证书MP_verify_WK9zYZu8TKMpsbzX.txt，放在WEB容器内与HTML同级
• 需要登录微信商户平台 => 产品中心 => 开发配置 => 添加JSAPI授权目录（注意是到根域，比如https://fudao-wechat.BBB.com/）

https协议升级

此问题产生的背景还是cookie的原因，在AAA的项目中设置的cookie设置了secure属性，所以该cookie只能在https的协议传递，辅导的项目也就必须要升级成https的协议。

移动端兼容

移动端设计稿宽度为 720px，在设计稿的尺寸下设置一个font-size = 100px;那么页面的宽度换算成rem就等于 720 px/100px = 7.2rem; 不管在什么设备下，我们都可以把一个页面的总宽度设置为一个以rem为单位的定值 7.2rem; 根元素的font-size 根据布局视口的宽度动态设置：
document.documentElement.style.fontSize = document.documentElement.clientWidth /7.2 + ‘px’; 并为window resize 添加监听动态改变重设根元素font-size

这样无论在什么设备下，页面的总宽度均为7.2rem，所以我们可以直接将在设计稿上测量px单位的尺寸除以100转换成rem单位使用。（文字字体大小不要使用rem换算，使用css media query 进行检测重置大小）。

document.documentElement.style.fontSize = document.documentElement.clientWidth/7.2+'px';
var firstOnResizeFire = true;
window.onresize = function () {
    if(firstOnResizeFire){
        document.documentElement.style.fontSize = document.documentElement.clientWidth/7.2+'px';
        firstOnResizeFire = false;
        setTimeout(function () {
            firstOnResizeFire = true;
        },500);
    }
};