H5

响应式

核心是单位的转换，px转为相对根元素的font-size的rem单位

VantUI等以px为单位的响应式的h5页面

• amfe-flexible进行根元素的font-size
• postcss-pxtorem 进行代码的px转rem

"amfe-flexible": "^2.2.1",
"postcss-pxtorem": "^5.1.1",

// postcss.config.js
module.exports = {
    plugins: {
      'postcss-pxtorem': {
        rootValue: 37.5, // 查看postcss-pxtorem插件使用文档
        propList: ['*']
      }
    }
  }

微信开发H5

cdn加载文件

<!-- 自动加载 -->
<script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<!-- 判断cdn成功 -->
<script>
    window.wx || document.write('<script src="//res2.wx.qq.com/open/js/jweixin-1.6.0.js"><\/script>')
</script>

下方为我要跳转的url

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxa1655f5c70e5b297&redirect_uri=https://yangbao.xyz/mp&response_type=code&scope=snsapi_base&state=weixin#wechat_redire

下方为跳转之后的行为

function getQueryVariable(variable){
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
    }
    return(false);
}
// /wxapi/ 这个地方应该请求后端，这个我是用nginx转发了我这个请求到微信服务器，避免跨域，获取到openid和其他的内容
$.get(
  `/wxapi/access_token?appid=wxa1655f5c70e5b297&secret=xxxxxxxx&code=${getQueryVariable('code')}&grant_type=authorization_code`,
  function(data,status){
    data = JSON.parse(data)
    document.getElementById('data').innerHTML = `openId: ${data.access_token}<br/><br/>
    access_token: ${data.access_token}<br/><br/>
    expires_in: ${data.expires_in}<br/><br/>
    refresh_token: ${data.refresh_token}<br/><br/>
    scope: ${data.scope}`
});