公司要求用vue做一个微信端的网站,其中还包含一些app的内嵌页。开始的时候没想那么多,就直接用vue-cli搭了一个单页的vue项目,可随着项目越做越大,页面越来越多,问题就开始暴露出来了。

众所周知,单页面程序优点是在页面初始化时加载相应的HTML、JavaScript 和 CSS,一旦页面加载完成了,就不用再做其他的加载和跳转了,极大的提升了页面的流畅性,提供良好的用户体验。那么问题来了,把所有东西都放在初始化的时候做,就造成了页面首次加载需要更长的等待时间。而对于那些作为app内嵌的页面,每一次的加载都是首次加载,所以你们懂的,体验极差。

接下来就是一系列的首次加载优化,webpack优化,js优化,css优化等等等等,该删的删,该改的改,一顿操作后,终于不会像开始时那样,app进个页面等半年。两个字,心累。

所以在这里建议广大vue爱好者,如果要做app内嵌页的话,最好不要选择vue单页面的框架,vue也支持多页面应用啊,哈哈。

金无足赤,在享受一些技术带来的便利的同时,也该了解它们一些方面的不足。懂得做到合理应用才是提高开发效率的不二法门。

用vue做app内嵌页遇到的坑的更多相关文章

  1. 使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等)

    使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等) 前言 移动端页面调试一直是好多朋友头疼的问题,iOS 由于其封闭的特性和整体较高的性能,整体适配相对好做,调试 ...

  2. app内嵌web的一些问题记录

    问题(1)webview里面出现大图预览,点击手机上的返回,应该是图片预览消失 问题(2)键盘输入的时候,键盘会把输入框遮挡 ------------------------------------- ...

  3. 移动端开发利器vConsole.js,app内嵌H5开发时调试用

    vConsole:一个轻量.可拓展.针对手机网页的前端开发者调试面板,主要还是用于内嵌app页面时在手机上进行调试,打印完全和在PC端一样,方便大家找出问题所在. 不说废话直接进入主题,vConsol ...

  4. 使用Windows安装的最高版本IE内核加载内嵌页(转载)

    客户端程序内嵌Webbrowser控件时,默认情况都是使用IE7兼容模式打开网页的.但是IE7有很多新的特性不支持,导致无法正常显示出来,所以需要强制使用高版本的IE内核来加载.渲染. void Ch ...

  5. app内嵌vue h5,安卓和ios拦截H5点击事件

    安卓和ios拦截h5点击事件,这个函数事件必须是暴漏在window下的 安卓和ios拦截普通h5函数: <div onclick = "show(),window.android.sh ...

  6. ios下app内嵌h5页面是video适配问题

    ios下做新闻详情用h5页面实现然后打包到app中,其中新闻详情页会有视频,安卓下video的poster可以做到适应video大小,但是ios下会按照poster图片大小将video等比撑大,但是视 ...

  7. app内嵌H5网页(webviewJavaScriptBridge)

    摘要:使用的插件为webviewJavaScriptBridge,app端需要引入一下这个包,html页面只需一段JS代码 与IOS交互 <! 申明交互(此处代码固定) > functio ...

  8. 内嵌页js与ios和安卓的交互

    ios: 一个iframe,改变url会发送一个请求,把url设置成就是bridge://xxxxx客户端就可以拦截请求,并在全局变量xxxxx中取出一个字符串.例如{event:'click'},可 ...

  9. app内嵌H5调用分享

    最近产品提出了一个需求:我们在合作方的app中提供的部分页面中增加分享页面,具体要求是在3个二维码推广页面调用app的分享接口,分享方式有3种,分别是点击”分享链接“按钮调起分享,点击”分享图片“按钮 ...

随机推荐

  1. C# Dapper 轻量ORM调试对SQLServer

    Dapper简介 Dapper只有一个代码文件,完全开源,你可以放在项目里的任何位置,来实现数据到对象的ORM操作,体积小速度快. 使用ORM的好处是增.删.改很快,不用自己写sql,因为这都是重复技 ...

  2. mybatis从数据库中取到的date格式不是yyyy-MM-dd HH:mm:ss

    问题:sqlserver中的存储时间格式为date,pojo的时间属性也是date,直接mybatis取出的时间格式是带英语的那种,不满足客户要求. 解决:将pojo的时间属性改为string类型,在 ...

  3. Node.js初探之GET方式传输

    Node.js初探之GET方式传输 例子:form用GET方法向后台传东西 html文件: <form action="http://localhost:8080/aaa" ...

  4. Attribute在.NET编程中的应用(三)

    用于参数的Attribute 在编写多层应用程序的时候,你是否为每次要写大量类似的数据访问代码而感到枯燥无味?比如我们需要编写调用存储过程的代码,或者编写T_SQL代码,这些代码往往需要传递各种参数, ...

  5. linux操作系统基础篇(二)

    Linux用户.群组.权限 1.用户也是由一个个文件组成的下列文件都是存放用户信息的文件 useradd user1 /etc/passwd: 存放用户信息  /etc/shadow/ :存放用户密码 ...

  6. 创建简单的Python列表

    比如给出电影列表: The Holy Grail The Life of Brian The Meaning of Life 转换为Python可读的列表,需要遵循以下4个步骤: 1.在数据两边加引号 ...

  7. IMDB TOP 250爬虫

    这个小学期Python大作业搞了个获取IMDB TOP 250电影全部信息的爬虫.第二次写爬虫,比在暑假集训时写的熟练多了.欢迎大家评论. ''' ************************** ...

  8. Less的内置函数

    杂项函数 color 解析颜色,将代表颜色的字符串转换为颜色值. 参数: string: 代表颜色值的字符串. 返回值: color 案例: color("#aaa"); 输出: ...

  9. Android Lint的使用

    一.概述 Android Lint是在ADT 16(和 Tools 16)引入的一个新工具,可以扫描Android 项目源码中潜在的bug .例如: 缺少翻译(和未使用的翻译)布局性能问题(老的lay ...

  10. Java第三季

    1.异常简介: (1) Java中的所有不正常类都继承于Throwable类.Throwable主要包括两个大类,一个是Error类,另一个是 Exception类: (2)其中Error类中包括虚拟 ...