码迷,mamicode.com
首页 > 移动开发 > 详细

如何在嵌套的app中运用vue去写单页面H5

时间:2019-11-04 13:17:20      阅读:436      评论:0      收藏:0      [点我收藏+]

标签:href   官网   低版本   运用   npm   插件   nbsp   out   领导   

本文主要介绍移动端。为了避免移动端兼容出现各种奇奇怪怪的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暂时没有好的处理方案。 

 

如何在嵌套的app中运用vue去写单页面H5

标签:href   官网   低版本   运用   npm   插件   nbsp   out   领导   

原文地址:https://www.cnblogs.com/panax/p/11791317.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!