1. uni-app 介绍
1.1 什么是uni-app
https://uniapp.dcloud.io/README
uni-app 是一个使用Vue.js 开发所有前端应用的框架。开发者编写一套代码,可发布到IOS,Android,H5,以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。
即使不跨端,uni-app 也是更好的小程序开发框架。
1.2 为什么要学习uni-app
为什么要学习uni-app:相对开发者来说,减少了学习成本
1.3 环境搭建
1.安装编辑器HbuilderX,HbuilderX 是通用的前端开发工具,但为uni-app做了特别强化。下载App 开发版开箱即用
2.安装微信开发者工具
1.4 利用HbuilderX 初始化项目
点击HbuilderX 菜单栏文件 -> 新建 -> 项目
选择uni-app类型,输入工程名,选择模板,点击创建,即可成功创建
1.5 运行项目
1.浏览器运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器,即可在浏览器里面体验uni-app 的 H5 版。
2.真机运行:连接手机,开启USB调试,进入hello-uniapp项目,点击工具栏的运行 -> 真机运行 -> 选择运行的设备,即可在该设备里面体验uni-app。
如手机无法识别,请点击菜单运行-运行到手机或模拟器-真机运行常见故障排查指南。 注意目前开发App也需要安装微信开发者工具
3.在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具,即可在微信开发者工具里面体验uni-app。
注意:如果是第一次使用,需要先配置小程序ide的相关路径,才能运行成功。如下图,需在输入框输入微信开发者工具的安装路径。 若HBuilderX不能正常启动微信开发者工具,需要开发者手动启动,然后将uni-app生成小程序工程的路径拷贝到微信开发者工具里面,在HBuilderX里面开发,在微信开发者工具里面就可看到实时的效果。
1.6 介绍项目目录和文件作用
pages.json 文件用来对uni-app 进行全局配置,决定页面文件的路径,窗口样式,原生的导航栏,底部的原生tabbar 等。
mainfest.json 文件时应用的配置文件,用于指定应用的名称,图标,权限等。
App.vue 跟组件,所有页面都是在App.vue 下进行切换,是页面的入口文件,可以调用应用的生命周期函数
main.js 是项目入口文件,主要作用是初始化vue实例并使用需要的插件
uni.scss 文件时为了方面整理控制应用的风格。比如按钮颜色,边框风格,uni.scss 文件预制了一批scss 变量
unpackage 是打包目录,在这里有各个平台的打包文件
pages 所有的页面存放目录
static 静态资源目录,例如图片等
components 组件存放目录
1.7 开发规范
为了实现多端兼容,综合考虑编译速度、运行性能等因素,uni-app 约定了如下开发规范:
页面文件遵循 Vue 单文件组件 (SFC) 规范
组件标签靠近小程序规范,详见uni-app 组件规范
接口能力(JS API)靠近微信小程序规范,但需将前缀 wx 替换为 uni,详见uni-app接口规范
数据绑定及事件处理同 Vue.js 规范,同时补充了App及页面的生命周期
为兼容多端运行,建议使用flex布局进行开发