假如你平常用Vue写H5项目比力多，然后忽然有一天公司要你用uni-app来同时开发H5和小程序（乃至App），而你却对uni-app不认识，那么这篇文章或许适当你。
下面我将从以下几个维度出发，总结uni-app开发与Vue开发的差别之处。
① 项目搭建
② 设置文件
③ 内置组件
④ 数据哀求
⑤ 其他
一、项目搭建
uni-app项目搭建有两种方式，一种是通过vue-cli下令行方式，一种是通过HBuilderX可视化界面方式，新手推荐直接使用第二种方式，简朴快捷，下载按照好HBuilderX开发工具后，点击顶部工具栏里的文件 -> 新建 -> 项目（快捷键Ctrl+N）后即可创建。
HBuilderX下载链接： https://www.dcloud.io/hbuilderx.html
二、设置文件
uni-app设置文件重要有三个：manifest.json、pages.json和package.json。
manifest.json是应用的设置文件，用于指定应用的名称、图标、权限等。在开发小程序时必要添加以下设置选项：
"mp-weixin": { "appid": "", // 此处须填写小程序的appid，否则无法用真机预览 "lazyCodeLoading": "requiredComponents" // 组件按需注入}pages.json文件用来对 uni-app 举行全局设置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。在uni-app项目中无需使用vue-router，页面路由就是在pages.json文件中设置的。
package.json文件通常是用于设置安装依赖的，这点与Vue雷同。除此之外，我们还可以在此中设置扩展web和小程序平台，具体设置方法详见 → https://uniapp.dcloud.net.cn/collocation/package.html
三、内置组件
本文枚举几个常见的与H5开发差别的内置组件，更多相关内容请直接到uni-app官网检察 → https://uniapp.dcloud.net.cn/component/view.html
1. <navigator>
<navigator>相称于Vue项目中的<router-view>，但使用方式略有差别。
<navigator url="/pages/home/index">首页</navigator>url属性值必须是在pages.json中pages里设置好的，假如必要通报参数，吸收该参数的页面中必要通过生命周期中的onLoad钩子函数来吸收，比方：
<navigator url="/pages/home/index?id=1">首页</navigator>export default { onLoad: function (option) { //option为object范例，会序列化上个页面通报的参数 console.log(option.id); //打印出上个页面通报的参数。 }}2. <scroll-view>
在H5中，假如要实现页面内的局部滚动，我们可以直接使用CSS属性overflow: auto即可实现，可小程序中并不支持，以是这时我们就必要使用<scroll-view>来替代。不外必要注意的是，假如是纵向滚动，我们必要给<scroll-view>添加scroll-y属性，并给其CSS添加固定高度，比方：
<scroll-view scroll-y>滚动部门</scroll-view>/*具体高度根据现实项目而定*/height: 200px; * 返回顶部问题
<scroll-view>有个scroll-top属性，我们可以通过设置该属性值，让其滚动到指定位置（比如返回顶部）。但是当我们手动滑动页面让<scroll-view>滚动时，scroll-top属性值并不会随之改变，这时间我们再次设置与之前雷同的scroll-top属性值后，<scroll-view>不会发生滚动。比方：
<scroll-view scroll-y :scroll-top="scrollTop"></scroll-view>export default { data() { return { scrollTop: 0 } }, methods: { goTop: function(e) { // 返回顶部 this.scrollTop = 0; // 无效 } }}对于此问题，uni-app官方给出的方案是，在scroll事故实验的方法中，将滚动条位置生存下来，之后当我们实验返回顶部方法时，先将scrollTop设置为生存下来的该位置，然后再将scrollTop设置为0。具体代码如下：
<scroll-view scroll-y="true" :scroll-top="scrollTop" @scroll="scroll"></scroll-view>export default { data() { return { scrollTop: 0, old: { scrollTop: 0 } } }, methods: { scroll: function(e) { this.old.scrollTop = e.detail.scrollTop }, goTop: function(e) { this.scrollTop = this.old.scrollTop this.$nextTick(function() { this.scrollTop = 0 }); } }}此方法固然是可以办理问题的，但是看起来并不敷简朴直观。起首我们要知道，产生该问题的重要问题在于，当重复设置组件某些属性为雷同的值时，不会同步到view层，以是我们只必要先改变初始值为一个非0值，再将该值设置为0即可。比方：
export default { data() { return { scrollTop: 0 } }, methods: { goTop: function(e) { // 返回顶部 this.scrollTop = 0.01; // 设置为非0且靠近于0的值 this.$nextTick(() => { this.scrollTop = 0; }); } }}3. <swiper>
在小程序中没有window和document等对象，以是不能使用雷同Swiper.js如许的JS插件，而uni-app自身也提供了<swiper>组件，我们必要开发轮播图功能时就可以直接拿来使用即可。
4. <image>
在H5中加载图片必要用到<img>标签，而uni-app中必要用<image>组件来实现，而且它默认是有宽高的（宽度 320px、高度 240px），假如要让图片高度自顺应的话，必要加上mode="widthFix"属性。
四、数据哀求
数据哀求我们可以使用axios来做数据拦截，但是具体哀求时还是必要用uni-app提供的uni.request()API，比方：
// request.jsimport axios from 'axios'import qs from 'qs'// 创建axios实例const service = axios.create();const baseUrl = ''; // 此处填写接口相对URL，用于拼接在url前面service.defaults.timeout = 30000;service.defaults.baseURL = baseUrl;axios.defaults.adapter = function(config) { return new Promise((resolve, reject) => { let data = config.method === 'get' ? config.params : config.data; uni.request({ url: baseUrl + config.url, method: config.method || 'get', header: { 'content-type': 'application/x-www-form-urlencoded' }, data: data, success: (res) => { return resolve(res) }, fail: (err) => { return reject(err) } }) })};// request拦截器service.interceptors.request.use( config => { uni.showLoading({ title: '加载中' }); if (config.method === 'post') { config.data = qs.stringify(config.data); } return config; }, error => { console.log(error) Promise.reject(error) });// response 拦截器service.interceptors.response.use( response => { uni.hideLoading(); const res = response.data; if (res.code === 500) { uni.showToast({ icon: 'none', title: res.msg }); return Promise.reject('error') } else { return response.data } }, error => { uni.showToast({ icon: 'none', title: '未知错误' }); return Promise.reject(error) })export default service;// index.jsimport request from './request.js';// 哀求列表export function getList(data) { return request({ url: '/list', params: data });}五、其他
1. 自定义组件
我们在引入自定义组件时，必要直接在模板页面中引入，不能在另外的js文件引入，否则在小程序中自定义组件将无法在页面中乐成渲染。
2. 样式
小程序不支持在 css 中使用本地文件，包罗本地的配景图和字体文件。我们可以使用网络文件或base64替代。
3. 弹层提示
弹层提示在项目中使用频率非常高，就是像“加载中”、“提交乐成”之类的提示，弹出提示后几秒钟就自动潜伏。
在使用Vue开发H5时，对于如许的弹层提示，我们通常都是本身封装组件，然后通过js来调用。但是在uni-app中，则可以直接使用uni.showLoading()和uni.showToast()来实现如许的弹层提示，非常方便。为了更加轻巧，我们还可以在此底子上再封装一层，比方：
// 定义全局方法便于调用Vue.prototype.$message = (msg, icon) => { uni.showToast({ title: msg, icon: icon ? icon : 'none' })}this.$message('请输入手机号');this.$message('提交乐成', 'success'); |
