目錄

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>
?