uniapp簡介

uni-app 是一個使用 Vue.js 開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到多端運行。（ios，android，Web, 各種小程序）

優(yōu)點

• 開發(fā)者/案例數(shù)量多
• 平臺能力不受限
• 性能體驗優(yōu)秀
• 周邊生態(tài)豐富
• 學(xué)習(xí)成本低
• 開發(fā)成本低

功能框架

image.png

開發(fā)規(guī)范

為了實現(xiàn)多端兼容，綜合考慮編譯速度、運行性能等因素，uni-app約定以下規(guī)范

• 頁面文件遵循 Vue 單文件組件 (SFC) 規(guī)范
• 組件標(biāo)簽靠近小程序規(guī)范，詳見uni-app 組件規(guī)范
• 接口能力（JS API）靠近微信小程序規(guī)范，但需將前綴 wx 替換為 uni，詳見uni-app接口規(guī)范
• 數(shù)據(jù)綁定及事件處理同 Vue.js 規(guī)范，同時補充了App及頁面的生命周期
• 為兼容多端運行，建議使用flex布局進行開發(fā)

環(huán)境搭建

通過HBuilderX可視化界面搭建

HBuilderX:下載地址

通過cli腳手架搭建

全局安裝vue-cli

npm install -g @vue/cli

創(chuàng)建uniapp

vue create -p dcloudio/uni-preset-vue my-project

創(chuàng)建uni-app

這里通過HBuilderX編譯器創(chuàng)建
點擊文件-》新建-》項目

image.png

選擇uni-app類型，輸入項目名，選擇默認(rèn)模板

image.png

目錄結(jié)構(gòu)

.hbuilderx                    啟動調(diào)試時相關(guān)設(shè)置
components                符合vue組件規(guī)范的uniapp組件
pages                          業(yè)務(wù)頁面
static                            存放靜態(tài)資源
uni_modules                存放uni-module規(guī)范的插件
unpackage                   發(fā)布后的文件
App.vue                        應(yīng)用配置，app的全局樣式及應(yīng)用的生命周期
main.js                          Vue初始化入口文件
manifest.json                應(yīng)用配置文件，名稱，appid，logo等。
pages.json                    配置頁面路由，導(dǎo)航條，選項卡等。

應(yīng)用生命周期

<script>
        //只能再App.vue里監(jiān)聽?wèi)?yīng)用的生命周期
    export default {
        onLaunch: function() {
            console.log('App Launch')
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }
</script>

頁面生命周期（常用）

路由

uni-app 頁面路由為框架統(tǒng)一管理，需要再page.json里配置每個路由頁面及頁面樣式

路由跳轉(zhuǎn)

• navigator 組件跳轉(zhuǎn) 文檔
• 調(diào)用API跳轉(zhuǎn) 文檔

uni.navigateTo    保留當(dāng)前頁面，跳轉(zhuǎn)到新頁面
uni.redirectTo    關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到新頁面
uni.reLaunch      關(guān)閉所有頁面，打開應(yīng)用內(nèi)的某個頁面
uni.switchTab     跳轉(zhuǎn)到tabBar頁面，并關(guān)閉其他所有非tabBar頁面
uni.navigateBack  關(guān)閉當(dāng)前頁面，返回上一個頁面

尺寸單位

uni-app 支持的通用 css 單位包括 px、rpx
推薦使用rpx
uni-app應(yīng)用，屏幕寬度以750為基準(zhǔn)，自適應(yīng)，頁面寬度設(shè)置750rpx就恰好為屏幕寬度。

• 注意 在APP端或者H5端，如果屏幕寬度達到960px時，屏幕寬度以375為基準(zhǔn)。

頁面配置

pages.json 中配置了uni-app的頁面路徑，窗口樣式，原生的導(dǎo)航欄，底部原生的tabbar等。

常用屬性

• globalStyle 默認(rèn)頁面樣式
• pages 設(shè)置頁面路徑及樣式
• tabBar 底部tab樣式

網(wǎng)絡(luò)

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參數(shù)中的一個，
如果沒傳，則會返回Promise對象，如下

// Promise
uni.request({
        url: 'https://www.example.com/request'
    })
    .then(data => {//data為一個數(shù)組，數(shù)組第一項為錯誤信息，第二項為返回數(shù)據(jù)
        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);
}

數(shù)據(jù)存儲

//異步
uni.setStorage({
    key: 'storage_key',
    data: 'hello',
    success: function () {
        console.log('success');
    }
});
//同步
try {
    uni.setStorageSync('storage_key', 'hello');
} catch (e) {
    // error
}

數(shù)據(jù)獲取

//異步
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('運行在開發(fā)者工具上')
       break;
}

全局變量

共用模塊

在 uni-app 項目根目錄下創(chuàng)建 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等平臺都實現(xiàn)了。
在 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 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。
舉例說明：

在 uni-app 項目根目錄下新建 store 目錄，在 store 目錄下創(chuàng)建 index.js 定義狀態(tài)值

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>