uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。
1、下载HBuilderX 官方下载地址
创建uni-app:
文件-新建-项目
选择uni-app,输入项目名称,点击创建,即可成功创建 uni-app。
创建成功后运行,我一般使用微信开发者工具运行,其他运行方式请参照官网,如没有微信开发者工具 下载地址
目录结构:
目录 | 用途 |
---|---|
components | uni-app组件目录 |
pages | 页面文件存放目录,每次新建一个页面,hbuilder X都会在pages.json里面配置好 |
static | 存放应用引用静态资源(如图片、视频等)的地方 |
unpackage | 里面的打包后的东西,可以不用管,h5打包后会放在这个里面的dist/build/h5里面 |
App.vue | 是uni-app的主组件,所有页面都是在App.vue下进行切换的,是页面入口文件,用来配置App全局样式以及监听(应用生命周期) |
main.js | 是uni-app的入口文件,主要作用是初始化vue实例、定义全局组件、使用需要的插件 |
manifest.json | 配置应用名称、appid、logo、版本等打包信息 |
pages.json | 对uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等 |
uni.scss | 预置了一批scss变量预置,是uni-app的样式包 |
在pages.json
文件一些配置实例
{
//设置页面路径及窗口表现
/*
通过 pages 节点配置应用由哪些页面组成
应用中新增/减少页面,都需要对 pages 数组进行修改
*/
"pages": [ //pages节点的第一项为应用入口页
{
"path": "pages/index/index",
"style":