大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
小编给大家分享一下如何使用vue构建移动应用,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
创新互联于2013年创立,先为巴青等服务建站,巴青等地企业,进行企业商务咨询服务。为巴青企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
Vue是一套用于构建用户界面的渐进式JavaScript框架,Vue与其它大型框架的区别是,使用Vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
在移动应用中很多功能都是必不可少的,使用vue构建移动应用自然也就需要实现这些功能。之所以写这篇文章,是希望大家能更多的将注意力放在项目的核心业务上,而不是过多的关注通用功能。
基础设置
使用vue-cli搭建项目框架
在index.html文件中添加,在移动端设置禁止缩放,以便显示合适大小的页面。
如果要将页面封装为app,那么需要将config/index.js中build的assetsPublicPath设置为'./',build获得的页面可以直接打开,而不需要使用服务器。
通用功能
一、页面跳转
一般应用都会拥有多个页面,在vue中通过vue-router来管理页面。移动应用页面跳转时,都有转场效果,在vue中我们也可以实现。
在路由文件中设置meta为数字,meta表示其路由的深度,然后在App.vue中设置:
监听$route,根据to、from meta值的大小设置不同的跳转动画。如果应用到多种跳转动画,可以根据详情,具体情况具体应用。
登录跳转
PS:这里的动画效果引用自animate.scss;
二、底部导航
直接引用Tabbar组件即可,如果需要添加跳转动画可以在
三、数据加载
加载数据与加载页面是存在先后顺序的,比较通用方法是先加载页面,显示数据加载效果,在数据加载完成之后显示完整的页面。数据加载效果作为组件添加到应用中,比较繁琐,所以使用自定义指令的方式实现数据加载效果的显示。
数据加载效果
四、接口文件
import fetch from 'isomorphic-fetch' import store from 'store' import router from './router' var env = process.env.NODE_ENV var rootUrl if (env === 'development') { rootUrl = '' } if (env === 'production') { rootUrl = '' } const post = function (url, params = {}) { return fetch(rootUrl + url, { method: 'post', headers: { 'Content-type': 'application/json; charset=utf-8', 'Authorization': store.get('token') }, body: JSON.stringify(params) }).then(function (res) { if (res.status === 401) { // 没有权限 api.logout() } else { return res.json() } }) } const urls = [ 'classAtCurDate' // 普通接口列表 ] var api = {} for (var url of urls) { (function (url) { api[url] = (params) => { console.log(url) return post('course/' + url, params) } })(url) } // 需要特殊处理的接口 api.logout = () => { store.clearAll() router.push('login') } api.login = (params) => { store.set('id', 1) store.set('token', 2) return Promise.resolve({params}) } export default api
可以在全局设置,也可以在需要时导入
// 在main.js中导入api接口 import api from '../src/api' Vue.$api = Vue.prototype.$api = api
五、登录权限设置
路由加载前,检查是否有登录权限(判断用户id是否存在),如果存在直接跳过登录页进入首页,如果不存在在跳转登录页。
router.beforeEach((to, from, next) => { if (cache.get('id') && to.path === '/login') { next('/index') } else if (!cache.get('id') && to.path !== '/login') { next('/login') } else { next() } })
六、常用第三方组件
许多常用组件都已经有了很好的实现,在项目开发中重复造轮子是一件很不明智的事情。vue移动应用有很多合适的库可以选择,如mint-ui、vux,这里不一一列举,想了解更多的可以自行谷歌,或直接到GitHub上搜索,这里已mint-ui为例,讲一下比较常用的一些组件。
提示组件
提示组件即显示信息、提示用户的组件,toast、alert、 prompt皆为此类。
加载数据
如上拉加载数据、下拉加载(刷新)数据、滚动加载数据;这些在mint-ui中有较好的实现
日期选择
比较通用的功能,但自己实现起来还是相对麻烦的,借助第三方组件就可以很快的实现了。
使用第三方组件虽然能够快速完成项目,但是不建议过度使用,一些常用的组件如按钮、表单还是应该自己实现,一是因为这些组件实现不是很复杂,二是因为往往对这些组件每个应用都有自己的设计要求,使用第三方然后修改样式,不但比自编写更复杂而且增加冗余文件。
使用第三方组件库,一般有两种导入方式:一是全部导入,这样会引入很多不必要的文件;二是只导入使用的组件和样式。建议使用第二种方式,避免导入多余组件,mint-ui可以使用Use babel-plugin-component简化单独导入组件的写法。
看完了这篇文章,相信你对“如何使用vue构建移动应用”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!