搜索

+

95

-

vue写的html页面能转成uni-app吗？

html5 javascript vue

请问vue写的html页面能转成uni-app吗？

网友回复

+

16

-

两种方式

一、webview法

uni-app内置webview指向vue编写的html5网址

二、文件替换法

文件处理

把之前的vue web项目的前端代码copy到新项目下

如果之前的文件后缀名是.html，需要改为.vue，并注意遵循vue单文件组件SFC规范，比如必须一级根节点为template、script、style，template节点下必须且只能有一个根view节点，所有内容写在这个根view节点下。

处理页面路由

uni-app默认是小程序的路由方式，在pages.json里管理页面。如果你使用vue rooter的话，一种是改造为pages.json方式，另一种是使用三方插件，比如vue rooter for uni-app

静态文件（如图片）挪到static目录

uni-app工程目录下有个static目录，用于存放静态文件，这个目录不编译，直接整体copy到发行代码里的。

如果你希望自定义静态资源目录，可以在vue.config.js中自定义。

标签代码处理

相同功能的组件自动转换

uni-app的标签组件与小程序相同，比如<div>变成了<view>，<span>变成了<text>。

但uni-app的编译器已经自动处理了这部分转换，如果源码中写了可自动转换的组件，在编译到非H5端时会被自动转换（再编译回到H5端时div还是div）。

div 改成 view

span、font 改成 text

a 改成 navigator

img 改成 image

select 改成 picker

iframe 改成 web-view

ul、li没有了，都用view替代

区域滚动使用scroll-view，不再使用div的区域滚动处理方式

左右、上下滑动切换，有...

点击查看剩余70%

我知道答案，我要回答

我有问题

私活外包

最新提问