微信公众号开发总结本次微信公众号的开发是，依托AAA公众号的一个配置入口，然后做一个BBB的功能开发，其中涉及到跨项目的

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

跨域cookie认证

背景：

AAA服务号的前端域名：domainA-wechat.AAA.com

BBB服务号前端域名：domainB-wechat.BBB.com/test

AAA后端的接口域名：domainB-be.BBB.com

问题：

AAA后端的用户信息认证用的都是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）

背景：

BBB公众号，配置AAA一对一的引流入口，涉及充值，用的是AAA公众号的支付，路由和配置

服务号支付涉及点：

appID --- 公众号id(wx33089c6046****)

code --- 用户授权获取CODE

openid --- 用户唯一标识（获取方法：需要授权获取CODE，再去换openId）

mch_id --- 商户收款账号(14214572**)

api_key --- 交易过程生成签名的密钥

api_secret --- 与appID对应的接口密码

开发注意流程

需要在微信公众平台配置网页授权，比如：domainA-wechat.AAA.com（注意是根域）

需要在当前项目的WEB容器里配置授权，在公众平台的配置页面下载对应的授权证书MP_verify_WK9zYZu8TKMpsbzX.txt，放在WEB容器内与HTML同级

需要登录微信商户平台 => 产品中心 => 开发配置 => 添加JSAPI授权目录（注意是到根域，比如domainA-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);
    }
};