vueh5转换uni-app指南（vue转uni、h5转uni）
如果你已经有了⼀个基于vue开发的H5站点，想转换为uni-app。
⾸先注意2个前提：
1、你的web站是适合⼿机屏幕的；
2、你的H5代码是全后端分离的，uni-app只处理前端代码。
⼀切从新建⼀个uni-app项⽬开始。然后依次进⾏
⽂件处理
1. 把之前的vue web项⽬的前端代码copy到新项⽬下
2. 如果之前的⽂件后缀名是.html，需要改为.vue，并注意遵循，⽐如必须⼀级根节点为template、script、style，template节点下必须且
只能有⼀个根view节点，所有内容写在这个根view节点下。
3. 处理页⾯路由
vuejson转对象uni-app默认是⼩程序的路由⽅式，在pages.json⾥管理页⾯。如果你使⽤vue rooter的话，⼀种是改造为pages.json⽅式，另⼀种是使⽤三⽅插件，⽐如
4. 静态⽂件（如图⽚）挪到static⽬录
uni-app⼯程⽬录下有个static⽬录，⽤于存放静态⽂件，这个⽬录不编译，直接整体copy到发⾏代码⾥的。
如果你希望⾃定义静态资源⽬录，可以在中⾃定义。
标签代码处理
1. 相同功能的组件⾃动转换
uni-app的标签组件与⼩程序相同，⽐如<div>变成了<view>，<span>变成了<text>。
但uni-app的编译器已经⾃动处理了这部分转换，如果源码中写了可⾃动转换的组件，在编译到⾮H5端时会被⾃动转换（再编译回到H5端时div还是div）。
div 改成
span、font 改成
a 改成
img 改成
select 改成
iframe 改成
ul、li没有了，都⽤view替代
2. 区域滚动使⽤scroll-view，不再使⽤div的区域滚动处理⽅式
3. 左右、上下滑动切换，有专门的，不要使⽤div模拟
4. input的search，原来的type没⽤了，改成confirmtype，
5. audio组件不再推荐使⽤，改成api⽅式，
6. 之前的v-html，可以在H5端和App端（需v3编译器）使⽤，不能在⼩程序中使⽤。如需要在⼩程序使⽤，请使⽤rich-text组件或uparse
扩展插件，
js代码处理
uni-app的⾮H5端，不管是App还是各种⼩程序，都不⽀持window、navigator、document等web专⽤对象。
uni-app的API与⼩程序保持⼀致，需要处理这些不同的API写法
1. 处理window api
ajax 改成 quest。（插件市场也有）
cookie、session.storage 没有了，改⽤ uni.storage 吧；local.storage 也改成。另外插件市场有⼀个垫⽚，可使⽤之前的代码，兼容运⾏在uni-app上，
alert,confirm 改成
window的resize 改为了
2. 处理navigator api
geolocation 的定位⽅式改为
useragent的设备api没有了，改⽤
3. 处理dom api
如果使⽤标准vue的数据绑定，是不需要操作dom来修改界⾯内容的。如果没有使⽤vue数据绑定，仍然混写了jquery等dom操
作，需要改为纯数据绑定
有时获取dom并不是为了修改显⽰内容，⽽是为了获取元素的长宽尺⼨来做布局。此时uni-app提供了同⼩程序的另⼀种API，4. 其他js api
web中还有canvas、video、audio、websocket、webgl、webbluetooth、webnfc，这些在uni-app中都有专门的API。
5. ⽣命周期
uni-app补充了⼀批类⼩程序的声明周期，包括App的启动、页⾯的加载，详见
vue h5⼀般在created或者mounted中请求数据，⽽在uni-app的页⾯中，使⽤onLoad或者onShow中请求数据。（组件仍然是created
或者mounted）
6. 少量不常⽤的vue语法在⾮h5端仍不⽀持，data必须以return的⽅式编写，
注意：如果你使⽤了⼀些三⽅ui框架、js库，其中引⽤了包括⼀些使⽤了dom、window、navigator的三⽅库，除⾮你只做H5端，否则需要更换。去uni-app的寻替代品。如果不到对应库，必须使⽤for web的库，在App端可以使⽤来引⼊这些for web的库。
css代码处理
uni-app发布到App(⾮nvue)、⼩程序时，显⽰页⾯仍然由webview渲染，css⼤部分是⽀持的。但需要注意
不⽀持 *选择器
没有body元素选择器，改⽤page元素选择器。（编译到⾮H5时，编译器会⾃动处理。所以不改也⾏）
div等元素选择器改为view、span和font改为text、a改为navigator、img改为（编译到⾮H5时，编译器会⾃动处理。所以不改也⾏）
不同端的浏览器兼容性仍然存在，避免使⽤太新的css语法，否则发布为App时，Android低端机（Android 4.4、5.x），会有样式错误。当然在App端也可以引⽤来抹平浏览器差异。
本⽂是思路，不是⼯具。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。