CN115543318A - 基于vue开发的H5应用快速成型为多端应用实现方法 - Google Patents

基于vue开发的H5应用快速成型为多端应用实现方法 Download PDF

Info

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
Application number
CN202211334684.XA
Other languages
English (en)
Inventor
陈朋
鲁嘉睿
张氣箔
张坤洋
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Tianyi Electronic Commerce Co Ltd
Original Assignee
Tianyi Electronic Commerce Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Tianyi Electronic Commerce Co Ltd filed Critical Tianyi Electronic Commerce Co Ltd
Priority to CN202211334684.XA priority Critical patent/CN115543318A/zh
Publication of CN115543318A publication Critical patent/CN115543318A/zh
Pending legal-status Critical Current

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应用快速成型为多端应用实现方法
技术领域
本发明涉及的是信息技术领域，具体涉及基于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成可复用，但仍需注意不支持*选择器。
CN202211334684.XA 2022-10-28 2022-10-28 基于vue开发的H5应用快速成型为多端应用实现方法 Pending CN115543318A (zh)

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)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116701807A (zh) * 2023-06-16 2023-09-05 红石阳光（北京）科技股份有限公司 一种同时支持app、h5加载3D模型的方法

Cited By (2)

* Cited by examiner, † Cited by third party
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