前端小程序筆試面試題

前言

隨便打開一個招聘網站， 你會發現市場上對小程序的需求還挺高的，雖然小程序一部分開發起來仍是挺簡單ok的，但一些經常使用的東西仍是須要了解一下，所以總結了一篇有關小程序的面試題,但願對你我都幫組。

目錄：

前端HTML+CSS筆試題面試題
前端JS筆試題面試題
前端Vue筆試題面試題
前端小程序筆試題面試題

一、微信小程序有幾個文件

• WXML（WeiXin Markup Language）是框架設計的一套標籤語言，結合基礎組件、事件系統，能夠構建出頁面的結構。內部主要是微信本身定義的一套組件
• WXSS (WeiXin Style Sheets)是一套樣式語言，用於描述 WXML 的組件樣式
• js邏輯處理，網絡請求
• json小程序設置，如頁面註冊，頁面標題及tabBar

二、微信小程序怎樣跟事件傳值

給 HTML 元素添加 data-*屬性來傳遞咱們須要的值，而後經過 e.currentTarget.dataset 或 onload的 param參數獲取。但 data -名稱不能有大寫字母和不能夠存放對象

三、小程序的 wxss 和 css 有哪些不同的地方？

• wxss的圖片引入需使用外鏈地址
• 沒有 Body；樣式可直接使用 import 導入

四、小程序關聯微信公衆號如何肯定用戶的惟一性

使用 wx.getUserInfo方法 withCredentials 爲 true 時 可獲取 <encryptedData，裏面有 union_id。後端須要進行對稱解密

五、微信小程序與vue區別

• 生命週期不同，微信小程序生命週期比較簡單
• 數據綁定也不一樣，微信小程序數據綁定須要使用{{}}，vue 直接:就能夠 顯示與隱藏元素，vue中，使用 v-if和 v-show
• 控制元素的顯示和隱藏，小程序中，使用wx-if和hidden 控制元素的顯示和隱藏
• 事件處理不一樣，小程序中，全用 bindtap(bind+event)，或者 catchtap(catch+event)綁定事件,vue：使用v-on:event 綁定事件，或者使用@event綁定事件
• 數據雙向綁定也不也不同在 vue中,只須要再表單元素上加上 v-model,而後再綁定 data中對應的一個值，當表單元素內容發生變化時，data中對應的值也會相應改變，這是 vue很是 nice 的一點。微信小程序必須獲取到表單元素，改變的值，而後再把值賦給一個 data中聲明的變量。

六、小程序的雙向綁定和vue哪裏不同

小程序直接 this.data屬性是不能夠同步到視圖的，必須調用：

this.setData({
    // 這裏設置
})
複製代碼

七、簡述微信小程序原理

• 微信小程序採用 JavaScript、WXML、WXSS 三種技術進行開發,本質就是一個單頁面應用，全部的頁面渲染和事件處理，都在一個頁面內進行，但又能夠經過微信客戶端調用原生的各類接口
• 微信的架構，是數據驅動的架構模式，它的 UI 和數據是分離的，全部的頁面更新，都須要經過對數據的更改來實現
• 小程序分爲兩個部分 webview和 appService 。其中 webview 主要用來展示UI ，appService 有來處理業務邏輯、數據及接口調用。它們在兩個進程中運行，經過系統層 JSBridge 實現通訊，實現 UI 的渲染、事件的處理

八、小程序的生命週期函數

• onLoad 頁面加載時觸發。一個頁面只會調用一次，能夠在onLoad 的參數中獲取打開當前頁面路徑中的參數
• onShow() 頁面顯示/切入前臺時觸發
• onReady() 頁面初次渲染完成時觸發。一個頁面只會調用一次，表明頁面已經準備穩當，能夠和視圖層進行交互
• onHide() 頁面隱藏/切入後臺時觸發。 如 navigateTo 或底部 tab 切換到其餘頁面，小程序切入後臺等
• onUnload() 頁面卸載時觸發。如 redirectTo 或 navigateBack 到其餘頁面時

九、哪些方法能夠用來提升微信小程序的應用速度

一、提升頁面加載速度

二、用戶行爲預測

三、減小默認 data 的大小

四、組件化方案

十、微信小程序的優劣勢

優點

即用即走，不用安裝，省流量，省安裝時間，不佔用桌面 依託微信流量，天生推廣傳播優點 開發成本比 App 低

缺點

用戶留存，即用即走是優點，也存在一些問題 入口相對傳統 App 要深不少 限制較多,頁面大小不能超過2M。不能打開超過10個層級的頁面

十一、怎麼解決小程序的異步請求問題

• 小程序支持大部分 ES6 語法
• 在返回成功的回調裏面處理邏輯Promise異步

十二、如何實現下拉刷新

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

1三、bindtap和catchtap的區別是什麼

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

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

1四、小程序頁面間有哪些傳遞數據的方法

一、使用全局變量實現數據傳遞。在 app.js 文件中定義全局變量 globalData， 將須要存儲的信息存放在裏面

二、使用 wx.navigateTo與 wx.redirectTo 的時候，能夠將部分數據放在 url 裏面，並在新頁面onLoad的時候初始化

三、使用本地緩存Storage 相關

1五、小程序wxml與標準的html的異同？

相同：

• 都是用來描述頁面的結構；
• 都由標籤、屬性等構成；

不一樣：

• 標籤名字不同，且小程序標籤更少，單一標籤更多；
• 多了一些wx:if 這樣的屬性以及 {{ }}這樣的表達式
• WXML僅能在微信小程序開發者工具中預覽，而HTML能夠在瀏覽器內預覽；
• 組件封裝不一樣， WXML對組件進行了從新封裝，
• 小程序運行在JS Core內，沒有DOM樹和window對象，小程序中沒法使用window對象和document對象。

1六、小程序簡單介紹下三種事件對象的屬性列表？

基礎事件（BaseEvent）

• type:事件類型
• timeStamp：事件生成時的時間戳
• target：觸發事件的組件的屬性值集合
• currentTarget：當前組件的一些屬性集合

自定義事件（CustomEvent）

• detail

觸摸事件（TouchEvent）

• touches
• changedTouches

1七、小程序對wx:if 和 hidden使用的理解？

• wx:if有更高的切換消耗。
• hidden 有更高的初始渲染消耗。
• 所以，若是須要頻繁切換的情景下，用 hidden 更好，若是在運行時條件不大可能改變則wx:if 較好。

1八、微信小程序與H5的區別？

• 運行環境的不一樣

傳統的HTML5的運行環境是瀏覽器，包括webview，而微信小程序的運行環境並不是完整的瀏覽器，是微信開發團隊基於瀏覽器內核徹底重構的一個內置解析器，針對小程序專門作了優化，配合本身定義的開發語言標準，提高了小程序的性能。

• 開發成本的不一樣

只在微信中運行，因此不用再去顧慮瀏覽器兼容性，不用擔憂生產環境中出現不可預料的奇妙BUG

• 獲取系統級權限的不一樣

1九、app.json 是對當前小程序的全局配置，講述三個配置各個項的含義？

• ```pages字段`` —— 用於描述當前小程序全部頁面路徑，這是爲了讓微信客戶端知道當前你的小程序頁面定義在哪一個目錄。
• window字段 —— 小程序全部頁面的頂部背景顏色，文字顏色定義在這裏的
• tab字段—小程序全局頂部或底部tab

20、小程序onPageScroll方法的使用注意什麼？

因爲此方法調用頻繁，不須要時，能夠去掉，不要保留空方法，而且使用onPageScroll時，儘可能避免使用setData()，儘可能減小setData()的使用頻次。

2一、小程序視圖渲染結束回調？

使用setData(data, callback)，在callback回調方法中添加後續操做代碼

2二、小程序同步API和異步API使用時注意事項？

wx.setStorageSync是以Sync結尾的API爲同步API，使用時使用try-catch來查看異常，若是斷定API爲異步，能夠在其回調方法success、fail、complete中進行下一步操做。

2三、簡述下 wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的區別

• wx.navigateTo()：保留當前頁面，跳轉到應用內的某個頁面。可是不能跳到 tabbar 頁面
• wx.redirectTo()：關閉當前頁面，跳轉到應用內的某個頁面。可是不容許跳轉到 tabbar 頁面
• wx.switchTab()：跳轉到 abBar 頁面，並關閉其餘全部非 tabBar 頁面
• wx.navigateBack()：關閉當前頁面，返回上一頁面或多級頁面。可經過getCurrentPages() 獲取當前的頁面棧，決定須要返回幾層
• wx.reLaunch()：關閉全部頁面，打開到應用內的某個頁面

2四、如何封裝微信小程序的數據請求的？

一、將全部的接口放在統一的js文件中並導出。

二、在app.js中建立封裝請求數據的方法。

三、在子頁面中調用封裝的方法請求數據。

2五、小程序與原生App哪一個好？

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

2六、webview中的頁面怎麼跳回小程序中？

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

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

2七、小程序關聯微信公衆號如何肯定用戶的惟一性？

使用wx.getUserInfo方法withCredentials爲 true時 可獲取encryptedData，裏面有union_id。後端須要進行對稱解密。

2八、小程序調用後臺接口遇到哪些問題？

1.數據的大小有限制，超過範圍會直接致使整個小程序崩潰，除非重啓小程序；

2.小程序不能夠直接渲染文章內容頁這類型的html文本內容，若需顯示要借住插件，但插件渲染會致使頁面加載變慢，因此最好在後臺對文章內容的html進行過濾，後臺直接處理批量替換p標籤div標籤爲view標籤，而後其它的標籤讓插件來作，減輕前端的時間。

2九、webview的頁面怎麼跳轉到小程序導航的頁面？

答：小程序導航的頁面能夠經過switchTab，但默認狀況是不會從新加載數據的。若需加載新數據，則在success屬性中加入如下代碼便可：

success: function (e) {
           var page = getCurrentPages().pop();
           if (page == undefined || page == null) return;
           page.onLoad();
          }
複製代碼

webview的頁面，則經過

wx.miniProgram.switchTab({
         url: '/pages/index/index'
       })
複製代碼

30、微信小程序的優劣勢？

優點：

一、無需下載，經過搜索和掃一掃就能夠打開。

      二、良好的用戶體驗：打開速度快。

      三、開發成本要比App要低。

      四、安卓上能夠添加到桌面，與原生App差很少。

      五、爲用戶提供良好的安全保障。小程序的發佈，微信擁有一套嚴格的審查流程，不能經過審查的小程序是沒法發佈到線上的。
複製代碼

劣勢：

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

     二、樣式單一。小程序的部分組件已是成型的了，樣式不能夠修改。例如：幻燈片、導航。

     三、推廣面窄，不能分享朋友圈，只能經過分享給朋友，附近小程序推廣。其中附近小程序也受到微信的限制。

     四、依託於微信，沒法開發後臺管理功能。
複製代碼