1.uniapp優(yōu)缺點(diǎn) 

    優(yōu)點(diǎn):
    a. 一套代碼可以生成多端
    b. 學(xué)習(xí)成本低,語法是vue的,組件是小程序的
    c. 拓展能力強(qiáng)
    d. 使用HBuilderX開發(fā),支持vue語法
    e. 突破了系統(tǒng)對(duì)H5調(diào)用原生能力的限制
    缺點(diǎn):
    a. 問世時(shí)間短,很多地方不完善
    b. 社區(qū)不大
    c. 官方對(duì)問題的反饋不及時(shí)
    d. 在Android平臺(tái)上比微信小程序和iOS差
    e. 文件命名受限

2. uniapp的配置文件、入口文件、主組件、頁面管理部分

 pages.json
配置文件，全局頁面路徑配置，應(yīng)用的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色設(shè)置等
main.js
入口文件，主要作用是初始化vue實(shí)例、定義全局組件、使用需要的插件如 vuex，注意uniapp無法使用vue-router，路由須在pages.json中進(jìn)行配置。如果開發(fā)者堅(jiān)持使用vue-router，可以在插件市場(chǎng)找到轉(zhuǎn)換插件。
App.vue
是uni-app的主組件，所有頁面都是在App.vue下進(jìn)行切換的，是頁面入口文件。但App.vue本身不是頁面，這里不能編寫視圖元素。除此之外，應(yīng)用生命周期僅可在App.vue中監(jiān)聽，在頁面監(jiān)聽無效。
pages
頁面管理部分用于存放頁面或者組件
manifest.json
文件是應(yīng)用的配置文件，用于指定應(yīng)用的名稱、圖標(biāo)、權(quán)限等。HBuilderX 創(chuàng)建的工程此文件在根目錄，CLI 創(chuàng)建的工程此文件在 src 目錄。
package.json
配置擴(kuò)展，詳情內(nèi)容請(qǐng)見官網(wǎng)描述package.json概述

3.基本開發(fā)流程

新建一個(gè)工程項(xiàng)目，如下所示，我們可以直接使用一些模板進(jìn)行開發(fā)，這些模板會(huì)有一些基礎(chǔ)的頁面和配置，能夠讓我們減少前期的配置直接上手開發(fā)

4. 安裝插件

我們可以從工具里面—>插件安裝—>安裝新插件—>前往插件市場(chǎng)安裝來安裝自己所需要的插件和組件，能夠快速提高開發(fā)效率

5.tab頁面及二級(jí)頁面路徑配置

pages.json

pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁，參考官網(wǎng)：uni-app官網(wǎng)

{
	//頁面路徑配置,未設(shè)置root則path默認(rèn)完整路徑
	"pages": [ 
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首頁",
				"enablePullDownRefresh": true
			}
		}
	],
	//二級(jí)頁面，設(shè)置了root根文件路徑，則path可以簡(jiǎn)寫
	"subPackages": [{
		"root": "pages/test-sub",
		"pages": [
			{
				"path": "login/index",
				"style": {
					"navigationBarTitleText": "登錄"
				}
			}
		]
	}],
	//全局樣式配置
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		//tab樣式和選中后效果
		"color": "#7A7E83",
		"selectedColor": "#2BD3DE",
		"borderStyle": "black",
		"backgroundColor": "#F8F8F8",
		//tab頁面配置，包括圖標(biāo)路徑，tab名稱、路徑
		"list": [{
				"pagePath": "pages/index/index",
				"iconPath": "static/農(nóng)場(chǎng)_24種子.png",
				"selectedIconPath": "static/農(nóng)場(chǎng)_31花草.png",
				"text": "首頁"
			},
			{
				"pagePath": "pages/user/index",
				"iconPath": "static/農(nóng)場(chǎng)_36稻草人.png",
				"selectedIconPath": "static/農(nóng)場(chǎng)_28蜜蜂.png",
				"text": "個(gè)人中心"
			},
			{
				"pagePath": "pages/test/index",
				"iconPath": "static/農(nóng)場(chǎng)_36稻草人.png",
				"selectedIconPath": "static/農(nóng)場(chǎng)_28蜜蜂.png",
				"text": "測(cè)試頁面"
			}
		]
	}
}
 

6.頁面設(shè)計(jì)開發(fā)

基礎(chǔ)設(shè)置完成后就可以直接在頁面上開發(fā)了，uniapp的語法承襲vue，熟悉vue的同學(xué)可以快速的上手

7.vue , 微信小程序 , uni-app屬性的綁定

vue和uni-app動(dòng)態(tài)綁定一個(gè)變量的值為元素的某個(gè)屬性的時(shí)候，會(huì)在屬性前面加上冒號(hào)":";
小程序綁定某個(gè)變量的值為元素屬性時(shí)，會(huì)用兩個(gè)大括號(hào){{}}括起來，如果不加括號(hào)，為被認(rèn)為是字符串。

8.jQuery、vue、小程序、uni-app中的本地?cái)?shù)據(jù)存儲(chǔ)和接收 

	jQuery：
	存：$.cookie('key','value')
	取：$.cookie('key')
 
	vue：
	存儲(chǔ)：localstorage.setItem（‘key'，‘value'）
	接收：localstorage.getItem（‘key'）
 
	微信小程序：
	存儲(chǔ)：通過wx.setStorage/wx.setStorageSync寫數(shù)據(jù)到緩存
	接收：通過wx.getStorage/wx.getStorageSync讀取本地緩存，
 
	uni-app：
	存儲(chǔ)：uni.setStorage({key:“屬性名”，data:“值”}) //異步 
		uni.setStorageSync(KEY,DATA) //同步
	接收：uni.getStorage({key:“屬性名”,success(res){res.data}}) //異步
		uni.getStorageSync(KEY) //同步
	移除：uni.removeStorage(OBJECT) //從本地緩存中異步移除指定 key。
		uni.removeStorageSync(KEY) //從本地緩存中同步移除指定 key。
	清除：uni.clearStorage() //清理本地?cái)?shù)據(jù)緩存。
		uni.clearStorageSync() //同步清理本地?cái)?shù)據(jù)緩存。

9.頁面調(diào)用接口

getApp() 函數(shù) 用于獲取當(dāng)前應(yīng)用實(shí)例，一般用于獲取globalData
getCurrentPages() 函數(shù) 用于獲取當(dāng)前頁面棧的實(shí)例，以數(shù)組形式按棧的順序給出，第一個(gè)元素為首頁，最后一個(gè)元素為當(dāng)前頁面。
uni.e m i t ( e v e n t N a m e , O B J E C T ) 和 u n i . emit(eventName,OBJECT)和uni.emit(eventName,OBJECT)和uni.on(eventName,callback) ：觸發(fā)和監(jiān)聽全局的自定義事件
uni.o n c e ( e v e n t N a m e , c a l l b a c k ) ：監(jiān)聽全局的自定義事件。事件可以由 u n i . once(eventName,callback) ：監(jiān)聽全局的自定義事件。事件可以由 uni.once(eventName,callback)：監(jiān)聽全局的自定義事件。事件可以由uni.emit 觸發(fā)，但是只觸發(fā)一次，在第一次觸發(fā)之后移除監(jiān)聽器。
uni.$off([eventName, callback])：移除全局自定義事件監(jiān)聽器。

注意：uni.e m i t 、 u n i . emit、 uni.emit、uni.on 、 uni.o n c e 、 u n i . once 、uni.once、uni.off 觸發(fā)的事件都是 App 全局級(jí)別的，跨任意組件，頁面，nvue，vue 等

10.全局變量globalData

//app.vue
 
<script>  
    export default {  
        globalData: {  
            msg: 'hello world'  
        }
    }  
</script>
 
//在其他頁面調(diào)用/修改全局變量
getApp().globalData.msg= 'hello world'

11. vue,小程序,uni-app的生命周期

    vue：
    beforeCreate（創(chuàng)建前）
    created（創(chuàng)建后）
    beforeMount(載入前，掛載）
    mounted（載入后）
    beforeUpdate（更新前）
    updated（更新后）
    beforeDestroy（銷毀前）
    destroyed（銷毀后）
    小程序/uni-app： 
    1. onLoad：首次進(jìn)入頁面加載時(shí)觸發(fā)，可以在 onLoad 的參數(shù)中獲取打開當(dāng)前頁面路徑中的參數(shù)。
    2. onShow：加載完成后、后臺(tái)切到前臺(tái)或重新進(jìn)入頁面時(shí)觸發(fā)
    3. onReady：頁面首次渲染完成時(shí)觸發(fā)
    4. onHide：從前臺(tái)切到后臺(tái)或進(jìn)入其他頁面觸發(fā)
    5. onUnload：頁面卸載時(shí)觸發(fā)
    6. onPullDownRefresh：監(jiān)聽用戶下拉動(dòng)作
    7. onReachBottom：頁面上拉觸底事件的處理函數(shù)
    8. onShareAppMessage：用戶點(diǎn)擊右上角轉(zhuǎn)發(fā)

12.unaipp中組件生命周期：

13.路由與頁面跳轉(zhuǎn)

uniapp的頁面跳轉(zhuǎn)和小程序是一樣的，都是跳轉(zhuǎn)配置好的頁面路徑， 并且tab頁面也是需要使用switchTab才能實(shí)現(xiàn)跳轉(zhuǎn)，總體上和小程序保持一致，對(duì)于熟練小程序的朋友上手沒有難度，反之，當(dāng)你習(xí)慣了uniapp的頁面切換組件后上手小程序也很快。

14.跨端適配—條件編譯

開發(fā)者按照 uni-app 規(guī)范開發(fā)即可保證多平臺(tái)兼容，大部分業(yè)務(wù)均可直接滿足。但每個(gè)平臺(tái)有自己的一些特性，因此會(huì)存在一些無法跨平臺(tái)的情況。因此就有了條件編譯這個(gè)模式，不僅是js邏輯代碼，template和css樣式都可以設(shè)置成在某個(gè)環(huán)境中生效，在其他環(huán)境不生效

//template
<!--  #ifdef  MP-WEIXIN -->
<!--  只在小程序中生效 -->
<view>我是微信小程序</view>
<!--  #endif -->
 
<!--  #ifdef  APP-PLUS -->
<!--  只在 app 中生效 -->
<view>我是 app </view>
<!--  #endif -->
 
//js
// #ifndef H5
// 表示只有 h5 不使用這個(gè) api
uni.createAnimation(OBJECT)
// #endif
 
//css
/* #ifdef  MP-WEIXIN */
/*  只在小程序中生效  */
.header {
	color:red
}
/*  #endif  */

更多詳細(xì)信息及平臺(tái)適配請(qǐng)看官方文檔

15.uniapp上傳文件時(shí)使用的api

//選擇文件
uni.chooseFile({
  count: 6, //默認(rèn)100
  extension:['.zip','.doc'],
    success: function (res) {
        console.log(JSON.stringify(res.tempFilePaths));
    }
});
 
// 選擇圖片文件
uni.chooseFile({
  count: 10,
  type: 'image',
  success (res) {
    // tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
    const tempFilePaths = res.tempFiles
  }
})

16.簡(jiǎn)述 rpx、px、em、rem、%、vh、vw的區(qū)別

    rpx    相當(dāng)于把屏幕寬度分為750份，1份就是1rpx
    px    絕對(duì)單位，頁面按精確像素展示
    em    相對(duì)單位，相對(duì)于它的父節(jié)點(diǎn)字體進(jìn)行計(jì)算
    rem    相對(duì)單位，相對(duì)根節(jié)點(diǎn)html的字體大小來計(jì)算
    %    一般來說就是相對(duì)于父元素
    vh    視窗高度，1vh等于視窗高度的1%
    vw    視窗寬度，1vw等于視窗寬度的1%

17.jq、vue、uni-app、小程序的頁面?zhèn)鲄⒎绞絽^(qū)別

    1、 jq傳參
    通過url拼接參數(shù)進(jìn)行傳參。
    2、 vue傳參
    一、 vue可以通過標(biāo)簽router-link跳轉(zhuǎn)傳參，通過path+路徑，query+參數(shù)
    二、 也可以通過事件里的this.$router.push（{}）跳轉(zhuǎn)傳參
    3、 小程序/uniapp傳參
    通過跳轉(zhuǎn)路徑后面拼接參數(shù)來進(jìn)行跳轉(zhuǎn)傳參

//示例
// navigate.vue頁面接受參數(shù)
onLoad: function (option) {
	const item = JSON.parse(decodeURIComponent(option.item));
}

或者我們也可以自己封裝一個(gè)解析攜帶參數(shù)數(shù)據(jù)的函數(shù)，然后在所需的頁面引用即可，詳細(xì)應(yīng)用及思想可以看我另一篇文章，分享了自己對(duì)于入?yún)⑻幚淼暮瘮?shù)

自行封裝入?yún)@取函數(shù)

18.組件間通信

uniapp的組件通信基本上與vue框架下組件通信是一致，如果是學(xué)習(xí)過vue框架的同學(xué)，那么基本上沒有任何阻礙，能夠快速的在uniapp上實(shí)現(xiàn)組件間通信，還有些許疑惑的同學(xué)可以看我之前整理的這篇短文回顧下組件間通信方法集

19.uni.request封裝

詳情可以看我之前寫的封裝uniapp request 封裝及使用思想

20.uniapp實(shí)現(xiàn)下拉刷新

實(shí)現(xiàn)下拉刷新需要用到uni.onPullDownRefresh和uni.stopPullDownRefresh這個(gè)兩個(gè)函數(shù)，函數(shù)與生命周期同等級(jí)可以監(jiān)聽頁面下拉動(dòng)作

//1.在pages.json文件里找到需要下拉刷新的頁面pages節(jié)點(diǎn)，并在 style 選項(xiàng)中開啟enablePullDownRefresh。
{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首頁",
				"enablePullDownRefresh": true
			}
		},
//2.在頁面中調(diào)用監(jiān)聽下拉事件函數(shù)
onPullDownRefresh() {
		//do some
	    this.Fn()
	}
//3.獲取數(shù)據(jù)完畢后調(diào)用停止下拉刷新動(dòng)畫
Fn(){
//可以在調(diào)用的函數(shù)中獲取接口數(shù)據(jù)或則操作其他事項(xiàng)
//調(diào)取完畢后停止下拉刷新動(dòng)畫
 uni.stopPullDownRefresh();
}

21.uniapp實(shí)現(xiàn)上拉加載

uniapp中的上拉加載是通過onReachBottom()這個(gè)生命周期函數(shù)實(shí)現(xiàn)，當(dāng)下拉觸底時(shí)就會(huì)觸發(fā)。我們可以在此函數(shù)內(nèi)調(diào)用分頁接口請(qǐng)求數(shù)據(jù)，用以獲取更多的數(shù)據(jù)

onReachBottom() {
        let data = this.data;
        let pageNum = data.pageNum;
        let pageStatus = 'loadmore';
        if (data.pageNum * data.pageSize >= data.pageTotal) {
            pageStatus = 'nomore';
        }
        if (pageStatus === 'loadmore') {
            pageNum++;
            pageStatus = 'loading';
            this.setData({
                pageNum: pageNum
            }, () => {
                this.getDataList();
            })
        }
        this.setData({pageStatus})
    },
/*我司的做法是用total來判斷是否還有數(shù)據(jù)可以請(qǐng)求，還有的話就繼續(xù)請(qǐng)求接口數(shù)據(jù)，并更新狀態(tài)及分頁數(shù)據(jù)；

22.scroll-view吸頂問題

問題：

scroll-view 是常會(huì)用到的一個(gè)標(biāo)簽，我們可以使用 position:sticky 加一個(gè)邊界條件例如top:0
屬性實(shí)現(xiàn)一個(gè)粘性布局，在容器滾動(dòng)的時(shí)候，如果我們的頂部標(biāo)簽欄觸碰到了頂部就不會(huì)再滾動(dòng)了，而是固定在頂部。但是在小程序中如果你在scroll-view元素中直接為子元素使用sticky屬性，你給予sticky的元素在到達(dá)父元素的底部時(shí)會(huì)失效。

解決：

在scroll-view元素中，再增加一層view元素，然后在再將使用了sticky屬性的子元素放入view中，就可以實(shí)現(xiàn)粘貼在某個(gè)位置的效果了

23.ios輸入框字體移動(dòng)bug

問題：

在IOS端有時(shí)，當(dāng)輸入框在輸入后沒有點(diǎn)擊其他位置使輸入框失焦的話，如果滾動(dòng)窗口內(nèi)部的字體也會(huì)跟著滾動(dòng)

解決:

// 更改后的輸入框,
//1、嘗試了下，發(fā)現(xiàn)textarea不會(huì)和input一樣出現(xiàn)字體隨著頁面滾動(dòng)的情況，這是一個(gè)兼容方案
//2、還有個(gè)不優(yōu)雅的方案是輸入完成后使用其他事件讓其失焦或者disable，例如彈窗或者彈出層出來的時(shí)候可以暫時(shí)讓input禁止，然后彈窗交互完成后再放開
<textarea fixed="true" auto-height="true" ></textarea>

/**
     * 設(shè)置拼接后的參數(shù)
     * @param {String} data 參數(shù)
     * @return {String}
     */
    setPageParam(data) {
        let url = '';
        for (let k in data) {
            let value = data[k] !== undefined ? data[k] : '';
            if (typeof value === 'object') {
                value = JSON.stringify(value)
            }
            url += '&' + k + '=' + encodeURIComponent(value);
        }
        url = url ? url.substring(1) : '';
        return url
    },
/**
     * 跳轉(zhuǎn)到下一個(gè)頁面
     * @param {String} url 跳轉(zhuǎn)頁面的名稱
     * @param {Object} param 跳轉(zhuǎn)頁面的傳參
     * @return null
     */
    jumpPage(url, param) {
        if (!url) {
            return
        }
        let arrSwitch = ['/pages/index/index'];//tab頁面數(shù)組
        if (arrSwitch.includes(url)) {
            return uni.switchTab({//tab頁面需要uni.switchPage跳轉(zhuǎn)
            	url
        	})
        } 
        if (param) {
            url += (url.indexOf('?') < 0 ? '?' : '&') + this.setPageParam(param);//拼接參數(shù)
        }
        if (getCurrentPages().length > 9) {
            return uni.redirectTo({//如果棧滿或者溢出就重定向
                url
            })
        } else {
            uni.navigateTo({
                url
            })
        }
    },

24.git基礎(chǔ)命令

	1、 git init 把這個(gè)目錄變成git可以管理的倉庫
	2、 git add 不但可以跟單一文件，也可以跟通配符，更可以跟目錄。一個(gè)點(diǎn)就把當(dāng)前目錄下所有未追蹤的文件全部add了
	3、 git commit -m ‘first commit'把文件提交到倉庫
	4、 git remote add origin +//倉庫地址 //關(guān)聯(lián)遠(yuǎn)程倉庫 
	5、 git push -u origin master //把本地庫的所有內(nèi)容推送到遠(yuǎn)程庫上

總結(jié)

到此這篇關(guān)于uniapp基礎(chǔ)知識(shí)點(diǎn)掌握以及面試題整理的文章就介紹到這了,更多相關(guān)uniapp基礎(chǔ)及面試題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論