用vue做app内嵌页遇到的坑
公司要求用vue做一个微信端的网站,其中还包含一些app的内嵌页。开始的时候没想那么多,就直接用vue-cli搭了一个单页的vue项目,可随着项目越做越大,页面越来越多,问题就开始暴露出来了。
众所周知,单页面程序优点是在页面初始化时加载相应的HTML、JavaScript 和 CSS,一旦页面加载完成了,就不用再做其他的加载和跳转了,极大的提升了页面的流畅性,提供良好的用户体验。那么问题来了,把所有东西都放在初始化的时候做,就造成了页面首次加载需要更长的等待时间。而对于那些作为app内嵌的页面,每一次的加载都是首次加载,所以你们懂的,体验极差。
接下来就是一系列的首次加载优化,webpack优化,js优化,css优化等等等等,该删的删,该改的改,一顿操作后,终于不会像开始时那样,app进个页面等半年。两个字,心累。
所以在这里建议广大vue爱好者,如果要做app内嵌页的话,最好不要选择vue单页面的框架,vue也支持多页面应用啊,哈哈。
金无足赤,在享受一些技术带来的便利的同时,也该了解它们一些方面的不足。懂得做到合理应用才是提高开发效率的不二法门。
用vue做app内嵌页遇到的坑的更多相关文章
- 使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等)
使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等) 前言 移动端页面调试一直是好多朋友头疼的问题,iOS 由于其封闭的特性和整体较高的性能,整体适配相对好做,调试 ...
- app内嵌web的一些问题记录
问题(1)webview里面出现大图预览,点击手机上的返回,应该是图片预览消失 问题(2)键盘输入的时候,键盘会把输入框遮挡 ------------------------------------- ...
- 移动端开发利器vConsole.js,app内嵌H5开发时调试用
vConsole:一个轻量.可拓展.针对手机网页的前端开发者调试面板,主要还是用于内嵌app页面时在手机上进行调试,打印完全和在PC端一样,方便大家找出问题所在. 不说废话直接进入主题,vConsol ...
- 使用Windows安装的最高版本IE内核加载内嵌页(转载)
客户端程序内嵌Webbrowser控件时,默认情况都是使用IE7兼容模式打开网页的.但是IE7有很多新的特性不支持,导致无法正常显示出来,所以需要强制使用高版本的IE内核来加载.渲染. void Ch ...
- app内嵌vue h5,安卓和ios拦截H5点击事件
安卓和ios拦截h5点击事件,这个函数事件必须是暴漏在window下的 安卓和ios拦截普通h5函数: <div onclick = "show(),window.android.sh ...
- ios下app内嵌h5页面是video适配问题
ios下做新闻详情用h5页面实现然后打包到app中,其中新闻详情页会有视频,安卓下video的poster可以做到适应video大小,但是ios下会按照poster图片大小将video等比撑大,但是视 ...
- app内嵌H5网页(webviewJavaScriptBridge)
摘要:使用的插件为webviewJavaScriptBridge,app端需要引入一下这个包,html页面只需一段JS代码 与IOS交互 <! 申明交互(此处代码固定) > functio ...
- 内嵌页js与ios和安卓的交互
ios: 一个iframe,改变url会发送一个请求,把url设置成就是bridge://xxxxx客户端就可以拦截请求,并在全局变量xxxxx中取出一个字符串.例如{event:'click'},可 ...
- app内嵌H5调用分享
最近产品提出了一个需求:我们在合作方的app中提供的部分页面中增加分享页面,具体要求是在3个二维码推广页面调用app的分享接口,分享方式有3种,分别是点击”分享链接“按钮调起分享,点击”分享图片“按钮 ...
随机推荐
- C#操作Excel(读取)
一.使用OleDb,这个法子好像不大好使.容易读错.引用System.Data.OleDb; /**//// <summary> /// 返回Excel数据源 ...
- Maven依赖解析
本文将记录Maven工程中依赖解析机制,内容包括: Maven依赖基本结构 从仓库解析依赖的机制 依赖传递性解析实例 1. Maven依赖基本结构 上篇文章记录了Maven依赖的聚合与继承,POM中依 ...
- 用StringBuilder和StringBuffer实现的Unicode解码方法的比较(Java)
初衷是用正则来写一个Unicode字符串转码的方法,一开始是打算结合StringBuilder写的,但是看到jdk7的Matcher.appendReplacement文档中一段示例代码用了Match ...
- T-SQL的进阶:超越基本级别3:构建相关子查询——701小组
T-SQL的进阶:超越基本级别3:构建相关子查询 格雷戈里·拉森,2014/03/05 原文链接: http://www.sqlservercentral.com/articles/Stairway+ ...
- Ani动态光标格式解析
数据结构: Ani文件中的数据是按区段存放的,区段数据结构如下: 标识符(4字节ASCII),数据长度(一个DWORD),数据 按照此规则来看Ani文件,文件起始12字节可以理解为标准文件头,除数据长 ...
- RecyclerView 加点击事件
在apapter里去实现. View.OnClickListener onClickListener = new View.OnClickListener() { @Override public v ...
- python之列表(list)的使用方法介绍
python之列表(list)介绍 在python的使用过程中,我们经常会用到列表,然而经常会遇到疑惑,下面我将详细介绍下列表使用方法. 一.列表 列表经常用到的功能使增.删.改和查功能. 1. 增 ...
- 解决div里面img标签后面跟着空白符
直接在div里面添加img标签有一个坑,img的高度会莫名添加几个像素的高度,查询之后才知道原来css2出现的问题. 引起这个问题原来是img标签默认基线引起的,vertical-align:base ...
- Java语句语法
一.流程控制语句 1.分支语句 1)if else 语法:(写法1) if(条件1){ //写一次 满足条件1执行在代码 }else if(条件2){ //写0或n次 不满足条件1,满足 ...
- idea—— 模版配置
修改File Header: /** * @author: ${USER} Date: ${DATE} Time: ${TIME} */ 新增Package Header: /* * Copyrigh ...