Uniapp框架使用說明

開發工具

HBuilderX：官方IDE下載地址，下載App開發版（280M左右那個）

是的，你沒有看錯，只需要這一個工具就可以啦，當然如果需要開發微信小程序的話還需要下載微信開發者工具，快捷傳送門

新建項目

使用HBuilderX新建項目：

填寫項目名稱
填寫項目目錄地址
選擇項目模板，我一般使用自帶uni組件的項目模板，根據開發需求也可以使用其他模板

項目結構

一個uni-app工程，默認包含如下目錄及文件：

┌─components            uni-app組件目錄（官方組件或者第三方插件放置目錄）
│  └─comp-a.vue         可複用的a組件（對應的組件。無需引入，直接使用）
│
┌─common                放置公共js文件，圖標文件等
│
├─hybrid                存放本地網頁的目錄
│
├─platforms             存放各平臺專用頁面的目錄
│
├─pages                 業務頁面文件存放的目錄
│  ├─index
│  │  └─index.vue       index頁面
│  └─list
│     └─list.vue        list頁面
│
├─static                存放應用引用靜態資源（如圖片、視頻等）的目錄，注意：靜態資源只能存放於此
│
├─wxcomponents          存放小程序組件的目錄
│
├─main.js               Vue初始化入口文件
│
├─App.vue               應用配置，用來配置App全局樣式以及監聽 應用生命週期
│
├─manifest.json         配置應用名稱、appid、logo、版本等打包信息
│
└─pages.json            配置頁面路由、導航條、選項卡等頁面類信息

頁面結構

頁面文件遵循Vue 單文件組件 (SFC) 規範
每個 .vue文件包含三種類型的頂級語言塊 <template>、<script> 和 <style>，還允許添加可選的自定義塊：

<template>
  <view class="example">{{ msg }}</view>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

新建了工程，認識了項目的結構和頁面結構，我們接下來就開始編碼了……

項目開始

1. 新建一個頁面

鼠標指在pages目錄上，右鍵選擇‘新建頁面’，輸入頁面名稱，點擊完成，完成頁面的新建。
在pages.json文件夾內註冊該頁面。
在pages.json下添加，navigationBarTitleText爲該頁面的標題：

    {
		"path": "pages/test/test",
		"style": {
			"navigationBarTitleText": "測試頁面"
		}
	}

結果如下：

注意：pages下的第一個頁面爲啓動該應用是顯示的頁面。

{
	"pages": [{
		"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "uni-ui基礎項目"
		}
	}, {
		"path": "pages/test/test",
		"style": {
			"navigationBarTitleText": "測試頁面"
		}
	}],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#007AFF",
		"backgroundColor": "#FFFFFF"
	}
}

2. 編寫頁面

在模板中編寫頁面結構，控件使用uniapp自帶組件，點擊查看組件文檔。每個組件的使用都有詳細的文檔說明，這裏不贅述，直接查看文檔即可。
在<script>中編寫js邏輯代碼，做交互處理。
在<style>中編寫樣式，同html樣式，一般爲了兼容都使用flex佈局。

uniapp給我們提供了一個示例項目，用來演示每個組件的使用，所以我們在開發樣式過程中，爲了方便快捷的完成央視開發，可以直接去示例項目中找到合適的組件複製代碼進行相應的樣式修改即可。

接口配置地址

接口配置地址在main.js文件中設置：

Vue.prototype.$RequestUrl = 'https://172.10.0.68:8080/';//接口請求地址
Vue.prototype.$successCode = '0';//請求成功code值

接口請求

接口請求需要進行封裝，統一應用內的接口請求方式，在封裝接口內做統一處理，封裝的接口在common/api文件內。

在頁面</script>模塊內引入定義的接口請求方法：

<script>
import api from '../../common/api/api.js';
export default {
	...
};
</script>

接口請求方法：

			let self = this;//在接口結果處理是需要使用self，不能使用this
			let param = {
				//參數
			};
			api.request({
				requestUrl: this.$RequestUrl,//接口地址
				url: '/login',//接口名稱
				method: 'POST',//請求方式 POST或者GET
				data: param,//參數
				header: { 'content-type': 'application/x-www-form-urlencoded' },//請求頭
				success: res => {
					if (res.data.errno == self.$successCode) {
						//成功的處理
						self.data=res.data.data;
					} else {
						//失敗的處理
					}
				},
				fail() {
					//失敗的處理
				},
				complete() {
					//完成的處理
				}
			});

注意：接口請求目前封裝了一般請求方式和單文件上傳，如需更多可以到common/api中根據需求自行封裝。

頁面跳轉

頁面跳轉uni.navigateTo(OBJECT)

//在起始頁面跳轉到test.vue頁面並傳遞參數
let param = {
	id: '1'
};
let paramStr = JSON.stringify(param); // 這裏轉換成 字符串
uni.navigateTo({
	url: '../../pages/test?paramStr=' + encodeURIComponent(paramStr)
});

//test.vue的onLoad方法中接收數據
onLoad: function(e) {
	var data = JSON.parse(decodeURIComponent(e.paramStr)); // 字符串轉對象
	this.id= data.id;
},

重定向uni.redirectTo(OBJECT)，關閉當前頁面，跳轉到應用內的某個頁面。

uni.redirectTo({
    url: 'test?id=1'
});

uni.reLaunch(OBJECT)，關閉所有頁面，打開到應用內的某個頁面。

uni.reLaunch({
    url: 'test?id=1'
});

uni.switchTab(OBJECT)，跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面。

uni.switchTab({
    url: '/pages/index/index'
});

uni.navigateBack(OBJECT)，關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層。

// 注意：調用 navigateTo 跳轉時，調用該方法的頁面會被加入堆棧，而 redirectTo 方法則不會。見下方示例代碼

// 此處是A頁面
uni.navigateTo({
    url: 'B?id=1'
});

// 此處是B頁面
uni.navigateTo({
    url: 'C?id=1'
});

// 在C頁面內 navigateBack，將返回A頁面
uni.navigateBack({
    delta: 2
});

回調傳參

使用uni.$on，uni.$emit，uni.$off的方式進行頁面通訊

// 接收信息的頁面
// $on(eventName, callback)  
uni.$on('page-popup', (data) => {  
    console.log('標題：' + data.title)
    console.log('內容：' + data.content)
})  

// 發送信息的頁面
// $emit(eventName, data)  
uni.$emit('page-popup', {  
    title: '我是title',  
    content: '我是content'  
});

//結束監聽
// $off(eventName, data)  
uni.$off('page-popup',(data) => {  
    console.log('標題：' + data.title)
    console.log('內容：' + data.content)
});

使用Vuex，定義全局變量

在工程目錄下新建store/index.js，state中添加變量值，mutations添加變量修改方法。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
		hasLogin: false,//是否登錄
		nickname: "", // 暱稱
		signature: "", // 簽名
		avatar: "", // 頭像
	},
	mutations: {
		login(state, val) {
			state.hasLogin = true;
			state.nickname = val.nickName; // 暱稱
			state.signature = val.signature // 簽名
			state.avatar = val.avatarUrl; // 頭像
		},
	
		logout(state) {
			state.hasLogin = false;
			state.nickname = "";
			state.signature= "";
			state.avatar = "/static/logo.png";
		}
	},
	actions: {

	}
})

export default store

在頁面<script>模塊內內引入vuex。

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	...
};
</script>

獲取值，兩種方式

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			
		};
	},
	computed: {
		//方法1，直接使用如下代碼聲明變量hasLogin
		...mapState(['hasLogin'])
	},
	onShow() {
		//方法1使用變量
		if (!this.hasLogin) {	
		}
		//方法2，使用如下方式獲取全局變量
		if (!this.$store.state.hasLogin) {	
		}
	},
	methods: {
	}
};
</script>

修改值

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
		};
	},
	computed: {
		...mapState(['hasLogin'])
	},
	onShow() {
	},
	methods: {
		...mapMutations(['login']),
		clickLogin(){
			//登錄成功後,調用上面聲明的login方法，修改store裏面的值
			this.login();
		}
		
	}
};
</script>

使用自定義素材（iconfont圖標）

登錄https://www.iconfont.cn/，搜索需要的圖標，將圖標添加購物車，然後將購物車內的圖標添加到項目中。
“圖標管理” -> “我的項⽬”，選擇具體項⽬以後，選擇"Unicode"然後點擊"點擊複製代碼"，將內容複製到根目錄下common/css/iconfont.css文件內替換，並在url上加上"https:"

@font-face {
  font-family: 'iconfont';  /* project id 1704723 */
  src: url('https//at.alicdn.com/t/font_1704723_0q0i8rnb4nbk.eot');
  src: url('https//at.alicdn.com/t/font_1704723_0q0i8rnb4nbk.eot?#iefix') format('embedded-opentype'),
  url('https//at.alicdn.com/t/font_1704723_0q0i8rnb4nbk.woff2') format('woff2'),
  url('https//at.alicdn.com/t/font_1704723_0q0i8rnb4nbk.woff') format('woff'),
  url('https//at.alicdn.com/t/font_1704723_0q0i8rnb4nbk.ttf') format('truetype'),
  url('https//at.alicdn.com/t/font_1704723_0q0i8rnb4nbk.svg#iconfont') format('svg');
}

添加自定義圖標格式如下,例如 delete，將content替換成iconfont上對應的圖標代碼。

.delete:before {
	content: "\e6f6";
}

使用時直接在class中聲明iconfont 和圖標自定義名稱即可顯示。

<view class="iconfont delete"></view>

運行環境判斷

開發環境和生產環境
在HBuilderX 中，點擊“運行”編譯出來的代碼是開發環境，點擊“發行”編譯出來的代碼是生產環境

if(process.env.NODE_ENV === 'development'){
    console.log('開發環境')
}else{
    console.log('生產環境')
}

判斷平臺
條件編譯是用特殊的註釋作爲標記，在編譯時根據這些特殊的註釋，將註釋裏面的代碼編譯到不同平臺。

寫法：以 #ifdef 或 #ifndef 加 %PLATFORM% 開頭，以 #endif 結尾。
#ifdef：if defined 僅在某平臺存在
#ifndef：if not defined 除了某平臺均存在
%PLATFORM%：平臺名稱

// #ifdef H5
    alert("只有h5平臺纔有alert方法")
// #endif

樣式的條件編譯必須使用/* 註釋*/ 的寫法

/*  #ifdef  %PLATFORM%  */
平臺特有樣式
/*  #endif  */

%PLATFORM% 可取值如下：

值	平臺
APP-PLUS	App
APP-PLUS-NVUE	App- nvue
H5	H5
MP-WEIXIN	微信小程序
MP-ALIPAY	支付寶小程序
MP-BAIDU	百度小程序
MP-TOUTIAO	字節跳動小程序
MP-QQ	QQ小程序
MP-360	360小程序
MP	微信小程序/支付寶小程序/百度小程序/字節跳動小程序/QQ小程序/360小程序

兼容小程序分包

由於小程序對發佈包大小有限制單包不可以超過2M，分包不可超過8M。所以爲了發佈功能複雜的小程序需要對工程進行分包處理。

在manifest.json中設置打開分包

    "mp-weixin" : {
        "appid" : "",
        "optimization" : {
            "subPackages" : true
        }
    }

在package.json中設置subPackages分包。
使用方法：
假設支持分包的 uni-app 目錄結構如下：


┌─pages               
│  ├─index
│  │  └─index.vue    
│  └─login
│     └─login.vue    
├─pagesA   
│  ├─static
│  └─list
│     └─list.vue 
├─pagesB    
│  ├─static
│  └─detail
│     └─detail.vue  
├─static             
├─main.js       
├─App.vue          
├─manifest.json  
└─pages.json

則需要在 pages.json 中填寫

{
    "pages": [{
        "path": "pages/index/index",
        "style": { ...}
    }],
    "subPackages": [{
        "root": "pagesA",
        "pages": [{
            "path": "list/list",
            "style": { ...}
        }]
    }, {
        "root": "pagesB",
        "pages": [{
            "path": "detail/detail",
            "style": { ...}
        }]
    }]
}

Uniapp框架使用說明

目錄

開發工具

新建項目

項目結構

頁面結構

項目開始

1. 新建一個頁面

2. 編寫頁面

接口配置地址

接口請求

頁面跳轉

回調傳參

使用Vuex，定義全局變量

使用自定義素材（iconfont圖標）

運行環境判斷

兼容小程序分包

Android PorterDuff.Mode圖形混合處理

Android 動畫——屬性動畫Property Animation

Uniapp框架使用說明

朋友圈日期時間算法實現

Android 動畫——Layout Animations佈局動畫

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結