如果你已经有了一个基于vue开发的H5站点，惦念转换为uni-app

首先留神2个前提：

• 你的web站是适合手机屏幕的；
• 你的H5代码是全后端别离的，uni-app只处理前端代码

一切从新建一个uni-app项目开端然后依次进行

文件处理

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

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

3.处理页面路由

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

4.静态文件（如图片）挪到static目次

uni-app工程目次下有个static目次，用于寄存静态文件，这个目次不编译，直接整体copy到发行代码里的
如果你盼望自定义静态资源目次，可以在vue.config.js中自定义

标签代码处理

1.雷同功效的组件自动转换

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替代

2.区域滚动应用scroll-view，不再利用div的区域滚动处理方法

3.左右、上下滑动切换，有特地的swiper组件，不要利用div模拟

4.input的search，原来的type没用了，改动成confirmtype

5.audio组件不再推举应用，改成成api方法，背景音频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 改变成 uni.request（插件市场也有适配uni-app的axios、flyio等封装拦截器）
• cookie、session.storage 没有了，改用 uni.storage 吧；local.storage 也改成成 uni.storage另外插件市场有一个垫片mp-storage，但是应用之前的代码，兼容运转在uni-app上，
• alert,confirm 改动成 uni.showmodel
• window的resize 改成为了 uni.onWindowResize

2.处理navigator api

• geolocation 的定位方法改为 uni.getLocation
• useragent的设备api没有了，改用uni.getSystemInfo

3.处理dom api

• 如果应用规范vue的数据绑定，是不需要操作dom来修改界面内容的如果没有利用vue数据绑定，仍然混写了jquery等dom操作，需要改为纯粹数据绑定
• 有时获得dom并不是为了修改显示内容，而是为了获得元素的长余裕尺寸来做布局此时uni-app提供了同小程序的另一种API，uni.createSelectorQuery

4.其他js api

web中还有canvas、video、audio、websocket、webgl、webbluetooth、webnfc，这些在uni-app中都有特地的API

5.生命周期

uni-app增补了一批类小程序的声明周期，包罗App的启动、页面的加载，详见https://uniapp.dcloud.io/collocation/frame/lifetime
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端可以运用renderjs来引入这些for web的库

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浏览器内核来抹平浏览器差别

本文来源于uni-app官网本文仅供应大家学习，如有侵权及时沟通删除！

<仙宝云（www.szztz.com）是国内著名商城体系及商城网站建设提供商，为企业级商家提供零售商城、B2B2C多用户商城系统、仙宝云商城体系、微信分销体系、小程序商城、商城源码等多端商城网站建设解决方案>

申明：本网站局部文章和图片起源网络编辑，如有侵权及时沟通删除，仙宝商城原创文章，转载恳求注明根源。