uniapp
官方文档：uni-app官网
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发一套代码，可以在h5端、app端、小程序端同时使用。
开发一套代码，在、、app端（）。
用HBuilder创建uniapp项目
h5端口
微信小程序运行
模拟器——手机模拟器 夜神模拟器
同时运行虚拟器，会检测到虚拟器，点击运行即可
uniapp全局配置
index.html
App.vue
main.js
pages.json
| 文件 | 作用范围 | 主要用途 | 平台相关性 |
|---|---|---|---|
index.html | 仅 H5 | Web 入口模板 | H5 专属 |
App.vue | 全平台 | 根组件、全局样式/逻辑 | 所有平台 |
main.js | 全平台 | 初始化 Vue、全局扩展 | 所有平台 |
pages.json | 全平台 | 路由、样式、导航栏等静态配置 | 所有平台（表现可能不同） |
globalStyle Object 否 设置默认页面的窗口表现
pages Object Array 是 设置页面路径及窗口表现
easycom Object 否 组件自动引入规则 2.5.5+
tabBar Object 否 设置底部 tab 的表现
| 配置项 | 是否必填 | 作用 | 示例场景 |
|---|---|---|---|
globalStyle | 否 | 全局页面窗口样式（可被页面覆盖） | 统一导航栏背景色、标题字体 |
pages | 是 | 定义所有页面路径及页面单独样式 | 配置首页、详情页等路由 |
easycom | 否 | 自动引入组件，减少代码量 | 快速使用自定义组件库（如 uView） |
tabBar | 否 | 底部导航栏配置（多模块应用必备） | 微信小程序主页+个人中心切换 |
组件
1、内置组件
视图容器组件：view scroll-view swiper swiper-item
基础内容组件: icon text rich-text
表单组件:form input radio buttom checkbox switch textarea
媒体组件:image radio audio
路由跳转组件:navigator openType="navigate|redirect|switchTab|navigateBack"
map地图
2、扩展 组件 uni-ui
3、第三方组件库 uview-ui 秋云-ucharts (插件市场 )
uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架
scss语法(了解)
<template><view class="outer"><view class="c1"><view class="c11">c1-->c11</view></view><view class="c2"><view class="c11">c2-->c11</view></view></view>
</template>
<script>export default {data() {return {}},methods: {}}
</script>
<style lang="scss">/* css选择器id #标签 标签名类选择 .属性选择器 [name='admin']子元素 >子孙元素 空格通配 **/// .c2{// background-color: gray;// height: 150px;// }// .c2>.c11{// background-color: gold;// height: 100px;// }.c1{.c11{background-color: red;height: 100px;}}.c2{background-color: gray;height: 150px;.c11{background-color: gold;height: 100px;}}</style>
vue2语法（熟悉）
<template><view class="container">{{id}}<button @click="m1()">++</button><button @tap="m1()">++</button></view>
</template>
<script>export default {data() {return {id:1,href: 'https://uniapp.dcloud.io/component/README?id=uniui'}},methods: {m1(){console.log("-----m1-----");this.id = ++this.id;},m2(){console.log("=====m2====");}},mounted() {this.m1();}}
</script>
<style>.container {padding: 20px;font-size: 14px;line-height: 24px;}
</style>