這篇文章為大家總結(jié)分享一些基於小程式的面試題（附解析），讓你面試穩(wěn)操勝券，希望對(duì)大家有幫助！

小程式登入流程

#第一步：wx.login取得使用者暫時(shí)登入憑證code

第二步：wx.getUserInfo取得加密過(guò)的資料encryptedData與解密參數(shù)iv?

第三步：把步驟一、二中的code、encryptedData、iv傳到開(kāi)發(fā)者自己服務(wù)端 步驟四：服務(wù)端取得到code、encryptedData、iv之後用get方法請(qǐng)求如下微信接口個(gè)人項(xiàng)目，沒(méi)有後端接口，回答了雲(yún)開(kāi)發(fā)中的登入流程

小程式頁(yè)面宣告週期

● onLoad() 頁(yè)面載入時(shí)觸發(fā)，只會(huì)呼叫一次，可取得目前頁(yè)面路徑中的參數(shù)。

● onShow() 頁(yè)面顯示/切入前臺(tái)時(shí)觸發(fā)，一般用來(lái)傳送資料要求；?

● onReady() 頁(yè)面初次渲染完成時(shí)觸發(fā)，只會(huì)呼叫一次，代表頁(yè)面已可和視圖層進(jìn)行互動(dòng)?

● onHide() 頁(yè)面隱藏/切入後臺(tái)時(shí)觸發(fā)，如底部tab 切換到其他頁(yè)面或小程式切入後臺(tái)等?

● onUnload() 頁(yè)面卸載時(shí)觸發(fā)，如redirectTo 或navigateBack 到其他頁(yè)面時(shí)

小程式常用的框架

WeUI WeUI 是一套同微信原生視覺(jué)體驗(yàn)一致的基礎(chǔ)樣式庫(kù)， 由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁(yè)和微信小程式量身設(shè)計(jì)，令使用者的使用感知更加統(tǒng)一。 小程式開(kāi)發(fā)中最常使用的一款框架，受到廣大開(kāi)發(fā)人員的歡迎。 美團(tuán)小程式框架mpvue 官方介紹：mpvue是使用 Vue.js開(kāi)發(fā)小程式的前端框架。框架基於 Vue.js核心，mpvue修改了 Vue.js的 runtime和 compiler實(shí)現(xiàn)，使其可以運(yùn)行在小程式環(huán)境中，從而為小程式開(kāi)發(fā)引入了整套Vue.js開(kāi)發(fā)體驗(yàn)。

元件化開(kāi)發(fā)框架wepy 官方介紹：組件化開(kāi)發(fā)，完美解決組件隔離，組件嵌套，組件通信等問(wèn)題,支持使用第三方 npm 資源，自動(dòng)處理 npm 資源之間的依賴關(guān)係，完美兼容所有無(wú)平臺(tái)依賴的 npm 資源包. 官方框架MINA 官方介紹：框架提供了自己的視圖層描述語(yǔ)言WXML 和WXSS，以及基於JavaScript 的邏輯層框架，並在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，可以讓開(kāi)發(fā)者可以方便的聚焦於數(shù)據(jù)與邏輯上。

了解微信小程式嗎？簡(jiǎn)述小程式的原理。

微信?程式採(cǎi)?JavaScript、WXML、WXSS三種技術(shù)進(jìn)?開(kāi)發(fā),本質(zhì)就是?個(gè)單??應(yīng)?，所有的??渲染和事件處理，都在?個(gè)??內(nèi)進(jìn)?，但?可以透過(guò)微信客戶端調(diào)?原?的各種接?；

微信的架構(gòu)，是資料驅(qū)動(dòng)的架構(gòu)模式，它的UI和資料是分離的，所有的??更新，都需要透過(guò)資料的變更來(lái)實(shí)現(xiàn)；

?程式分為兩個(gè)部分webview 和appService 。其中 webview 主要?來(lái)展現(xiàn) UI ，appService用來(lái)處理業(yè)務(wù)邏輯、資料及接?調(diào)?。它們?cè)趦蓚€(gè)進(jìn)程中運(yùn)?，透過(guò)系統(tǒng)層JSBridge 實(shí)現(xiàn)通信，實(shí)現(xiàn)UI 的渲染、事件的處理

小程式專案的主要目錄檔案作用

project.config.json 專案的設(shè)定文件，做一些個(gè)人化配置，例如介面顏色、編譯配置等等； app.json 目前小程式的全域配置，包括小程式的所有頁(yè)面路徑配置、介面表現(xiàn)、網(wǎng)路逾時(shí)時(shí)間、底部tab等； sitemap.json 配置小程式及其頁(yè)面是否允許被微信索引； pages 裡麵包含了一個(gè)個(gè)具體的頁(yè)面； wxml （WeiXin Markup Language）是框架設(shè)計(jì)的一套標(biāo)籤語(yǔ)言，結(jié)合基礎(chǔ)元件、事件系統(tǒng)，可以建構(gòu)出頁(yè)面的結(jié)構(gòu) wxss (WeiXin Style Sheets)是一套樣式語(yǔ)言，用於描述 WXML 的元件 樣式 app.wxss作為全域樣式，會(huì)作用於目前小程式的所有頁(yè)面，局部頁(yè)面樣式 page.wxss僅對(duì)目前頁(yè)面生效； app.js 小程式的邏輯 js 邏輯處理，網(wǎng)路請(qǐng)求 json 頁(yè)面配置

小程式的雙向綁定和vue哪裡不一樣

小程式直接this.data 的屬性是不可以同步到視圖的，必須呼叫： this.setData({ // 這裡設(shè)定 })

小程式頁(yè)面的生命週期函數(shù)

#onLoad 頁(yè)面載入時(shí)觸發(fā)。一個(gè)頁(yè)面只會(huì)呼叫一次，可以在 onLoad 的參數(shù)中取得開(kāi)啟目前頁(yè)面路徑中的參數(shù)(監(jiān)聽(tīng)頁(yè)面載入)

onShow() 頁(yè)面顯示/切入前臺(tái)時(shí)觸發(fā)(監(jiān)聽(tīng)頁(yè)面顯示)

onReady() 頁(yè)面初次渲染完成時(shí)觸發(fā)。一個(gè)頁(yè)面只會(huì)呼叫一次，代表頁(yè)面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行互動(dòng)(監(jiān)聽(tīng)頁(yè)面初次渲染完成)

onHide() 頁(yè)面隱藏/切入後臺(tái)時(shí)觸發(fā)。如 navigateTo 或底部 tab 切換到其他頁(yè)面，小程式切入後臺(tái)等(監(jiān)聽(tīng)頁(yè)面隱藏)

onUnload() 頁(yè)面卸載時(shí)觸發(fā)。如 redirectTo 或 navigateBack 到其他頁(yè)面時(shí)(監(jiān)聽(tīng)頁(yè)面卸載)

#微信小程式的優(yōu)劣勢(shì)

優(yōu)勢(shì) : 即用即走，不用安裝，省流量，省安裝時(shí)間，不佔(zhàn)用桌面 依托微信流量，天生推廣傳播優(yōu)勢(shì) 開(kāi)發(fā)成本比 App 低 缺點(diǎn) : 用戶留存，即用即走是優(yōu)勢(shì)，也存在一些問(wèn)題 入口相對(duì)傳統(tǒng) App 深很多 限制較多, 頁(yè)面大小不能超過(guò)2M , 不能打開(kāi)超過(guò)10個(gè)層級(jí)的頁(yè)面

小程式的wxss和css有哪些不一樣的地方

#WXSS 和CSS 類似，不過(guò)在CSS 的基礎(chǔ)上做了一些補(bǔ)充和修改

#尺寸單位rpx rpx 是響應(yīng)式像素,可以根據(jù)螢?zāi)粚挾冗M(jìn)行自適應(yīng)。規(guī)定螢?zāi)粚挒?750rpx。如在 iPhone6 上，螢?zāi)粚挾葹?375px，共有 750 個(gè)實(shí)體像素，則 750rpx = 375px = 750 實(shí)體像素

使用 @import 識(shí)別碼來(lái)匯入外聯(lián)樣式。 @import 後面接著需要匯入的外聯(lián)樣式表的相對(duì)路徑，用;表示語(yǔ)句結(jié)束

#小程式頁(yè)間有哪些傳遞資料的方法

(1) 使用全域變數(shù)實(shí)作資料傳遞在app.js 檔案中定義全域變數(shù)globalData , 將需要儲(chǔ)存的資訊存放在裡面 使用的時(shí)候，直接使用getApp() 拿到儲(chǔ)存的資訊

(2) 使用wx.navigateTo 與wx.redirectTo 的時(shí)候，可以將部分資料放在url 裡面,並在新頁(yè)面onLoad 的時(shí)候初始化 需要注意的問(wèn)題： wx.navigateTo 和 wx.redirectTo 不允許跳到 tab 所包含的頁(yè)面 onLoad 只執(zhí)行一次 (3) 使用本機(jī)快取Storage 相關(guān)性

小程式關(guān)聯(lián)微信公眾號(hào)如何決定使用者的唯一性

如果開(kāi)發(fā)者擁有多個(gè)行動(dòng)應(yīng)用程式、網(wǎng)站應(yīng)用程式、和公眾帳號(hào)（包括小程式），可透過(guò)unionid 來(lái)區(qū)分使用者的唯一性，因?yàn)橹灰峭粋€(gè)微信開(kāi)放平臺(tái)帳號(hào)下的行動(dòng)應(yīng)用程式、網(wǎng)站應(yīng)用程式和公眾帳號(hào)（包括小程式），使用者的unionid 是唯一的。換句話說(shuō)，同一用戶，對(duì)同一個(gè)微信開(kāi)放平臺(tái)下的不同應(yīng)用，unionid 是相同的

#如何實(shí)現(xiàn)下拉刷新

首先在全域config 中的window 設(shè)定enablePullDownRefresh 在 Page 中定義 onPullDownRefresh 鉤子函數(shù) , 到達(dá)下拉刷新條件後 , 該鉤子函數(shù)執(zhí)行, 發(fā)起請(qǐng)求方法 請(qǐng)求返回後，呼叫wx.stopPullDownRefresh 停止下拉刷新

bindtap和catchtap的區(qū)別是什麼

相同點(diǎn)：首先他們都是作為點(diǎn)擊事件函數(shù)，就是點(diǎn)擊時(shí)觸發(fā)。在這個(gè)作用上他們是一樣的，可以不做區(qū)分

不同點(diǎn)：他們的不同點(diǎn)主要是bindtap是不會(huì)阻止冒泡事件的，catchtap是阻止冒泡的

'wx.navigateTo()', 'wx.redirectTo()','wx.switchTab()', 'wx.navigateBack()','wx.reLaunch()'的差異

wx.navigateTo()：保留目前頁(yè)面，跳到應(yīng)用程式內(nèi)的某個(gè)頁(yè)面。但不能跳到 tabbar 頁(yè)面

wx.redirectTo()：關(guān)閉目前頁(yè)面，跳到應(yīng)用程式內(nèi)的某個(gè)頁(yè)面。但不允許跳到tabbar 頁(yè)面

wx.switchTab()：跳到tabBar 頁(yè)面，並關(guān)閉其他所有非tabBar 頁(yè)面

wx.navigateBack(): 關(guān)閉目前頁(yè)面，返回上一頁(yè)面或多層級(jí)頁(yè)面。可透過(guò)getCurrentPages() 取得目前的頁(yè)面棧，決定需要傳回幾層

wx.reLaunch()：關(guān)閉所有頁(yè)面，開(kāi)啟到應(yīng)用程式內(nèi)的某個(gè)頁(yè)面

#typeof 運(yùn)算子和instanceof 運(yùn)算子以及isPrototypeOf() 方法的差異

typeof是一個(gè)運(yùn)算符，用來(lái)偵測(cè)資料的型別，例如基本資料型別null、undefined、string 、number、boolean， 以及引用資料型別object、function，但是對(duì)於正規(guī)表示式、日期、陣列這些引用資料型，它會(huì)全部辨識(shí)為object；

instanceof同樣也是一個(gè)運(yùn)算符，它就能很好地辨識(shí)資料具體是哪一種引用型別。它與isPrototypeOf的差別就是 它是用來(lái)偵測(cè)建構(gòu)函式的原型是否存在於指定物件的原型鏈當(dāng)中； 而isPrototypeOf是用來(lái)偵測(cè)呼叫此方法的物件是否存在於指定物件的原型鏈中，所以本質(zhì)上就是偵測(cè)目標(biāo)不同。

call()和apply()的差異

實(shí)際上，apply和call的功能是一樣的，只是傳入的參數(shù)清單形式不同。 apply(this對(duì)象，[參數(shù)1，參數(shù)2，…]) 即使只有一個(gè)參數(shù)，也要寫(xiě)進(jìn)數(shù)組裡 call(this對(duì)象，參數(shù)1，參數(shù)2，…) 它可以接受多個(gè)任意參數(shù)，第一個(gè)參數(shù)與apply一樣，後面則是一串參數(shù)列表

微信小程式如何跟事件傳值

給HTML 元素加入data-*屬性來(lái)傳遞我們需要的值，然後透過(guò)e.currentTarget.dataset 或onload 的param 參數(shù)取得。 但data -名稱不能有大寫(xiě)字母, 不可以存放物件

微信小程式與vue 區(qū)別

? 生命週期不一樣，微信小程式生命週期比較簡(jiǎn)單 ? 資料綁定也不同，微信小程式資料綁定需要使用{{}}，vue 直接 : 就可以 ? 控制元素的顯示和隱藏，小程式中，使用 wx-if 和 hidden 控制元素的顯示和隱藏 ; vue 中，使用 v-if 和 v-show ? 事件處理不同，小程式中，全用 bindtap(bind event)，或catchtap(catch event) 綁定事件,vue：使用 v-on:event 綁定事件，或使用@event 綁定事件 ? 資料雙向綁定也不一樣, 在vue 中, 只需要在表單元素上加上v-model, 然後再綁定data 中對(duì)應(yīng)的一個(gè)值，當(dāng)表單元素內(nèi)容改變時(shí)，data 中對(duì)應(yīng)的值也會(huì)隨之改變，這是vue 非常nice 的一點(diǎn)。微信小程式必須取得表單元素改變的值，然後再值賦給一個(gè) data 中 宣告的變數(shù)。

哪些方法可以用來(lái)提高微信小程式的應(yīng)用速度

提高頁(yè)面載入速度 使用者行為預(yù)測(cè) 減少預(yù)設(shè) data 的大小 元件化方案

怎麼解決小程式的非同步請(qǐng)求問(wèn)題

小程式支援大部分 ES6 語(yǔ)法 ? 在回傳成功的回呼裡面處理邏輯 Promise 非同步

小程式 wxml 與標(biāo)準(zhǔn)的 html 的異同？

相同： ? 都是用來(lái)描述頁(yè)面的結(jié)構(gòu)； ? 都由標(biāo)籤、屬性等構(gòu)成； 不同： ? 標(biāo)籤名字不一樣，且小程式標(biāo)籤較少，單一標(biāo)籤較多； ? 多了一些 wx:if 這樣的屬性以及 {{ }}這樣的表達(dá)式; ? WXML 只能在微信小程式開(kāi)發(fā)者工具中預(yù)覽，而 HTML 則可在瀏覽器內(nèi)預(yù)覽； ? 元件封裝不同， WXML 對(duì)元件進(jìn)行了重新封裝; ? 小程式運(yùn)行在 JS Core 內(nèi)，沒(méi)有 DOM 樹(shù)和 window 對(duì)象，小程式中無(wú)法使 用 window 物件和 document 物件。

小程式簡(jiǎn)單介紹下三種事件物件的屬性清單？

基礎(chǔ)事件（BaseEvent） ? type:事件類型 ? timeStamp：事件產(chǎn)生時(shí)的時(shí)間戳 ? target：觸發(fā)事件的元件的屬性值集合 ? currentTarget：目前元件的一些屬性集合 自訂事件（CustomEvent） ? detail 觸摸事件（TouchEvent） ? touches ? changedTouches

小程式對(duì) wx:if 和 hidden 使用的理解？

? wx:if 有較高的切換消耗。 ? hidden 有較高的初始渲染消耗。 ? 因此，如果需要頻繁切換的情境下，用hidden 更好，如果在運(yùn)行時(shí)條件不大可能改變則wx:if 較好

微信小程式與H5 的區(qū)別

運(yùn)行環(huán)境的不同: 傳統(tǒng)的HTML5 的運(yùn)作環(huán)境是瀏覽器，包括webview，而微信小程式的運(yùn)作環(huán)境並非完整的瀏覽器，是微信開(kāi)發(fā)團(tuán)隊(duì)基於瀏覽器核心完全重構(gòu)的內(nèi)建解析器，針對(duì)小程式專門(mén)做了最佳化，配合自己定義的開(kāi)發(fā)語(yǔ)言標(biāo)準(zhǔn)，提升了小程式的效能。 ? 開(kāi)發(fā)成本的不同 : 只在微信中運(yùn)行，所以不用再去顧慮瀏覽器兼容性，不用擔(dān)心生產(chǎn)環(huán)境中出現(xiàn)不可預(yù)料的奇妙 BUG ? 取得系統(tǒng)級(jí)權(quán)限的不同

app.json 是對(duì)目前小程式的全域配置，講述三個(gè)配置各項(xiàng)的意義？

? pages 欄位 —— 用來(lái)描述目前小程式所有頁(yè)面路徑，這是為了讓 微信用戶端知道目前你的小程式頁(yè)面定義在哪個(gè)目錄。 ? window 欄位 —— 小程式所有頁(yè)面的頂部背景顏色, 文字顏色定義在這裡的 ? tab 欄位 —— 小程式全域頂部或底部 tab

小程式 onPageScroll 方法的使用注意什麼？

由於此方法呼叫頻繁，不需要時(shí)可以去掉，不要保留空方法，並且使用 onPageScroll 時(shí)，盡量避免使用 setData()，盡量減少 setData()的使用頻 次。

小程式視圖渲染結(jié)束回呼？

使用 setData(data, callback)，在 callback 回呼方法中新增後續(xù)運(yùn)算元

小程式同步 API 和非同步 API 使用時(shí)注意事項(xiàng)？

wx.setStorageSync 是以 Sync 結(jié)尾的 API 為同步 API， 使用時(shí)使用 try-catch 來(lái)查看異常，如果判定 API 為非同步，可以在其回呼方法 success、fail、 complete 中進(jìn)行下一步操作。

如何封裝微信小程式的資料請(qǐng)求的？

1、將所有的介面放在統(tǒng)一的 js 檔案中並匯出。?

2、在 app.js 中建立封裝請(qǐng)求資料的方法。?

3、在子頁(yè)面中呼叫封裝的方法請(qǐng)求資料。

小程式與原生 App 哪個(gè)好？

小程式除了擁有公眾號(hào)的低開(kāi)發(fā)成本、低獲客成本低以及無(wú)需下載等優(yōu)勢(shì)，在服務(wù)請(qǐng)求延時(shí)與用戶使用體驗(yàn)是都得到了較大幅度的提升， 使得其能夠承載跟 複雜的服務(wù)功能以及使用戶獲得更好的用戶體驗(yàn)。

webview 中的頁(yè)面怎麼跳回小程式？

首先要引入最新版的 jweixin-x.x.x.js，然後

wx.miniProgram.navigateTo({
url: '/pages/login/login'+'$params'
})

webview 的頁(yè)面怎麼跳到小程式導(dǎo)航的頁(yè)面？

小程式導(dǎo)覽的頁(yè)面可以透過(guò) switchTab，但預(yù)設(shè)情況是不會(huì)重新載入資料 的。若需載入新數(shù)據(jù)，則在 success 屬性中加入以下程式碼即可：

小程式呼叫後臺(tái)介面遇到哪些問(wèn)題？

1、資料的大小有限制，超過(guò)範(fàn)圍會(huì)直接導(dǎo)致整個(gè)小程式崩潰，除非重新啟動(dòng)小程式；?

2、小程式無(wú)法直接渲染文章內(nèi)容頁(yè)這類型的html 文字內(nèi)容，若需顯示要藉住插件，但插件渲染會(huì)導(dǎo)致頁(yè)面加載變慢，所以最好在後臺(tái)對(duì)文章內(nèi)容的html 進(jìn)行過(guò)濾，後臺(tái)直接處理批量替換p 標(biāo)籤div 標(biāo)籤為view 標(biāo)籤，然後其它的標(biāo)籤讓插件來(lái)做，減輕前端的時(shí)間

微信小程式的優(yōu)劣勢(shì)？

優(yōu)點(diǎn)：

1、無(wú)需下載，透過(guò)搜尋和掃描即可開(kāi)啟。?

2、良好的使用者體驗(yàn)：開(kāi)啟速度快。?

3、開(kāi)發(fā)成本比 App 低。?

4、安卓上可以加入桌面，跟原生 App 差不多。?

5、提供使用者良好的安全保障。小程序的發(fā)布，微信擁有一套嚴(yán)格的審 查流程，不能通過(guò)審查的小程序是無(wú)法發(fā)佈到線上的。

劣勢(shì)：

1、限制較多。頁(yè)面大小不能超過(guò) 1M。不能開(kāi)啟超過(guò) 5 個(gè)層級(jí)的頁(yè)面。?

2、樣式單一。小程式的部分元件已經(jīng)是成型的了，樣式不可以修改。例 如：投影片、導(dǎo)覽。?

3、推廣面較窄，無(wú)法分享朋友圈，只能透過(guò)分享給朋友，附近小程式推 廣。其中附近小程式也受到微信的限制。?

4、依賴微信，無(wú)法開(kāi)發(fā)後臺(tái)管理功能。

【相關(guān)學(xué)習(xí)推薦：小程式開(kāi)發(fā)教學(xué)】

以上是總結(jié)分享一些基於小程式的面試題，讓你面試穩(wěn)操勝券！的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！