uni-app
是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。
uni-app工目录结构
┌─uniCloud 云空间目录,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb(详见uniCloud)
│─components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─utssdk 存放uts文件
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用的本地静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─uni_modules 存放[uni_module](/uni_modules)。
├─platforms 存放各平台专用页面的目录,详见
├─nativeplugins App原生语言插件 详见
├─nativeResources App端原生资源目录
│ ├─android Android原生资源目录 详见
| └─ios iOS原生资源目录 详见
├─hybrid App端存放本地html文件的目录,详见
├─wxcomponents 存放小程序组件的目录,详见
├─unpackage 非工程代码,一般存放运行或发行的编译结果
├─AndroidManifest.xml Android原生应用清单文件 详见
├─Info.plist iOS原生应用配置文件 详见
├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息,详见
├─pages.json 配置页面路由、导航条、选项卡等页面类信息,详见
└─uni.scss 这里是uni-app内置的常用样式变量
index.vue基础配置
<!--一个页面内,有3个根节点标签
<template>、<script>、<style>,分别是模板组件区、脚本区、样式区。
template的二级节点只能有一个节点,一般是在一个根view下继续写页面组件
template与html的区别在于,html中写的是web标签,但vue的template中写的全都是vue组件,
每个组件支持属性、事件、vue指令,还可以绑定vue的data数据。-->
<template>
<view>
</view>
</template>
<script>
export default {
}
</script>
<style>
</style>
快速上手
1.下载HBuilderX
官方下载地址:HBuilderX-高效极客技巧 (dcloud.io)
2.新建项目
文件-新建-项目
3.新建页面
pages文件夹下,右键新建
使用scss的页面(即super css)即在style标签上增加lang属性,使其可以实现标签的嵌套
4.查看配置文件--pages.json
页面在数组中的顺序决定了哪个页面被最先打开
其中navigationBarTitleText项代表了当前页面的名字
5.运行
菜单栏----运行----运行到浏览器/小程序模拟器