uniapp簡介
uni-app 是一個使用 Vue.js 開發所有前端應用的框架，開發者編寫一套代碼，可發布到多端運行。（ios，android，Web, 各種小程序）
優點
- 開發者/案例數量多
- 平臺能力不受限
- 性能體驗優秀
- 周邊生態豐富
- 學習成本低
- 開發成本低
功能框架
image.png
開發規范
為了實現多端兼容，綜合考慮編譯速度、運行性能等因素，uni-app約定以下規范
- 頁面文件遵循 Vue 單文件組件 (SFC) 規范
- 組件標簽靠近小程序規范，詳見uni-app 組件規范
- 接口能力（JS API）靠近微信小程序規范，但需將前綴
wx替換為uni，詳見uni-app接口規范 - 數據綁定及事件處理同
Vue.js規范，同時補充了App及頁面的生命周期 - 為兼容多端運行，建議使用flex布局進行開發
環境搭建
通過HBuilderX可視化界面搭建
HBuilderX:下載地址
通過cli腳手架搭建
全局安裝vue-cli
npm install -g @vue/cli
創建uniapp
vue create -p dcloudio/uni-preset-vue my-project
創建uni-app
這里通過HBuilderX編譯器創建
點擊文件-》新建-》項目
image.png
選擇uni-app類型，輸入項目名，選擇默認模板
image.png
點擊創建，一個uni-app就創建好了。
目錄結構
.hbuilderx 啟動調試時相關設置
components 符合vue組件規范的uniapp組件
pages 業務頁面
static 存放靜態資源
uni_modules 存放uni-module規范的插件
unpackage 發布后的文件
App.vue 應用配置，app的全局樣式及應用的生命周期
main.js Vue初始化入口文件
manifest.json 應用配置文件，名稱，appid，logo等。
pages.json 配置頁面路由，導航條，選項卡等。
應用生命周期
| 函數 | 說明 |
|---|---|
| onLaunch | 當uni-app 初始化完成時觸發（全局只觸發一次） |
| onShow | 當 uni-app 啟動，或從后臺進入前臺顯示 |
| onHide | 當 uni-app 從前臺進入后臺 |
| onError | 當 uni-app 報錯時觸發 |
| onUniNViewMessage | 對 nvue 頁面發送的數據進行監聽 |
| onUnhandledRejection | 對未處理的 Promise 拒絕事件監聽函數（2.8.1+） |
| onPageNotFound | 頁面不存在監聽函數 |
| onThemeChange | 監聽系統主題變化 |
<script>
//只能再App.vue里監聽應用的生命周期
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
頁面生命周期（常用）
| 函數 | 說明 | 平臺差異 |
|---|---|---|
| onInit | 監聽頁面初始化 | 百度小程序獨有 |
| onLoad | 監聽頁面加載 | |
| onShow | 監聽頁面顯示 | |
| onReady | 監聽頁面初次渲染完成 | |
| onHide | 頁面隱藏 | |
| onUnload | 監聽頁面卸載 | |
| onResize | 監聽尺寸變化 | App,微信小程序 |
| onPullDownRefresh | 監聽下拉動作，用于下拉刷新 | |
| onReachBottom | 滾動到底部事件 | |
| onPageScroll | 監聽頁面滾動 | |
| onBackPress | 監聽返回鍵 |
路由
uni-app 頁面路由為框架統一管理，需要再page.json里配置每個路由頁面及頁面樣式
路由跳轉
uni.navigateTo 保留當前頁面，跳轉到新頁面
uni.redirectTo 關閉當前頁面，跳轉到新頁面
uni.reLaunch 關閉所有頁面，打開應用內的某個頁面
uni.switchTab 跳轉到tabBar頁面，并關閉其他所有非tabBar頁面
uni.navigateBack 關閉當前頁面，返回上一個頁面
尺寸單位
uni-app 支持的通用 css 單位包括 px、rpx
推薦使用rpx
uni-app應用，屏幕寬度以750為基準，自適應，頁面寬度設置750rpx就恰好為屏幕寬度。
- 注意 在APP端或者H5端，如果屏幕寬度達到960px時，屏幕寬度以375為基準。
頁面配置
pages.json 中配置了uni-app的頁面路徑，窗口樣式，原生的導航欄，底部原生的tabbar等。
常用屬性
- globalStyle 默認頁面樣式
- pages 設置頁面路徑及樣式
- tabBar 底部tab樣式
網絡
uni.request({
url: 'https://www.example.com/request', //僅為示例，并非真實接口地址。
data: {
text: 'uni.request'
},
header: {
'custom-header': 'hello' //自定義請求頭信息
},
success: (res) => {
console.log(res.data);
this.text = 'request success';
}
});
如果要返回requestTask 對象，需要至少傳入success，fail，complete參數中的一個，
如果沒傳，則會返回Promise對象，如下
// Promise
uni.request({
url: 'https://www.example.com/request'
})
.then(data => {//data為一個數組，數組第一項為錯誤信息，第二項為返回數據
var [error, res] = data;
console.log(res.data);
})
或者
// Await
async function request () {
var [error, res] = await uni.request({
url: 'https://www.example.com/request'
});
console.log(res.data);
}
數據存儲
//異步
uni.setStorage({
key: 'storage_key',
data: 'hello',
success: function () {
console.log('success');
}
});
//同步
try {
uni.setStorageSync('storage_key', 'hello');
} catch (e) {
// error
}
數據獲取
//異步
uni.getStorage({
key: 'storage_key',
success: function (res) {
console.log(res.data);
}
});
//同步
try {
const value = uni.getStorageSync('storage_key');
if (value) {
console.log(value);
}
} catch (e) {
// error
}
判斷平臺
編譯期判斷
// #ifdef H5
alert("只有h5平臺才有alert方法")
// #endif
運行期判斷
switch(uni.getSystemInfoSync().platform){
case 'android':
console.log('運行Android上')
break;
case 'ios':
console.log('運行iOS上')
break;
default:
console.log('運行在開發者工具上')
break;
}
全局變量
共用模塊
在 uni-app 項目根目錄下創建 common 目錄，然后在 common 目錄下新建 helper.js 用于定義公用的方法。
const now = Date.now || function () {
return new Date().getTime();
};
在其他頁面中使用
<script>
import helper from '../../common/helper.js';
export default {
data() {
return {};
},
onLoad(){
console.log('now:' + helper.now());
},
methods: {
}
}
</script>
掛載 Vue.prototype
將一些使用頻率較高的常量或者方法，直接擴展到 Vue.prototype 上，每個 Vue 對象都會“繼承”下來。
在main.js中掛載屬性/方法
Vue.prototype.now = Date.now || function () {
return new Date().getTime();
};
在其他頁面中使用
<script>
export default {
data() {
return {};
},
onLoad(){
console.log('now:' + this.now());
},
methods: {
}
}
</script>
globalData
小程序中有個globalData概念，可以在 App 上聲明全局變量。 Vue 之前是沒有這類概念的，但 uni-app 引入了globalData概念，并且在包括H5、App等平臺都實現了。
在 App.vue 可以定義 globalData ，也可以使用 API 讀寫這個值。
在App.vue中定義
<script>
export default {
globalData: {
text: 'text'
},
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每個頁面公共css */
</style>
在其他頁面中使用
賦值：getApp().globalData.text = 'test'
取值：console.log(getApp().globalData.text) // 'test'
Vuex
Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。
舉例說明：
在 uni-app 項目根目錄下新建 store 目錄，在 store 目錄下創建 index.js 定義狀態值
const store = new Vuex.Store({
state: {
login: false,
token: '',
avatarUrl: '',
userName: ''
},
mutations: {
login(state, provider) {
console.log(state)
console.log(provider)
state.login = true;
state.token = provider.token;
state.userName = provider.userName;
state.avatarUrl = provider.avatarUrl;
},
logout(state) {
state.login = false;
state.token = '';
state.userName = '';
state.avatarUrl = '';
}
}
})
然后，需要在 main.js 掛載 Vuex
import store from './store'
Vue.prototype.$store = store
最后，在頁面中使用
<script>
import {
mapState,
mapMutations
} from 'vuex';
export default {
computed: {
...mapState(['avatarUrl', 'login', 'userName'])
},
methods: {
...mapMutations(['logout'])
}
}
</script>
