目录
3、第三方组件库 uview-ui 秋云-ucharts (插件市场 )
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>