uniapp从零开始-框架背景与项目创建

1.大前端时代下的跨平台开发

在大前端时代下,前端开发人员仅仅掌握单一的web开发能力已经完全无法满足市场需求。例如我们想要在美团上买一张旅游景点的门票,既可以在美团的Android APP中操作,也可以在美团的IOS APP中操作,还可以在美团的微信小程序端、快手小程序、抖音小程序、支付宝小程序操作。对于顾客来说,不管在哪个平台都可以体验到同样的服务,但对于开发者来说,多一个平台就意味着多一个需要开发的项目。那么能否只使用一套代码就可以在多个平台部署运行呢?市面上有多种跨平台开发方案,例如Uniapp,Flutter,ReactNative,Taro,Weex等。

国内最知名使用最广泛的跨平台解决方案当属uniapp,生态完善,社区活跃,且学习成本极低。目前使用uniapp开发的小程序已达到数十万,uni月活近12亿,是我们学习大前端开发的首选框架。

2.uniapp开发环境搭建

  • uniapp是一个使用vue.js开发的前端跨平台开发框架,你只需要编写一套代码即可发布到Android,IOS,H5,以及多种小程序(抖音/头条/快手/微信/支付宝/QQ/百度)。因此在开发uniapp应用前我们首先应该掌握HTML,CSS,Javascript的使用,其次要掌握比较熟练的vue开发能力
  • 开发uniapp应用使用HBuilderX工具,官网www.dcloud.io/,HBuilderX为uniapp开发做了特别增强

选择文件->新建->项目,输入项目名称和保存路径,选择项目模板,点击创建即可生成一个可运行的uniapp应用。

  • uniapp项目目录的基本结构
css 复制代码
┌─components     uni-app组件目录
│ └─a.vue        项目中可复用的组件 
├─hybrid         存放静态HTML页面的目录(自建) 
├─platforms      存放不同平台专用页面的目录(自建) 
├─pages          业务页面文件存放的目录 
│ ├─index 
│ │ └─index.vue  index页面 
│ └─list 
│   └─list.vue   list页面 
├─static         存放应用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此 
├─common         公共资源,包含less,scss,js等需要编译的资源文件(自建) 
├─api            请求封装(自建) 
├─store          Vuex状态管理(自建) 
├─main.js        Vue初始化入口文件 
├─App.vue        应用配置,用来配置App全局样式以及监听 应用生命周期 
├─manifest.json  配置应用名称、appid、logo、版本等打包信息 
├─pages.json     配置页面路由、导航条、选项卡等页面类信息
└─uni.scss       项目默认样式文件,代码无需引用即生效
  • main.js是整个应用的入口,在这个文件中我们初始化了一个vue实例,定义全局使用到的组件并挂到实例上。
  • App.vue文件是uniapp的主组件所有vue页面的呈现都在App.vue中,是所有页面的父组件。但此文件不可编写视图元素,仅仅用来调用应用生命周期函数,配置全局样式,配置全局存储golbalData。
  • pages.json文件中配置了项目的路由,导航条,选项卡等信息,类似于vue-router中的路由配置文件但比其功能更强,后面我们会详细描述pages.json文件应该包含哪些配置并如何影响我们的小程序功能。

至此,我们了解了uniapp项目的基本结构,后面我们将用一个简单项目举例来详细描述在uniapp开发过程中uniapp是如何构建应用的。

相关推荐
大莲芒4 小时前
react 15-16-17-18各版本的核心区别、底层原理及演进逻辑的深度解析--react17
前端·react.js·前端框架
木木黄木木6 小时前
html5炫酷3D文字效果项目开发实践
前端·3d·html5
Li_Ning216 小时前
【接口重复请求】axios通过AbortController解决页面切换过快,接口重复请求问题
前端
胡八一7 小时前
Window调试 ios 的 Safari 浏览器
前端·ios·safari
Dontla7 小时前
前端页面鼠标移动监控(鼠标运动、鼠标监控)鼠标节流处理、throttle、限制触发频率(setTimeout、clearInterval)
前端·javascript
再学一点就睡7 小时前
深拷贝与浅拷贝:代码世界里的永恒与瞬间
前端·javascript
CrimsonHu7 小时前
B站首页的 Banner 这么好看,我用原生 JS + 三大框架统统给你复刻一遍!
前端·javascript·css
Enti7c8 小时前
前端表单输入框验证
前端·javascript·jquery
拉不动的猪8 小时前
几种比较实用的指令举例
前端·javascript·面试
麻芝汤圆8 小时前
MapReduce 的广泛应用:从数据处理到智能决策
java·开发语言·前端·hadoop·后端·servlet·mapreduce