wex5 教程 前端UI编译原理与记事本编辑
一 前言
wex5页面,与html页面有何差异?两者之前的关系是什么?是如何完成转译的?
能否像编辑html那样用记事本来修改w页面?
wex5前端UI在云部署后能否在云端进行二次编辑,而不需要在wex5编辑器里修改后再次上传??
带着这些问题,重新认识wex5的UI设计与编译原理,有助于我们分离前端开发。
二 页面结构分析:
wex5页面由w.js,css三个页面构成,具体功能与对应关系如下:
三 编译后页面结构
1 在公有云部署时,要将wex5页面进行编译,得到部署需要的Native下的www包。
2 index首页分析
编译后的页面,自动生成一个index.html页面,这里主要是对url进行了跳转前的拼接和判断。相关功能进行了注释。
从中可以看出:
页面跳转前的等待时间,正在努力加载中...... //此处为页面跳转前的提示,可以更改。
window.location.search; //浏览器地址栏里的值会进行取值判断,拼接相应的参数
window.location.hash;//浏览器地址栏里的值从第2个字符取出+设定页面标签值作为url,用location.hash方法使页面具有前进后退能力
2 w页面转译结构:
从中可以看出,w文件又转译成了html和js两个文件
html页面内容
分别对多个页面展开分析:
index.w.html
从中可以看出,所有w页面中相关的页面展示组件与内容进行了标准html5编制译。
index.w.js
w页面中的组件,由组件包构成,通过w.js文件件引入到UI包中,再通过html页面调用wex5提供的组件。
结构如下:
组件包在UI编译时就进行了封装。
由此可以看出,w页面本身不具备浏览器展示能力,需要w.html和展示和w.js的组件调用才能在浏览器中展示。这实际上是说,w页面的展示需要一个小型web应用来完成!!!
正因为如此,我们的w页面在wex5中编辑后必须通过tomcat启动才能正常浏览。
神一样的逻辑,运行一个页面要启动一个web应用来解释运行。
这显然与html的编辑后直接浏览运行差异巨大。
如下图,本来很小的html页面变成了20M的web应用。这是之前没有想到的。
3 主页分析:
首页中主要是页面跳转和映射,在主页中会有大量的组件。
先看w.html
与index.w.html一样,所有展示的组件进行了html标准化的编译。
不同的是,data组件出现在了w.js文件件中
由此可见,data组件在w文件编译过程中,不能进入到html页面中,需要放到w.js文件中,由w.html进行引用。
在w.js中,data组件可以进行修改。比如刷新条数:
经过云端测试,直接在云端修改w.js中的data里的limit的值,可以在前端测试到加载条数发生了变化。由一次加载变成了一次加载6条数据.
4 其它js和css文件没有编译,与标准js和css相同。
四 总结:
1 w页面由w.html和w.js组成的小型web应用来执行,依赖于组件包,必须依赖于tomcat应用服务器才能正常浏览。
2 编辑后的w.html是页面展示部分,w.js是data组件部分。可以用记事本进行二次编辑。
3 w页面由于编译后的转译层级和组件依赖,执行性能明显劣于原生html.
4 data组件一次性加载数据库表所有字段,对资源消费过大。
5 尽量减少wex5封装组件的大规模使用,比如windowContainer,尽量提高页面的性能和速度。
6 所有页面最终表现为w.html,w.js.js,css四个文件,基于此实现了跨平台。
7 基于编译后的标准html,引入codova,加入app打包工具,实现了一次开发,多平台app打包。
如果是初学者,或者只是进行web开发,对wex5页面的原理有清晰的认知, 有助于正确分析页面的流程和选择。
相关视频制作完成,上传优酷。教学app制作中。我是邯郸戏曲开发,tel:15175073123,qq:1017945251
转载于:https://www.cnblogs.com/fangziffff123/p/6965272.html
wex5 教程 前端UI编译原理与记事本编辑相关推荐
- 理解前端Babel编译原理
大厂技术 坚持周更 精选好文 背景 我们知道编程语言主要分为「编译型语言」和「解释型语言」,编译型语言是在代码运行前编译器将编程语言转换成机器语言,运行时不需要重新翻译,直接使用编译的结果就行了. ...
- 大前端开发者需要了解的基础编译原理和语言知识
转自:https://yq.aliyun.com/articles/180879 在我刚刚进入大学,从零开始学习 C 语言的时候,我就不断的从学长的口中听到一个又一个语言,比如 C++.Java.Py ...
- 基于LLVM的编译原理简明教程: 写一个自己的编译器
LLVM简介 进入21世纪,新的编程语言如雨后春笋一样不停地冒出来.需求当然是重要的驱动力量,但是在其中起了重要作用的就是工具链的改善. 2000年,UIUC的Chris Lattner主持开发了一套 ...
- 基于LLVM的编译原理简明教程 (1) - 写编译器越来越容易了
基于LLVM的编译原理简明教程 (1) - 写编译器越来越容易了 进入21世纪,新的编程语言如雨后春笋一样不停地冒出来.需求当然是重要的驱动力量,但是在其中起了重要作用的就是工具链的改善. 2000年 ...
- c语言链表单值化,《编译原理及实践教程》第3章词法分析.ppt
<编译原理及实践教程>第3章词法分析 方法如下: 正规式R?有穷自动机NFA M ? s,t是正规式,相应NFA为N(s),N(t),则正规式R=s|t,构造NFA(R) 为: ? 对应正 ...
- 编译原理Antlr教程
一.安装.配置Antlr 首先,安装配置Antlr前,确保你已经安装好java环境了. 1.下载Antlr4 下载网址:https://www.antlr.org/download/ 选择 Tool ...
- ESP32-C3入门教程 环境篇⑥——ESP-IDF编译原理简述(CMakeLists/CMake)和构建自定义项目
文章目录 一.前言 二.ESP-IDF编译原理 2.1 基础知识 2.2 软件组件 2.3 构建过程 2.4 最简单的示例项目 三.构建自定义项目 3.1 项目重命名 3.2 main.c重命名 3. ...
- 前端零基础编译原理科普
本文是 @神说要有光 对编译小白 ssh 的一次答疑解惑,很适合零基础的新手第一次了解编译原理的概念,故分享出来. 近些年,编译原理在前端领域的应用越来越多,大家比较熟悉的有工程化领域各种转译器:ba ...
- 由 Babel 理解前端编译原理
大厂技术 坚持周更 精选好文 背景 我们知道编程语言主要分为「编译型语言」和「解释型语言」,编译型语言是在代码运行前编译器将编程语言转换成机器语言,运行时不需要重新翻译,直接使用编译的结果就行了. ...
最新文章
- 常用MySQL的命令集锦
- oracle常用函数归纳
- Princess Principal(思维题)
- mapxtreme is still in evalutation!
- android BaseAdapter多布局缓存
- java 静态变量锁_线程中锁方法和静态变量的锁
- PPDE三星私有协议
- 用C++实现文件压缩
- 高德Location
- 超爽的对战游戏3.0版本来了 非常有趣
- 微积分精简版复习提纲
- 用计算机的画图工具画画,电脑绘画软件哪个好用?电脑绘画软件推荐
- 安徽大学计算机科学与技术学院klu,方贤勇 - 安徽大学 - 计算机科学与技术学院...
- 阿里云,华为云哪个更好?
- Airport Simulation (数据结构与算法 – 队列 / Queue 的应用)
- java web底层原理_详解Java开发Web应用程序的底层原理
- 未来软件工作室2019年年会总结
- H3C无线配置需要注意的步骤
- kernel:driver_learn_summary
- 1.27BSC什么意思?
热门文章
- react中使用create-react-app创建项目执行函数两次
- 网络营销专员表示网络营销中设置不当会影响蜘蛛爬虫对网站抓取
- 网页设计千千万,网站建设万万千
- 内链优化对于网站有哪些作用?
- 新网站优化基本流程不可忽视!
- 网站增加外链的基本原则技巧有哪些?
- python对话框机制_Chromium 新的弹窗机制以及 HTML 的 dialog 元素
- 如何利用python整合excel_Python将多个excel文件合并为一个文件
- js get请求_URL解析、HTTP请求以及浏览器和爬虫得到响应的区别
- python处理csv中的缺失值_Python中重复值、缺失值、空格值处理