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

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