【⼩程序+UNIAPP】⼩程序代码转UNIAPP代码（Vue）（⼆）
如果你已经有了⼀个基于vue开发的H5站点，想转换为uni-app。
⾸先注意2个前提：1、你的web站是适合⼿机屏幕的；2、你的H5代码是全后端分离的，uni-app只处理前端代码。
⼀切从新建⼀个uni-app项⽬开始。然后依次进⾏
⽂件处理
把之前的vue web项⽬的前端代码copy到新项⽬下
如果之前的⽂件后缀名是.html，需要改为.vue，并注意遵循vue单⽂件组件SFC规范，⽐如必须⼀级根节点为template、script、
style，template节点下必须且只能有⼀个根view节点，所有内容写在这个根view节点下。
处理页⾯路由
navigator标签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
a 改成 navigator
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写法
css代码处理
uni-app发布到App(⾮nvue)、⼩程序时，显⽰页⾯仍然由webview渲染，css⼤部分是⽀持的。但需要注意
不⽀持 *选择器
没有body元素选择器，改⽤page元素选择器。（编译到⾮H5时，编译器会⾃动处理。所以不改也⾏）
div等元素选择器改为view、span和font改为text、a改为navigator、img改为image…（编译到⾮H5时，编译器会⾃动处理。所以不改也⾏）
不同端的浏览器兼容性仍然存在，避免使⽤太新的css语法，否则发布为App时，Android低端机（Android 4.4、5.x），会有样式错误。当然在App端也可以引⽤x5浏览器内核来抹平浏览器差异。
本⽂是思路，不是⼯具。我们⿎励和欢迎开发者编写垫⽚API和转换器，⽅便更多⼈使⽤。

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