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>