如何在嵌套的app中運用vue去寫單頁面H5

本文主要介紹移動端。為了避免移動端兼容出現各種奇奇怪怪的bug,所以秉承着能不用復雜的語法就不用，盡量用最基礎的語法。 可用慣了各種ES6語法的童鞋們，寫原生真是頭疼，再加上各種領導催工期，肯定是內心各種煩躁。這里介紹一下，如何在H5中運vue 去寫，嵌套到用到app中。

1. 首先引入vue CDN ,記得去扒一個vue.js. 下載下來，不要用htpp,這樣可以避免有些模塊因為網卡導致，頁面加載錯亂。

<script src="./js/vue.min.js"></script>

    <div id="app"></div>

    

new Vue({

        el: "#app",

        data:function(){}

})

 

　　2.你肯定也想用個uI庫，那本人推薦一個vant .    使用看官網。 有的需要vant.Toast 。 安卓6.0 以下常出現數據加載不出的問題。看公司是否全兼容。

<script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>

       3.　　獲取后台數據ajax 就夠用了。去下載一個本地的吧.

<script src="./js/jquery-2.0.0.min.js"></script>

　　4. 移動端布局如果是少量的用百分比，display:flex ,這個要做兼容 。 rem 也是可以用的。 

        

// 記得UI尺寸/100 = 實際值 rem 。 默認UI尺寸750px. 小於750px 的手機請用百分比。像vivio6, oppo低版本手機常出現兼容問題。 不過現在大部分手機都已適用，看公司是否全兼容。 
<script>
        var fontSize = 0;
        (function (doc, win) {
            //獲取html節點和事件 和屏幕變化改變字體大小
            const docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    const clientWidth = docEl.clientWidth;
                    if (!clientWidth) return; //排除寬度沒值
                    if (clientWidth >= 750) {
                        docEl.style.fontSize = '100px';
                    } else {
                        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                    }
                };

            function fontSizeFun() {
                var size = 0;
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return; //排除寬度沒值
                if (clientWidth >= 750) {
                    size = 100;
                } else {
                    size = 100 * (clientWidth / 750);
                }
                return size;
            }
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener("DOMContentLoaded", recalc, false);
            fontSize = fontSizeFun();
            win.addEventListener(resizeEvt, function () {
                fontSize = fontSizeFun();
            }, false);
            doc.addEventListener("DOMContentLoaded", function () {
                fontSize = fontSizeFun();
            }, false);
        })(document, window);
    </script>

　　

      5. ES6 語法的兼容處理。 

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

　　6. 沒有用vue-router, 用到的是 window.location.href 跳的，比較生硬。 看到網上有一種方法： 

然后在index.html 通過router-view來渲染A和B兩個頁面。  A,B作為它的組件。  另外的一個嵌套app的H5 , 是也是通過window.location.href 跳的或者a標簽 。 在瀏覽器可以正常下載，但移動端不行。查了好多文檔，並沒有太好的解決方案，app 可以通過調取用插件打開本地文件，嵌套的H5暫時沒有好的處理方案。