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

[TOC]

Chapter 1: HbuilderX
===

###### tags: `uniapp` `Chapter1`
- 內置uni-app的編輯器 以及項目模版

Chapter 2: 目錄結構
===

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

Chapter 3: Vue
===

###### tags: `uniapp` `Chapter3`
單文件組建規範 意思代表一個vue中最多只有一個 temolat script 多個 style

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

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

:books: 內連樣式
---
- 在裡面使用 style

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

:books: pages.json
---

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

:books: tabBar
---

- 為像是配置項指定tab欄的表現，底下最多放置五個
- 當position為top為，則不會跑出icon
- 屬性說明

Chaprter 4: 生命週期
===

###### tags: `uniapp` `Chapter4`

:::info
- onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为object（用于页面传参），参考示例
- onShow 监听页面显示
- onReady 监听页面初次渲染完成
- onHide 监听页面隐藏
- onUnload 监听页面卸载
- onPullDownRefresh 监听用户下拉动作
- onReachBottom 页面上拉触底事件的处理函数
- onShareAppMessage 用户点击右上角分享 微信小程序
- onPageScroll 监听页面滚动
- onTabItemTap 当前是 tab 页时，点击 tab 时触发
:::

:books: **頁面生命週期**
---
- 加載頁面時，加載過程稱為onLoad,完成加載並準備好後稱為onLoad。若加載後出現渲染過程稱為onShow。當使用過程中將視窗隱藏則稱為onHide,再次點開後回到onShow。最終關閉頁面時則為onClose。因此，該過程稱為頁面生命週期。

:mag: 使用過程
---

<script>
export default {
    data:{
        title : 'Hello....',
    },
    onLoad : function(e){
        console.log(e);
    }
}
</script>

- Data{} ：輸入內容
- function(onLoad{},..) : 插入對應屬性，可同時多個屬性，以便於應變某種情況產生

Chapter 5: 模板语法及数据绑定
===

###### tags: `uniapp` `Chapter5`
:books: 申明變數與綁定
---
- 在.vue檔案中data{}裡建立
- 在view標籤設定對應關係【綁定】
- 變數內容可被改變（只需在設定function時，『建議方式』透過建立空變數然後用this功能給予回應，進而覆蓋舊內容
### Note： 3000 = 3秒

<template>
    <view>
    </view>
</template>
<script>
var _self;
export default {
    data:{
        title: 'uni app...',
        age: 18
    },
    onLoad:function(){
        _self = this;
        setTimeout(function(){
            _self.age = 20
        },300);
    }
}
</script>
<style>
</style>

:mag: 使用過程（v-for）
---

<template>
    <view>
        <view v-for="(item,index) in students">
            {{index}} - {{item.name}} : {{item.age}}
        </view>
    </view>
</template>
<script>
var _self;
export default {
    data:{
        students : [
           {name : "张三", age : 18},
           {name : "李四", age : 20}
        ]
    }
}
</script>
<style>
</style>

### Note： 無法在根節點（root element）下使用v-（function），可增加多一層view來解決。
- view表現進行迴圈，用綁定關係來print出有關內容
- 於data中嵌入students之list，並透過迴圈print出來

:mag: 使用過程（v-if）
---

<template>
    <view>
        <view v-if = "test">
            test...
        </view>
    </view>
</template>
<script>
var _self;
export default {
    data:{
        test : true,
    }
}
</script>
<style>
</style>

- 在data中建立變數與對應值
- 在view標籤進行判斷是否打印
- true：print ： false：unprint

:mag: 使用過程（v-hidden）
---

<template>
    <view>
        <view v-hidden = "test">
            test...
        </view>
    </view>
</template>
<script>
var _self;
export default {
    data:{
        test : false,
    }
}
</script>
<style>
</style>

- true：hide： false： unhide

### Note: if會根據條件決定是否渲染，hidden會渲染但根據條件決定是否展示。『建議方式』先渲染再使用hidden處理，會使頁面更快。如果不渲染，再根據條件渲染的話可能會出現卡頓。

Chapter 6：class 和 style
===

###### tags: `uniapp` `Chapter6`

:closed_book: .vue架構
---
### vue架構可分為3點，即：
#### 1. template: 可視為html中的div，可使用class、id
#### 2. script: 內容撰寫
#### 1. style: 與css相似

:mag: 使用過程
---

- 與html相似，在data中建立一個boolean（isRed）變數，並在view標籤中進行判斷，該寫法有兩種方式：
- 例子 1：

<template>
    <view>
        <view :class="{red:isRed}">
            hi....
        </view>
    </view>
</template>

### Note: 程式碼中，red為class name，其涵義為若isRed為True，則回傳給class = “red”，因此隨著class之內容，字體顯示紅色。

- 例子 2：

<template>
    <view>
        <view :class="[isRed ? 'red' : 'green']">
            hi....
        </view>
    </view>
</template>

### Note: 程式碼中，red為class name，其涵義為若isRed為True，則回傳給class = “red”，因此隨著class之內容，字體顯示紅色，若isRed不等於True，則回傳給class = “green”。

Chapter 7: 事件及事件綁定
===

###### tags: `uniapp` `Chapter7`

::: success
# uni-app 事件
#### 事件映射表，左侧为 WEB 事件，右侧为 uni-app 对应事件
- click: 'tap',
- touchstart: 'touchstart',
- touchmove: 'touchmove',
- touchcancel: 'touchcancel',
- touchend: 'touchend',
- tap: 'tap',
- longtap: 'longtap',
- input: 'input',
- change: 'change',
- submit: 'submit',
- blur: 'blur',
- focus: 'focus',
- reset: 'reset',
- confirm: 'confirm',
- columnchange: 'columnchange',
- linechange: 'linechange',
- error: 'error',
- scrolltoupper: 'scrolltoupper',
- scrolltolower: 'scrolltolower',
- scroll: 'scroll'
:::

:closed_book: 注意事項
---
1. 以上為通用組件，若原本存在於小程序語言或html中，但沒被歸類在通用組件，可在該function中加上'@'來使用。
2. 其中@regionchange,同时这个事件也非常特殊，它的 event type 有 begin 和 end 两个，导致我们无法在handleProxy 中区分到底是什么事件，所以你在监听此类事件的时候同时监听事件名和事件类型既 <map @regionchange="functionName" @end="functionName" @begin="functionName">
3. 平台差異所致，bind和catch時間同時綁定，只會出發bind，catch不會被觸發。
4. 不要在view標籤中建立屬於自己的屬性。（原本：class=""、id="" ， 自創：mystr=""）
#### Reference: https://blog.csdn.net/Jeremy__Lin/article/details/80629588

:mag: 使用過程
---

<template>
 <view class="demo" @click="clickTest" @longtap="longtap"></view>
</template>
<script>
export default {
 methods:{
  clickTest: function(e){
   console.log(e);
   console.log('click');
  },
  longtap: function(e){
   console.log(e);
   console.log('longtap');
  }
 }
}
</script>
<style>
.demo{width:500px; margin:50px auto; background:#8F8F90; height:500px;}
</style>

### Note: 若要建立一個方法的話（@click,@longtap）,可以在view標籤設定方法名稱後到script標籤建立一個methods屬性（方式與data相似），然後按照方法名稱去建立有關function。

Chapter 8: 基礎組件
===

:books: View（視圖片容器，似div）
---

### 屬性說明
|屬性名|類型|默認值|說明|
|---|----|-----|------|
|hover-class|string|none|select的按下去會有一個點擊效果|
|hover-start-time|Number|50|按著多久後出現其他狀態|
|hover-stay-time|Number|400|手指鬆開後點擊狀態
保留時間|

## scroll-view
- 可滾動的視圖區域

**屬性說明**
|屬性名|類型|默認值|說明|
|---|----|-----|------|
|scroll-x|Boolean|false|允許橫向滾動|
|scroll-y|Boolean|false|允許縱向滾動|

- 橫向滾動
- 除了在scroll-view打入scroll-x='true'
- 還要加入
- flex-wrap :nowrap;
- white-space: nowrap;
- display: inline-block;


## swiper
- 就是底下那張圖的樣式，往左右底下的點點會跟著動


**屬性說明**
|屬性名|類型|默認值|說明|
|---|----|-----|------|
|indicator-dots|Boolean|false|當前進度點|
|indicator-color|Color|ggba(0,0,0,.3)|指示點顏色|
|current|Number|0|當前所在的index|
|autoplay|Boolean|false|是否自動切換|
|interval|Number|5000|自動切換時間|

## Text

<view>
    <view>
    <text>{{text}}</text>
    </view>
    <view>
        <button @click="add">add line</button>
    </view>
</view>

<script>
export default {
    data() {
        return {
            texts: [
            'hihi','ginger''abc
            ],
            text: '',
            canAdd: true,
            canRemove: false,
            extraLine: []
        }
    },
    method:{
    add:function(e){
    this.extraLine.push(this.texts[this.extraLIne.length]);
    //extraLine是從0開始所以會先加入texts[0]。
    this.text = this.extraLine.join('\n');
    }
    }
    
}
</script>

## rich-text（富文字）

|屬性名|類型|默認值|說明|
|---|----|-----|------|
|nodes|Array/String|[]|節點列/Html String|

## 元素節點 type = node

|屬性名|類型|默認值|是否必填?|備註|
|---|----|-----|------|---|
|name|標籤名|String|是|-|
|attrs|屬性|Objext|否|-|
|children|子節點列表|Array|否|結構和nodes一致|

## 文本節點 type = text

|屬性名|類型|是否必填?|說明|
|---|----|-----|------|---|
|text|String|是|文本|

類型1:nodes為array樣子

<view>
    <view>
		<rich-text :nodes="nodes" ></rich-text>
	</view>
	
</view>

<script>
export default {
    data() {
        return {
            nodes: [{
                name: 'div',
                attrs: {
                    class: 'div-class',
                    style: 'line-height: 60px; color: red; text-align:center;'
                },
                children: [{
                    type: 'text',
                    text: 'Hello&nbsp;uni-app!'
                }]
            }],
            
        }
    }
}
</script>

類型2:string

<view>
    <view>
    <rich-text :nodes="strings"></rich-text>
    </view>
	
</view>

<script>
export default {
    data() {
        return {
            
            strings: '<div style="text-align:center;"><img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/[e-mail]"/></div>',
        }
    }
}
</script>


### :dog: progress
> 進度條

|屬性名|類型|默認值|說明|
|---|----|-----|------|
|percent|Float|無|百分比1~100%|
|show-info|Boolean|False|是否在進度條旁邊顯示百分比|
|stroke-width|Number|6|進度條寬度,單位px|

<progress show-info='true' percentage=20% stroke-width='' ></progress>


## 第九部（表單及表單組件

### :rabbit: Button
|屬性名|類型|默認值|說明|
|---|----|-----|------|
|size|String|default|按鈕大小|
|type|String|default|按鈕的樣式類型，分成3種(下面)|
|disabled|Boolean|false|是否禁用|
|loading|Boolean|false|是否帶著loading圖|
|open-type|String|-|開放能力(下面)|

***type***
|屬性名|說明|
|---|------|
|primary|最簡單的樣式，web、手機顏色不同|
|default|白色|
|warn|紅色|

***open-type***
|屬性名|說明|
|---|------|
|feedback|用戶可提交反饋內容|
|share|觸發用戶轉發|

	<view >
            <button type="primary">页面主操作 Normal</button>
            <button type="primary" loading="true">页面主操作 Loading</button>
            <button type="primary" disabled="true">页面主操作 Disabled</button>
            <button type="default">页面次要操作 Normal</button>
            <button type="default" disabled="true">页面次要操作 Disabled</button>
            <button type="warn">警告类操作 Normal</button>
            <button type="warn" disabled="true">警告类操作 Disabled</button>
           
            </view>


### :rabbit: Checkbox-group
>多項選擇器，由多個checkbox構成

***checkbox屬性說明***
|屬性名|類型|說明|
|---|----|--|
|value|String|選中時觸發<checkbox-group> 的 change 事件，並且携带 <checkbox> 的 value。|
|checked|Boolean|當前是否選中｜

<checkbox-group @click="check">
		<checkbox value="study" />stduy
		<checkbox value="sleep" />sleep
</checkbox-group>
<script>
export default{
    methods:
    check:function(e){
    console.log(e)
    }
}
</script>


### :rabbit: Label
> 使用for 屬性能找到對應的id，當點擊時，就會觸發對應的事件。
> 目前可以綁定的物件

|屬性名|類型|說明|
|---|----|--|
|for|String|綁定物件的id|

<checkbox-group @click="check" @change="change">
	<label v-for="item in items">	
		<checkbox :value="item.value" />{{item.name}}
	</label>
</checkbox-group>
<script>
export default {
		data: function(){
			return{
				items: [{
                        value: 'USA',
                        name: '美国'
                    },
                    {
                        value: 'CHN',
                        name: '中国',
                        checked: 'true'
                    },
                    {
                        value: 'BRA',
                        name: '巴西'
                    },

                ]
            }
        },
</script>


### :rabbit: Input

|屬性名|類型|默認值|說明|
|---|----|--|-----|
|value|String||輸入框的初始內容|
|type|String|text|input的類型
|password|Boolean|false|是否密碼類型|
|maxlength|Number|140|最大輸入長度|
|@confirm|EventHandle||点击完成按钮时触发，event.detail = {value: value}|

<view >
	<view>
		對話:{{inputvalue}}
	</view>
	<input type="text" @input='getvalue' value="input something" />
</view>
<script>
export default{
	data:function(){
		return{
			inputvalue:''
		}
	},
	methods: {
			getvalue:function(e){
				this.inputvalue = e.target.value
				console.log(e.target.value)
			},
			check:function(e){
				console.log(e)
			},
			add:function(e){
				this.extraLine.push(this.texts[this.extraLine.length]);
					this.text = this.extraLine.join('\n');
				
			},
			menuclick :function(e){
				console.log(e.currentTarget.id)
				console.log(e.target.id)
			},
			longtap:function(e){
				console.log('this is long tap')
			}
		}
	
}		


</script>


### :rabbit: Picker
> 從底部彈起的，滾動選擇器
> 目前有五種透過mode區分，普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。

普通选择器
mode = selector

|屬性名|類型|默認值|說明|
|---|----|--|-----|
|range|Array / Array＜Object＞| |mode为 selector 或 multiSelector 时，range 有效|

### :rabbit: switch
|屬性名|類型|默認值|說明|
|---|----|--|-----|
|checked|Boolean|false|是否被選中|
|@change|EventHandle||checked改变时触发 change 事件，event.detail={ value:checked}|

>語法

 <switch checked @change="switch1Change" />
 
<switch  @change="switch2Change" />

### :rabbit: Textarea
>多行輸入框

|屬性名|類型|默認值|說明|
|---|----|--|-----|
|value|String||輸入框的初始內容|
|type|String|text|input的類型
|password|Boolean|false|是否密碼類型|
|maxlength|Number|140|最大輸入長度|
|@confirm|EventHandle||点击完成按钮时触发，event.detail = {value: value}（微信小程序、百度小程序)|
|@blur|EventHandle||輸入框失去焦點觸發，意思就是點到其他地發時|

<view class="uni-title uni-common-pl">輸入對話:</view>
	<textarea @blur="bindTextAreaBlur" auto-height />
<script>			
export default{
	data:function(){
		return{
			
		}
	},
	methods: {
			 bindTextAreaBlur: function (e) {
            console.log(e.detail.value)
        }
	}
}			
		
</script>


## 第十部(導航及頁面跳轉)
### Navigator

組建
|屬性名|類型|默認值|說明|
|---|----|--|-----|
|url|String||跳轉連接，如"../first/first"，是以自己的頁面為基準。注意不能加 .vue |
|open-type|String|navigate|跳轉方式|
|delta|Number||当 open-type 為 'navigateBack' 時有效，表示回退的層|

***open-type有效值***

|屬性名|說明|
|---|-----|
|navigate|對應 uni.navigateTo 的功能|
|redirect|對應 uni.redirectTo 的功能 |
|switchTab|對應 uni.switchTab 的功能|
|navigateBack|對應 uni.navigateBack 的功能|

窗口
#### uni.navigateTo(OBJECT)
>保留當前页面，跳轉到某個頁面，使用uni.navigateBack可以返回到原頁面。

|屬性名|類型|必填|說明|
|---|----|--|-----|
|url|String|是|跳轉頁面，路径后可以带参数。参数与路径之間使用?分隔。 'path?key=value&key2=value2'，path為下一个页面的路径，下一个页面的onLoad函数可得到传递的参数|
|success|Function|否|接口调用成功的回调函数|

:::danger
注意：
1.跳轉到 tabBar 頁面只能使用 switchTab 跳轉
2.路由API的目標页面必须是在pages.json里注册的vue頁面。如果是開web url，在App平台可以使用 plus.runtime.openURL或web-view组件
:::

方法1用組件方式

<navigator url='../test' open-type="navigate">
		<button >到about</button>
	</navigator>

方法2用窗口

<button @click="use">到test</button>
<script>
export default{
	methods: {
		use:function(){
			uni.navigateTo({
				url: '../test'
			})
		},
			 
	}
}		
</script>

影片示範：頁面停留3秒返回上一頁

<script>
export default{
    onShow:function(){
			setTimeout(function() {
				uni.navigateBack({
					delta: 1
                    //delta為返回頁面數
				});
			}, 3000);
	}
    //意思為過了3秒返回，使用uni.navigateBack(OBJECT)
    
}

</script>

<navigator url='../test?age=18' open-type="navigate">
		<button >到about</button>
</navigator>
<script>
export default{
   onLoad:function(option){
   ////option為object类型，會序列化上個頁面傳遞的参数
		console.log(option.age)
        //取得傳遞參數的age
	}, 
}

</script>