1.一句話總的形容- -下uniapp與vue和微信小程序的異同點

簡單來講Uni-app就是用著vue的指令和小程序的組件和API

2. Uniapp 中配置tabbar的方式 

"tabBar": {
        "color": "#7A7E83",
        "selectedColor": "#3cc51f",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "list": [
            {
                "pagePath": "pages/index/index",
                "iconPath": "static/bottomTabBar/home2_icon.png",
                "selectedIconPath": "static/bottomTabBar/home1_icon.png",
                "text": "分享"
        },
        {
            "pagePath": "pages/read/read",
            "iconPath": "static/bottomTabBar/readTrain2_icon.png",
            "selectedIconPath": "static/bottomTabBar/readTrain1_icon.png",
            "text": "閱讀"
        }, {
            "pagePath": "pages/mine/mine",
            "iconPath": "static/bottomTabBar/mine2_icon.png",
            "selectedIconPath": "static/bottomTabBar/mine1_icon.png",
            "text": "我的"
        }]
    }

3. Uniapp 中常見的組件(說幾個即可)

view：視圖容器。
屬性名    類型    默認(rèn)值    說明
hover-class    String    none    指定按下去的樣式類。當(dāng) hover-class="none" 時，沒有點擊態(tài)效果
hover-stop-propagation    Boolean    false    指定是否阻止本節(jié)點的祖先節(jié)點出現(xiàn)點擊態(tài)，App、H5、支付寶小程序、百度小程序不支持（支付寶小程序、百度小程序文檔中都有此屬性，實測未支持）
hover-start-time    Number    50    按住后多久出現(xiàn)點擊態(tài)，單位毫秒
hover-stay-time    Number    400    手指松開后點擊態(tài)保留時間，單位毫秒
icon：圖標(biāo)
屬性名    類型    默認(rèn)值    說明
type    String        icon的類型
size    Number    23    icon的大小，單位px
color    Color        icon的顏色，同css的color
text：文本組件。
屬性名    類型    默認(rèn)值    說明    平臺差異說明
selectable    Boolean    false    文本是否可選    App、H5、快手小程序
user-select    Boolean    false    文本是否可選    微信小程序
space    String        顯示連續(xù)空格    App、H5、微信小程序
decode    Boolean    false    是否解碼    App、H5、微信小程序

4. Uniapp 中常用的指令語句

v-for：循環(huán)渲染 （注意加：key）

        v-if ：控制元素的刪除添加       

        v-show：控制元素的顯示隱藏

        v-model：雙向數(shù)據(jù)綁定

        v-on：事件綁定（簡寫@）

        v-bind：屬性綁定（簡寫：）

5. Uniapp 應(yīng)用的生命周期、頁面的生命周期、組件的生命周期.

一、應(yīng)用的生命周期

1.onLaunch——當(dāng)uni-app 初始化完成時觸發(fā)（全局只觸發(fā)一次）

2.onShow——當(dāng) uni-app 啟動，或從后臺進(jìn)入前臺顯示

3.onHide——當(dāng) uni-app 從前臺進(jìn)入后臺

4.onError——當(dāng) uni-app 報錯時觸發(fā)

5.onUniNViewMessage——對 nvue 頁面發(fā)送的數(shù)據(jù)進(jìn)行監(jiān)聽，可參考 nvue 向 vue 通訊

6.onUnhandledRejection——對未處理的 Promise 拒絕事件監(jiān)聽函數(shù)（2.8.1+）

7.onPageNotFound——頁面不存在監(jiān)聽函數(shù)

8.onThemeChange——監(jiān)聽系統(tǒng)主題變化 

二、頁面的生命周期

1.onInit——監(jiān)聽頁面初始化，其參數(shù)同 onLoad 參數(shù)，為上個頁面?zhèn)鬟f的數(shù)據(jù)，參數(shù)類型為 Object（用于頁面?zhèn)鲄ⅲ?，觸發(fā)時機(jī)早于 onLoad

2.onLoad——監(jiān)聽頁面加載，其參數(shù)為上個頁面?zhèn)鬟f的數(shù)據(jù)，參數(shù)類型為 Object（用于頁面?zhèn)鲄ⅲ?，參考示?/p>

3.onShow——監(jiān)聽頁面顯示。頁面每次出現(xiàn)在屏幕上都觸發(fā)，包括從下級頁面點返回露出當(dāng)前頁面

4.onReady——監(jiān)聽頁面初次渲染完成。注意如果渲染速度快，會在頁面進(jìn)入動畫完成前觸發(fā)

5.onHide——監(jiān)聽頁面隱藏

6.onUnload——監(jiān)聽頁面卸載

7.onResize——監(jiān)聽窗口尺寸變化

三、組件的生命周期

uni-app 組件支持的生命周期，與vue標(biāo)準(zhǔn)組件的生命周期相同

1.beforeCreate——在實例初始化之后被調(diào)用。

 2.created——在實例創(chuàng)建完成后被立即調(diào)用。

3.beforeMount——在掛載開始之前被調(diào)用。

4.mounted——掛載到實例上去之后調(diào)用。詳見 注意：此處并不能確定子組件被全部掛載，如果需要子組件完全掛載之后在執(zhí)行操作可以使用$nextTickVue官方文檔

5.beforeUpdate——數(shù)據(jù)更新時調(diào)用，發(fā)生在虛擬 DOM 打補(bǔ)丁之前。

6.updated——由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁，在這之后會調(diào)用該鉤子。

7.beforeDestroy——實例銷毀之前調(diào)用。在這一步，實例仍然完全可用。

8.destroyed——Vue 實例銷毀后調(diào)用。調(diào)用后，Vue 實例指示的所有東西都會解綁定，所有的事件監(jiān)聽器會被移除，所有的子實例也會被銷毀。

6.注意下拉刷新和觸底加載的使用

通過onPullDownRefresh可以監(jiān)聽到下拉刷新的動作

export default {
  data () {
    return {
      arr: ['前端','java','ui','大數(shù)據(jù)']
    }
  },
  methods: {
    startPull () {
      uni.startPullDownRefresh()
    }
  },
  onPullDownRefresh () {
    console.log('觸發(fā)下拉刷新了')
  }
}

7. uni.request 的使用及封裝

<template>
    <view>
        <button @click="getList"></button>
    </view>
</template>
<script>
    export default {
        methods: {
            getList () {
                uni.request({
                    url: 'http://localhost:8080/api/getlist',
                    success(res) {
                        console.log(res)
                    }
                })
            }
        }
    }
</script>

8. Uniapp中的本地緩存

同步存儲：uni.setStorageSync，獲取：uni.getStorageSync

異步存儲：uni.setStorage，獲取：uni.getStorage

9. Uniapp 中的跳轉(zhuǎn)方式(navigator 標(biāo)簽、uni.navigateTo方法) 及傳參

標(biāo)簽法：<navigator url="/pages/about/about" hover-class="navigator-hover">
  <button type="default">跳轉(zhuǎn)到關(guān)于頁面</button>
</navigator>

跳轉(zhuǎn)tabBar頁面加open-type="switchTab"

頁面跳轉(zhuǎn)uni.navigateTo({url:})保留當(dāng)前頁面，只能打開非 tabBar 頁面。uni.redirectTo({})關(guān)閉卸載當(dāng)前頁面，只能打開非 tabBar 頁面
tabBar跳轉(zhuǎn)uni.switchTab關(guān)閉所有非tabbar頁面， 只能打開 tabBar 頁面，不能url傳參

uni.reLaunch({})關(guān)閉卸載所有頁面，可以打開任意頁面

10. Uniapp 中組件的創(chuàng)建以及使用和傳參方式

在uni-app中，可以通過創(chuàng)建一個后綴名為vue的文件，即創(chuàng)建一個組件成功，其他組件可以將該組件通過impot的方式導(dǎo)入，在通過components進(jìn)行注冊即可

傳參方法：父傳子，子傳父，全局，事件總線

總結(jié)

到此這篇關(guān)于uniApp常見面試題及答案的文章就介紹到這了,更多相關(guān)uniApp常見面試題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論