總結分享一些基於小程式的面試題，讓你面試穩操勝券！

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

小程式登入流程

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

第二步：wx.getUserInfo取得加密過的資料encryptedData與解密參數iv 

第三步：把步驟一、二中的code、encryptedData、iv傳到開發者自己服務端 步驟四：服務端取得到code、encryptedData、iv之後用get方法請求如下微信接口個人項目，沒有後端接口，回答了雲開發中的登入流程

小程式頁面宣告週期

● onLoad() 頁面載入時觸發，只會呼叫一次，可取得目前頁面路徑中的參數。

● onShow() 頁面顯示/切入前台時觸發，一般用來傳送資料要求； 

● onReady() 頁面初次渲染完成時觸發，只會呼叫一次，代表頁面已可和視圖層進行互動 

● onHide() 頁面隱藏/切入後台時觸發，如底部tab 切換到其他頁面或小程式切入後台等 

● onUnload() 頁面卸載時觸發，如redirectTo 或navigateBack 到其他頁面時

小程式常用的框架

WeUI WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫， 由微信官方設計團隊為微信內網頁和微信小程式量身設計，令使用者的使用感知更加統一。 小程式開發中最常使用的一款框架，受到廣大開發人員的歡迎。 美團小程式框架mpvue 官方介紹：mpvue是使用 Vue.js開發小程式的前端框架。框架基於 Vue.js核心，mpvue修改了 Vue.js的 runtime和 compiler實現，使其可以運行在小程式環境中，從而為小程式開發引入了整套Vue.js開發體驗。

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

了解微信小程式嗎？簡述小程式的原理。

微信⼩程式採⽤JavaScript、WXML、WXSS三種技術進⾏開發,本質就是⼀個單⻚⾯應⽤，所有的⻚⾯渲染和事件處理，都在⼀個⻚⾯內進⾏，但⼜可以透過微信客戶端調⽤原⽣的各種接⼝；

微信的架構，是資料驅動的架構模式，它的UI和資料是分離的，所有的⻚⾯更新，都需要透過資料的變更來實現；

⼩程式分為兩個部分webview 和appService 。其中 webview 主要⽤來展現 UI ，appService用來處理業務邏輯、資料及接⼝調⽤。它們在兩個進程中運⾏，透過系統層JSBridge 實現通信，實現UI 的渲染、事件的處理

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

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

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

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

小程式頁面的生命週期函數

#onLoad 頁面載入時觸發。一個頁面只會呼叫一次，可以在 onLoad 的參數中取得開啟目前頁面路徑中的參數(監聽頁面載入)

onShow() 頁面顯示/切入前台時觸發(監聽頁面顯示)

onReady() 頁面初次渲染完成時觸發。一個頁面只會呼叫一次，代表頁面已經準備妥當，可以和視圖層進行互動(監聽頁面初次渲染完成)

onHide() 頁面隱藏/切入後台時觸發。如 navigateTo 或底部 tab 切換到其他頁面，小程式切入後台等(監聽頁面隱藏)

onUnload() 頁面卸載時觸發。如 redirectTo 或 navigateBack 到其他頁面時(監聽頁面卸載)

#微信小程式的優劣勢

優勢 : 即用即走，不用安裝，省流量，省安裝時間，不佔用桌面 依托微信流量，天生推廣傳播優勢 開發成本比 App 低 缺點 : 用戶留存，即用即走是優勢，也存在一些問題 入口相對傳統 App 深很多 限制較多, 頁面大小不能超過2M , 不能打開超過10個層級的頁面

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

#WXSS 和CSS 類似，不過在CSS 的基礎上做了一些補充和修改

#尺寸單位rpx rpx 是響應式像素,可以根據螢幕寬度進行自適應。規定螢幕寬為 750rpx。如在 iPhone6 上，螢幕寬度為 375px，共有 750 個實體像素，則 750rpx = 375px = 750 實體像素

使用 @import 識別碼來匯入外聯樣式。 @import 後面接著需要匯入的外聯樣式表的相對路徑，用;表示語句結束

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

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

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

小程式關聯微信公眾號如何決定使用者的唯一性

如果開發者擁有多個行動應用程式、網站應用程式、和公眾帳號（包括小程式），可透過unionid 來區分使用者的唯一性，因為只要是同一個微信開放平台帳號下的行動應用程式、網站應用程式和公眾帳號（包括小程式），使用者的unionid 是唯一的。換句話說，同一用戶，對同一個微信開放平台下的不同應用，unionid 是相同的

#如何實現下拉刷新

首先在全域config 中的window 設定enablePullDownRefresh 在 Page 中定義 onPullDownRefresh 鉤子函數 , 到達下拉刷新條件後 , 該鉤子函數執行, 發起請求方法 請求返回後，呼叫wx.stopPullDownRefresh 停止下拉刷新

bindtap和catchtap的區別是什麼

相同點：首先他們都是作為點擊事件函數，就是點擊時觸發。在這個作用上他們是一樣的，可以不做區分

不同點：他們的不同點主要是bindtap是不會阻止冒泡事件的，catchtap是阻止冒泡的

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

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

wx.redirectTo()：關閉目前頁面，跳到應用程式內的某個頁面。但不允許跳到tabbar 頁面

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

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

wx.reLaunch()：關閉所有頁面，開啟到應用程式內的某個頁面

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

typeof是一個運算符，用來偵測資料的型別，例如基本資料型別null、undefined、string 、number、boolean， 以及引用資料型別object、function，但是對於正規表示式、日期、陣列這些引用資料型，它會全部辨識為object；

instanceof同樣也是一個運算符，它就能很好地辨識資料具體是哪一種引用型別。它與isPrototypeOf的差別就是 它是用來偵測建構函式的原型是否存在於指定物件的原型鏈當中； 而isPrototypeOf是用來偵測呼叫此方法的物件是否存在於指定物件的原型鏈中，所以本質上就是偵測目標不同。

call()和apply()的差異

#

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

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

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

微信小程式與vue 區別

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

哪些方法可以用來提高微信小程式的應用速度

提高頁面載入速度 使用者行為預測 減少預設 data 的大小 元件化方案

怎麼解決小程式的非同步請求問題

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

小程式 wxml 與標準的 html 的異同？

相同： • 都是用來描述頁面的結構； • 都由標籤、屬性等構成； 不同： • 標籤名字不一樣，且小程式標籤較少，單一標籤較多； • 多了一些 wx:if 這樣的屬性以及 {{ }}這樣的表達式; • WXML 只能在微信小程式開發者工具中預覽，而 HTML 則可在瀏覽器內預覽； • 元件封裝不同， WXML 對元件進行了重新封裝; • 小程式運行在 JS Core 內，沒有 DOM 樹和 window 對象，小程式中無法使 用 window 物件和 document 物件。

小程式簡單介紹下三種事件物件的屬性清單？

基礎事件（BaseEvent） • type:事件類型 • timeStamp：事件產生時的時間戳 • target：觸發事件的元件的屬性值集合 • currentTarget：目前元件的一些屬性集合 自訂事件（CustomEvent） • detail 觸摸事件（TouchEvent） • touches • changedTouches

小程式對 wx:if 和 hidden 使用的理解？

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

微信小程式與H5 的區別

運行環境的不同: 傳統的HTML5 的運作環境是瀏覽器，包括webview，而微信小程式的運作環境並非完整的瀏覽器，是微信開發團隊基於瀏覽器核心完全重構的內建解析器，針對小程式專門做了最佳化，配合自己定義的開發語言標準，提升了小程式的效能。 • 開發成本的不同 : 只在微信中運行，所以不用再去顧慮瀏覽器兼容性，不用擔心生產環境中出現不可預料的奇妙 BUG • 取得系統級權限的不同

app.json 是對目前小程式的全域配置，講述三個配置各項的意義？

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

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

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

小程式視圖渲染結束回呼？

#

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

小程式同步 API 和非同步 API 使用時注意事項？

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

如何封裝微信小程式的資料請求的？

1、將所有的介面放在統一的 js 檔案中並匯出。 

2、在 app.js 中建立封裝請求資料的方法。 

3、在子頁面中呼叫封裝的方法請求資料。

小程式與原生 App 哪個好？

小程式除了擁有公眾號的低開發成本、低獲客成本低以及無需下載等優勢，在服務請求延時與用戶使用體驗是都得到了較大幅度的提升， 使得其能夠承載跟 複雜的服務功能以及使用戶獲得更好的用戶體驗。

webview 中的頁面怎麼跳回小程式？

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

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

webview 的頁面怎麼跳到小程式導航的頁面？

小程式導覽的頁面可以透過 switchTab，但預設情況是不會重新載入資料 的。若需載入新數據，則在 success 屬性中加入以下程式碼即可：

小程式呼叫後台介面遇到哪些問題？

1、資料的大小有限制，超過範圍會直接導致整個小程式崩潰，除非重新啟動小程式； 

2、小程式無法直接渲染文章內容頁這類型的html 文字內容，若需顯示要藉住插件，但插件渲染會導致頁面加載變慢，所以最好在後台對文章內容的html 進行過濾，後台直接處理批量替換p 標籤div 標籤為view 標籤，然後其它的標籤讓插件來做，減輕前端的時間

微信小程式的優劣勢？

優點：

1、無需下載，透過搜尋和掃描即可開啟。 

2、良好的使用者體驗：開啟速度快。 

3、開發成本比 App 低。 

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

5、提供使用者良好的安全保障。小程序的發布，微信擁有一套嚴格的審 查流程，不能通過審查的小程序是無法發佈到線上的。

劣勢：

1、限制較多。頁面大小不能超過 1M。不能開啟超過 5 個層級的頁面。 

2、樣式單一。小程式的部分元件已經是成型的了，樣式不可以修改。例 如：投影片、導覽。 

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

4、依賴微信，無法開發後台管理功能。

【相關學習推薦：小程式開發教學】

以上是總結分享一些基於小程式的面試題，讓你面試穩操勝券！的詳細內容。更多資訊請關注PHP中文網其他相關文章！