vue H5页面制作微信公众号前期准备

首先vue项目的搭建过程就不说了
接下来进入正题

• 最重要的是配置成手机端页面也就是h5页面：
  vue项目中在index.html中配置

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                // 这里的375 取决于设计稿的宽度
                    docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

到此我们就可以正常的写h5页面了
但是如果要放到公众号中，相信大家肯定遇到过浏览器的模拟器是正常字体，但在公众号中就变小了，这是因为微信的内置浏览器的原因
我们需要在index.html中对安卓和ios机型进行相关配置

//css样式
body{
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
}

//javascript
   // 微信浏览器字体大小
     (function (doc, win) {
        if (typeof WeixinJSBridge == 'object' && typeof window.WeixinJSBridge.invoke == 'function') {
          handleFontSize();
        } else {
          if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', handleFontSize, false);
          } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', handleFontSize);
            document.attachEvent('onWeixinJSBridgeReady', handleFontSize);
          }
        }
        function handleFontSize() {
          // 设置网页字体为默认大小
          window.WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize': 0});
          // 重写设置网页字体大小的事件
          window.WeixinJSBridge.on('menu:setfont', function () {
          window.WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize': 0});
          });
        }
        })(document,window)

现在我们就可以放心开发了