{%hackmd theme-dark %}
###### tags: `中研院` `uniapp`
# UniApp

[TOC]
## 第一部
### HbuilderX
> 內置uni-app的編輯器 以及項目模版

## 第二部
### 目錄結構
- project.config.json
- 配置文件 app的id
- appwaxx
- 小程序專用的 是一個css文件 會是一個全局文件
- manifest.json
- 會配置版本 圖標 等等 應用標示(可去雲端獲取)
- pages.json
- 把需要每一個頁面註冊進然後是以pages為基礎
- main.js
- 程序進行加載的可以把全局內容放置進去
- App.vue
- 可以把全局內容放置進去
- pages
- 最主要更改的部分
- static
- 放入靜態文件

## 第三部
### Vues
>單文件組建規範 意思代表一個vue中最多只有一個 temolat script 多個 style
>

### 尺寸單位
> 寬度百分比 長度為px
> 長度原始是設定為750px，但假如手機超過或是小於的話，uniapp也會自己幫忙縮放
> 假如設計稿寬度為275px，元素b在設計稿上的寬度為200px
> 那麼b在uni-app裡面的寬度為750*200/275

### 樣式導入
>可以使用@import 來導入其他的文件css...
>語法 @import '位置/名字

### 內連樣式
> 在裡面使用 style

//在app.vue裡面的style做修改 
//為全局的做更改
<style>
	.red{color:red};
</style>
//若是在index.vue 做更改的話，受影響的只有本身的頁面

### pages.json
> 用來對uni-app進行全局配置，決定頁面文件路徑，窗口表現
- pages
- 就是在pages底下有的頁面
- 有新的頁面則需要在此做聲明
- pages的第一個為首頁
- globalStyle
- 全局的樣式，像是navigationBarTextStyle或是背景顏色...

### tabBar
> 為像是配置項指定tab欄的表現，底下最多放置五個
> 當position為top為，則不會跑出icon
> 屬性說明
>
>
## 第四部
### vue生命週期
> 從加載到loading到關閉，所產生的週期
> 常見的：

|name | meaning|
|---|------|
|onLoad|監聽頁面加載|
|onShow|監聽頁面顯示|
|onReady|初次渲染完成|
|onPageScroll|監聽頁面滾動|
|onTabItemTap|當前是tab頁面時，點擊tab時觸發|

## 第五部(模板語法及數據綁定)
### 變量賦值
>聲明：位於scipt 底下的data
>使用：在template 使用兩個大括號{{var}}
>注意：vue屬於響應式

:::danger
響應式：當數據變了，底下就會變。有綁定關係，就是你變我也變化
:::

<temlate>
    <view >
        {{title}},{{age}}
    </view>
</temlate>
<script>
var _selg;//先設立一個空值
export default{
    data:{
        title:'uni app...',
        age: 18 
    } ,
    onLoad:funciton(){
        _self = this 
        //當頁面處於onLoad 階段_self就會變成為this
        //this.age =80 ;這裡是錯誤的
        setTimeout(function(){
        //this.age = 80;上下this 是不同的注意！！
        _self.age = 20;
        },3000);
        //當頁面過了3秒鐘後就會產生變化
        //裡面的age就會變成20歲
    }
}
</script>

> 循環表現
> 語法:v-for = '(元素 , index) in 你想要循環的'

<template>
    <view v-for ='(item,index) in students'>
    {{index}}:{{item.name}}:{{item.age}}
    </view>
</template>
<script>
export default {
    data : function(){
        return {
           student:[
           {name:'Mark', age:19},
           {name:'ginger', age :30}
           ] 
    }
}

}
</script>

> v-if 的應用
>

<template>
<view v-if='test'>
    test...
</view>
</template>
<script>
export default{
    data:funciton(){
    return{
        test:true,
        //if 為true 所以會顯示以下的字 
    }
    }
}
</script>


<template>
<view v-if='test'>
    test...
</view>
</template>
<script>

export default{
    data:funciton(){
    return{
        test:false,//這邊會使得上面的條列是為false所以無法執行，所以底下的字樣不會顯示
    }
    }
}
</script>

> :hidden (注意開頭為:) ：是否會藏起來？
> 用法就是 如果為true 則藏起來 false 則會藏起來

<template>
<view v-hidden='test'>
    test...
</view>
</template>
<script>

export default{
    data:funciton(){
    return{
        test:false,//會顯示出來
    }
    }
}
</script>

:::info
if與hidden的差別？
if：先依據條件再決定是否要渲染
hidden：先渲染再根據條件是否顯示
:::

## 第六部
> view 可以想成div

### class的修改
> 1.在view裡面做修改
> 2.在style裡面做修改

<view style='green'>
hihi
</view>

//或是
<view class = 'red'>
hihi
</view>
<style>
.red{colore = red}
</style>

>可以動態綁定樣式
>意思：他是不是紅色取決一個條件式
>用法：:class='{stylename:條件}'

寫法1

<view :class='{red:isRed}'>
//注意！寫法是:class
hihi
</view>
<script>
export default {
data:funciton(){
return :{
isRed: true,
}
}
}
</script>
<style>
.red{color = red}
</style>

寫法2:使用 :class='[條件式? true則跑 :false則跑]'
是使用 []

<view :class='[isRed ? 'red': 'green']'>
//注意！寫法是:class
hihi
</view>
<script>
export default {
data:funciton(){
return :{
isRed: true,
}
}
}
</script>
<style>
.red{color = red;}
.green{color = green;}
</style>

### Style的語法

最初使用

<view style = 'color :red'>
hihi
</view>

使用動態語法

<view :style='{fontSize:fontSize+'px'}'>
hi...
</view>
<script>
var _self;
export default {
    data:{
        fontSize :100,
        //這邊就是只可以動態的做修改
    },
    onLoad : funciton(){
        setTimeout(function(){
            _self.fontSize = 200;//經過3秒onLoad 這層的fontsize就會變成200px
        },3000);//經過3秒
    }
}

</script>

影片範例：

<template>
 <scroll-view class="menus">
  <view v-for="(menu, index) in menus" :class="[index == currentIndex ? 'menuActive' : '']" 
  @click="menuclick" :id="'menu_'+index">
  //@click為如果按下按鈕則執行menuclick這個方法
  //對應到底下的method
  //id為新增他的id值
  {{menu}}</view>
 </scroll-view>
</template>
<script>
export default {
 data: {
  currentIndex : 0,
  menus : [
   '新闻', '汽车', '读书'
  ]
 },
 onLoad:function(options){
  console.log("onLoad");
 },
 onHide:function(){
  console.log("onHide");
 },
 onShow:function(){
  console.log("onShow");
 },
 methods: {
			menuclick :function(e){
				var aid = e.target.id;
				aid = aid.substr(5);
                //代表只選曲str化後的第五個位置的值
				console.log(aid)
			}
 
}
</script>
<style>
.menus{width:700px; margin:0 auto; padding:20px 0px;}
.menus view{padding:8px; line-height:20px; font:38px; float:left;}
.menuActive{color:#900;}
</style>

## 第七部

### uni-app事件

|web事件|uni-app對應的事件|
|----|----|
|click|tap滑鼠按|
|touchstart|touchstart|
|touchmove|touchmove|
|longtap|longtap(長按)|
|input|input(輸入)|
|confirm|confirm(確認鍵)|

事件範例

<template>
 <view>
   <view v-for="(item, index) in students" class="persons" @click="menuClick" v-bind:id="index">{{index}} - {{item.name}}</view>
 </view>
</template>
<script>
export default {
 data: {
  students : [
   {name : "张三", age : 18},
   {name : "李四", age : 20}
  ]
 },
 methods:{
 menuClick : function(e){
  console.log(e);
  console.log(e.target.id);
 }
 },
}
</script>
<style>
.persons{width:750px; line-height:2.2em;}
</style>

>target 與 currentTarget
>currentTarget 比起target來得更精準
>

<view class= 'demo' id ='grey'>
    <view class = 'demo2' id ='red'>
    </view>
</view>

menuclick :function(e){	console.log(e.currentTarget.id)
				console.log(e.target.id)
			},

>所以當點擊紅色區塊
>>currentTarget:red
>>target:grey

>所以當點擊灰色區塊
>> currentTarget:grey
>> target:grey
>>