CN115543318A - 基于vue开发的H5应用快速成型为多端应用实现方法 - Google Patents
基于vue开发的H5应用快速成型为多端应用实现方法 Download PDFInfo
- Publication number
- CN115543318A CN115543318A CN202211334684.XA CN202211334684A CN115543318A CN 115543318 A CN115543318 A CN 115543318A CN 202211334684 A CN202211334684 A CN 202211334684A CN 115543318 A CN115543318 A CN 115543318A
- Authority
- CN
- China
- Prior art keywords
- vue
- route
- application
- guardians
- uniapp
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/36—Software reuse
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/60—Software deployment
- G06F8/61—Installation
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Management, Administration, Business Operations System, And Electronic Commerce (AREA)
Abstract
本发明公开了基于vue开发的H5应用快速成型为多端应用实现方法,包括:一、准备工作:一个基于vue开发的移动端h5应用;二、方案流程:(1)依靠uniapp框架提供的脚手架快速生成一个项目空壳;(2)manifest.js文件内配置需要构建的多端应用个性化信息;(3)配置路由,由于uniapp天然不支持路由守卫,但vue项目中绝大多数会使用到路由守卫,因此在配置路由时最好借助轮子uni‑simple‑router,能够最大程度的保持原有的路由配置规则,并支持项目中使用路由守卫;(4)按路由顺序对页面下的vue、css、json等文件进行迁移;(5)根据指令npm i安装项目依赖,并依靠package.json中提供的scripts脚本构建不同平台的应用。本发明通以期最小的改动点,完成单一H5项目到多端应用的快速成型。
Description
技术领域
本发明涉及的是信息技术领域,具体涉及基于vue开发的H5应用快速成型为多端应用实现方法。
背景技术
当前各大互联网公司均在推行自己app下的小程序,业务公司为了引流,也不再单单开发H5应用,而是适当地选择“H5+多平台小程序”进行业务的推广。由于各个平台的小程序代码不糊兼容,加上H5应用,导致开发场景过于复杂,研发、维护的成本越来越高。
针对这一系列问题,本发明提出了一种基于vue开发的H5应用快速成型为多端应用的解决方案,改动点小,拓展程度高。
发明内容
针对现有技术上存在的不足,本发明目的是在于提供基于vue开发的H5应用快速成型为多端应用实现方法,通过依靠uniapp提供的底层框架,以期最小的改动点,完成单一H5项目到多端应用的快速成型。
为了实现上述目的,本发明是通过如下的技术方案来实现:基于vue开发的H5应用快速成型为多端应用实现方法,包括以下步骤:
一、准备工作:
一个基于vue开发的移动端h5应用;
二、方案流程:
(1)依靠uniapp框架提供的脚手架快速生成一个项目空壳;
(2)manifest.js文件内配置需要构建的多端应用个性化信息,如各个小程序的appid、分包、组件等;
(3)配置路由,由于uniapp天然不支持路由守卫,但vue项目中绝大多数会使用到路由守卫,因此在配置路由时最好借助轮子uni-simple-router,能够最大程度的保持原有的路由配置规则,并支持项目中使用路由守卫;
(4)按路由顺序对页面下的vue、css、json等文件进行迁移;
(5)根据指令npm i安装项目依赖,并依靠package.json中提供的scripts脚本构建不同平台的应用。
所述的方案流程(4)具体包括:
1.后缀名为.vue的文件,文件类型保持不变,但需注意将template下的标签做一下处理:
div改成view
span、font改成text
a改成navigator
img改成image
select改成picker
iframe改成web-view
ul、li没有了,都用view替代
2.js代码大部分可直接复用,仅仅需要处理部分不兼容的API,如:
处理window api
处理navigator api
处理dom api
其他js api
3.css的代码99成可复用,但仍需注意不支持*选择器;
本发明具有以下有益效果:
本发明是在无需单独为折叠屏展开态展示写适配的css的前提下,通过对DOM的处理来适配折叠屏下的页面布局。
附图说明
下面结合附图和具体实施方式来详细说明本发明;
图1为本发明的原理架构图。
具体实施方式
为使本发明实现的技术手段、创作特征、达成目的与功效易于明白了解,下面结合具体实施方式,进一步阐述本发明。
参照图1,本具体实施方式采用以下技术方案:基于vue开发的H5应用快速成型为多端应用实现方法,包括以下步骤:
一、准备工作:
一个基于vue开发的移动端h5应用;
二、方案流程:
(1)依靠uniapp框架提供的脚手架快速生成一个项目空壳;
(2)manifest.js文件内配置需要构建的多端应用个性化信息,如各个小程序的appid、分包、组件等;
(3)配置路由,由于uniapp天然不支持路由守卫,但vue项目中绝大多数会使用到路由守卫,因此在配置路由时最好借助轮子uni-simple-router,能够最大程度的保持原有的路由配置规则,并支持项目中使用路由守卫;
(4)按路由顺序对页面下的vue、css、json等文件进行迁移;
(5)根据指令npm i安装项目依赖,并依靠package.json中提供的scripts脚本构建不同平台的应用;
(6)最后将打包的不同平台应用发布到对应平台。
本具体实施方式通过依靠uniapp提供的底层框架,以期最小的改动点,完成单一H5项目到多端应用的快速成型。
以上显示和描述了本发明的基本原理和主要特征和本发明的优点。本行业的技术人员应该了解,本发明不受上述实施例的限制,上述实施例和说明书中描述的只是说明本发明的原理,在不脱离本发明精神和范围的前提下,本发明还会有各种变化和改进,这些变化和改进都落入要求保护的本发明范围内。本发明要求保护范围由所附的权利要求书及其等效物界定。
Claims (2)
1.基于vue开发的H5应用快速成型为多端应用实现方法,其特征在于,包括以下步骤:
(一)、准备工作:
一个基于vue开发的移动端h5应用;
(二)、方案流程:
(1)依靠uniapp框架提供的脚手架快速生成一个项目空壳;
(2)manifest.js文件内配置需要构建的多端应用个性化信息,如各个小程序的appid、分包、组件;
(3)配置路由,由于uniapp天然不支持路由守卫,但vue项目中绝大多数会使用到路由守卫,因此在配置路由时最好借助轮子uni-simple-router,能够最大程度的保持原有的路由配置规则,并支持项目中使用路由守卫;
(4)按路由顺序对页面下的vue、css、json文件进行迁移;
(5)根据指令npm i安装项目依赖,并依靠package.json中提供的scripts脚本构建不同平台的应用。
2.根据权利要求1所述的基于vue开发的H5应用快速成型为多端应用实现方法,其特征在于,所述的方案流程(4)具体包括:
1.后缀名为.vue的文件,文件类型保持不变,但需注意将template下的标签做一下处理:
div改成view;
span、font改成text;
a改成navigator;
img改成image;
select改成picker;
iframe改成web-view;
ul、li没有了,都用view替代;
2.js代码大部分可直接复用,仅仅需要处理部分不兼容的API,如:
处理window api;
处理navigator api;
处理dom api;
其他js api;
3.css的代码99成可复用,但仍需注意不支持*选择器。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202211334684.XA CN115543318A (zh) | 2022-10-28 | 2022-10-28 | 基于vue开发的H5应用快速成型为多端应用实现方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202211334684.XA CN115543318A (zh) | 2022-10-28 | 2022-10-28 | 基于vue开发的H5应用快速成型为多端应用实现方法 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN115543318A true CN115543318A (zh) | 2022-12-30 |
Family
ID=84717839
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202211334684.XA Pending CN115543318A (zh) | 2022-10-28 | 2022-10-28 | 基于vue开发的H5应用快速成型为多端应用实现方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN115543318A (zh) |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN116701807A (zh) * | 2023-06-16 | 2023-09-05 | 红石阳光(北京)科技股份有限公司 | 一种同时支持app、h5加载3D模型的方法 |
-
2022
- 2022-10-28 CN CN202211334684.XA patent/CN115543318A/zh active Pending
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN116701807A (zh) * | 2023-06-16 | 2023-09-05 | 红石阳光(北京)科技股份有限公司 | 一种同时支持app、h5加载3D模型的方法 |
CN116701807B (zh) * | 2023-06-16 | 2024-03-15 | 红石阳光(北京)科技股份有限公司 | 一种同时支持app、h5加载3D模型的方法 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US10325012B2 (en) | Filtered stylesheets | |
CN101916192B (zh) | 用户界面的多语言切换方法和装置 | |
CN110825488A (zh) | 一种业务处理方法、装置及电子设备和存储介质 | |
CN111488149B (zh) | 基于canvas元素的表格渲染方法、装置及计算机设备 | |
CN106991096B (zh) | 动态页面渲染方法及装置 | |
CN108268262A (zh) | 实现将html转换为微信小程序的方法、装置及*** | |
CN113126990B (zh) | 一种页面开发方法、装置、设备及存储介质 | |
US10120660B2 (en) | Systems and methods for producing launchers for a mobile terminal | |
CN101271389B (zh) | 嵌入式藏文智能信息处理方法 | |
CN111158687B (zh) | Java插件的界面生成方法、装置、计算机设备和存储介质 | |
CN115543318A (zh) | 基于vue开发的H5应用快速成型为多端应用实现方法 | |
CN110018876A (zh) | 软件应用国际化的方法、装置和电子设备 | |
CN114996619A (zh) | 一种页面显示的方法、装置、计算机设备及存储介质 | |
CN105069060A (zh) | 一种html文档分页排版方法 | |
CN111951356B (zh) | 基于json数据格式的动画渲染方法 | |
CN110807162A (zh) | 加载占位图的方法和装置 | |
CN114706616A (zh) | 小程序构建方法和装置 | |
CN107145322A (zh) | 组态串口屏及其实现方法 | |
CN102306163A (zh) | 一种基于b2b平台的动态集成技术 | |
CN107070679A (zh) | 一种在不同平台统一发布信息的方法 | |
CN103294463A (zh) | 一种编辑***及方法 | |
CN115543440A (zh) | 安卓项目迁移到类安卓***的方法、电子设备和存储介质 | |
CN112799658A (zh) | 模型训练方法、模型训练平台、电子设备和存储介质 | |
CN112817595A (zh) | 界面渲染方法、装置、存储介质及电子设备 | |
CN115857934A (zh) | 一种根据配置变量文件生成表单页面的方法 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication |