uni-app 基礎篇

1. 安裝HBuilderX嗎，微信小程序開發工具以及環境配置
   基礎操作教程

2. 進行全局配置和頁面配置
   
   在pages.json修改代碼：

{
	"pages": [ //pages數組中第一項表示應用啓動頁，參考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "第一個uni-app"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "white",  //設置狀態欄字體顏色
		"navigationBarTitleText": "第一個uni-app",  //設置標題
		"navigationBarBackgroundColor": "#007AFF", //設置狀態欄顏色
		"backgroundColor": "#7CCD7C",  //設置背景色
		"enablePullDownRefresh":true  ,//設置刷新
		"backgroundTextStyle":"light"  //設置刷新狀態小圓點顏色
	}
}

3. tab

代碼結構：

// : pages/message

<template>
	<view>message</view>
</template>

<script>
</script>

<style>
</style>

// : pages/contact

<template>
	<view>聯繫我們</view>
</template>

<script>
</script>

<style>
</style>

// : pages.json

{
	"pages": [ //pages數組中第一項表示應用啓動頁，參考：https://uniapp.dcloud.io/collocation/pages
		
		{
			"path": "pages/message/message",
			"style": {
				"navigationBarTitleText": "信息頁",
				"navigationBarBackgroundColor":"#F0AD4E",
				"h5":{    // 單獨設置h5樣式（這裏用於設置刷新樣式）
					"pullToRefresh":{
						"color":"#8F8F94"
					}
				}
			}
			
		},
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "第一個uni-app"
			}
		},
		{
			"path": "pages/contact/contact",
			"style": {
				"navigationBarTitleText": "我的"
			}
		}
		
	],
	"globalStyle": {
		"navigationBarTextStyle": "white",  //設置狀態欄字體顏色
		"navigationBarTitleText": "第一個uni-app",  //設置標題
		"navigationBarBackgroundColor": "#007AFF", //設置狀態欄顏色
		"backgroundColor": "#7CCD7C",  //設置背景色
		"enablePullDownRefresh":true  ,//設置刷新
		"backgroundTextStyle":"light"  //設置刷新狀態小圓點顏色
	},
	"tabBar":{
		"color":"#808080",   //文字未選中顏色
		"selectedColor":"#007AFF",  //文字選中顏色
		"backgroundColor":"#FFFFFF", //背景色
		"borderStyle":"white",  //分割線
		"position":"top",  //頂部（只適用於小程序，同時圖標會消失
		"list":[
			{
				"text":"首頁",
				"pagePath":"pages/index/index",
				"iconPath":"static/tabs/mipmap-xhdpi/ic_tab_home_nor.png",
				"selectedIconPath":"static/tabs/mipmap-xhdpi/ic_tab_home_sel.png"
			},
			{
				"text":"信息",
				"pagePath":"pages/message/message",
				"iconPath":"static/tabs/mipmap-xhdpi/ic_tab_zix_nor.png",
				"selectedIconPath":"static/tabs/mipmap-xhdpi/ic_tab_zix_sel.png"
			},
			{
				"text":"我的",
				"pagePath":"pages/contact/contact",
				"iconPath":"static/tabs/mipmap-xhdpi/ic_tab_mine_nor.png",
				"selectedIconPath":"static/tabs/mipmap-xhdpi/ic_tab_mine_sel.png"
			}
		]
	}
}

4. view組件的使用
   
   
   
5. button組件的使用
   

相關對應代碼

<template>
	<view>
		
		<view>
		<text>唱歌跳舞打籃球aaaaaaaaa</text>
		</view>
		<view>
		<text selectable>唱歌跳舞打籃球aa</text>
		</view>
		
		<view>
		<text selectable space="ensp">唱歌跳    舞打籃球aa</text>
		</view>
		
		<view>
		<text selectable space="emsp">唱歌跳    舞打籃球aa</text>
		</view>
		
		<view>
		<text selectable space="nbsp" style="font-size: 30px;">唱歌跳    舞打籃球aa</text>
		</view>
	
		<view class="box2" hover-class="box2-active">
			<view class="box" :hover-start-time="2000" :hover-stay-time="2000" hover-class="box-active"  hover-stop-propagation>
				我是一個大盒子
			</view>
		</view>
		
			<button>按鈕</button>
			<button size="mini">按鈕</button>
			<button type="primary">按鈕</button>
			<button type="primary" plain>按鈕</button>
		    <button type="primary" disabled>按鈕</button>   
			<!-- 不能使用的button -->
			<button loading>按鈕</button>
		
	</view>
	
	
</template>

<script>
</script>

<style>
	.box{ 
	width: 100px;
	height: 100px;
	background: #4CD964;}
	.box2{
	width: 300px;
	height: 300px;
	background: #007AFF;}
	.box-active{
		background: #DD524D;
	}
	.box2-active{
		background: #555555;
	}

	
	
</style>

• 樣式及數據綁定
  

• 註冊事件和傳遞參數

代碼：

<template>
	<view>
	<view>{{msg}}</view>	
	<view>{{'你好'+'世界'}}</view>
		<view>{{1+2}}</view>
		<view>{{flag?'肖戰真好':'王一博好酷'}}</view>
		<view v-for="(item,index) in arr" :key="item.id">
		序號:{{index}},名字:{{item.name}},年齡:{{item.age}}
		</view>
		<button type="primary" @click="clickHandle(20,$event)">按鈕</button>
		
	</view>
	
</template>

<script>
	export default{
		data(){
			return{
				msg:'hello',
				flag:false,
				arr:[
					{ 
					id:1,
					name:'王一博',
					age:1997,
					lover:'摩托滑板和肖戰'
				},
				{
					id:2,
					name:'肖戰',
					age:1991,
					lover:'唱歌擼貓愛我'
				},
				{
					id:3,
					name:'Lisa',
					age:1996,
					lover:'跳舞可愛'
				}
				]
			}
			},
			methods:{ 
				clickHandle(num,e){ 
					console.log(num,e)
				}
			}
	}
</script>

<style>
</style>

• 生命週期函數
  

//: App.vue

• 上拉加載

<template>
	<view>
		<view>這是列表頁</view>
		<view class="box-item" v-for="item in list">
			{{ item}}
		</view>
		<button @click="pullDown">下拉刷新</button>
	</view>
	
</template>

<script>
	export default{
		data(){
			return{ 
				list:['前端','JAVA','UI','測試','大數據']
			}
		},
		onPullDownRefresh() {
			console.log('觸發了下拉刷新')
			setTimeout(()=>{ 
				this.list=['JAVA','UI','前端','測試','大數據']
				uni.stopPullDownRefresh()
			},2000)
		},
		onReachBottom() {
			console.log('頁面觸底了')
			this.list=[...this.list,...['JAVA','UI','前端','測試','大數據'] ]  //... 爲es6展開運算符
		},
		methods:{ 
			pullDown(){ 
				uni.startPullDownRefresh()
			}
		}
		}
</script>

<style>
	.box-item{
		height: 200px;
		line-height: 200px;
	}
</style>

{
			"path": "pages/list/list",
			"style": {
				"navigationBarTitleText": "列表",
				"enablePullDownRefresh":true,
				"onReachBottomDistance":200
			}
		}