uniapp---入门、基本配置了解
目录
uniapp
新建项目
uniapp全局配置
组件
1、内置组件
2、扩展 组件 uni-ui
3、第三方组件库 uview-ui 秋云-ucharts (插件市场 )
scss语法(了解)
vue2语法（熟悉）
uniapp
官方文档：uni-app官网
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发一套代码，可以在h5端、app端、小程序端同时使用。
开发一套代码，在微信小程序运行、h5端口、app端（手机模拟器 夜神模拟器）。
新建项目
1.下载夜神模拟器（其他的模拟器也可以）
2.使用HBuilder X新建项目
3. 运行
3.1h5端
3.2app端
如果步骤二出错了，检查模拟器版本问题or调整分辨率，如下
3.3小程序端
uniapp全局配置
index.html
App.vue
main.js
pages.json
globalStyle Object 否 设置默认页面的窗口表现
pages Object Array 是 设置页面路径及窗口表现
easycom Object 否 组件自动引入规则 2.5.5+
tabBar Object 否 设置底部 tab 的表现 组件
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>