前言

隨便打開(kāi)一個(gè)招聘網(wǎng)站， 你會(huì)發(fā)現(xiàn)市場(chǎng)上對(duì)小程序的需求還挺高的，雖然小程序一部分開(kāi)發(fā)起來(lái)還是挺簡(jiǎn)單ok的，但一些常用的東西還是需要了解一下，因此總結(jié)了一篇有關(guān)小程序的面試題,希望對(duì)你我都幫組。

目錄：

前端HTML+CSS筆試題面試題

前端JS筆試題面試題

前端Vue筆試題面試題

1、微信小程序有幾個(gè)文件

• WXML（WeiXin Markup Language）是框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)。內(nèi)部主要是微信自己定義的一套組件
• WXSS (WeiXin Style Sheets)是一套樣式語(yǔ)言，用于描述 WXML 的組件樣式
• js邏輯處理，網(wǎng)絡(luò)請(qǐng)求
• json小程序設(shè)置，如頁(yè)面注冊(cè)，頁(yè)面標(biāo)題及tabBar

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

給 HTML 元素添加 data-*屬性來(lái)傳遞我們需要的值，然后通過(guò) e.currentTarget.dataset 或 onload的 param參數(shù)獲取。但 data -名稱(chēng)不能有大寫(xiě)字母和不可以存放對(duì)象

3、小程序的 wxss 和 css 有哪些不一樣的地方？

• wxss的圖片引入需使用外鏈地址
• 沒(méi)有 Body；樣式可直接使用 import 導(dǎo)入

4、小程序關(guān)聯(lián)微信公眾號(hào)如何確定用戶(hù)的唯一性

使用 wx.getUserInfo方法 withCredentials 為 true 時(shí) 可獲取 <encryptedData，里面有 union_id。后端需要進(jìn)行對(duì)稱(chēng)解密

5、微信小程序與vue區(qū)別

• 生命周期不一樣，微信小程序生命周期比較簡(jiǎn)單
• 數(shù)據(jù)綁定也不同，微信小程序數(shù)據(jù)綁定需要使用{{}}，vue 直接:就可以
  顯示與隱藏元素，vue中，使用 v-if和 v-show
• 控制元素的顯示和隱藏，小程序中，使用wx-if和hidden 控制元素的顯示和隱藏
• 事件處理不同，小程序中，全用 bindtap(bind+event)，或者 catchtap(catch+event)綁定事件,vue：使用v-on:event 綁定事件，或者使用@event綁定事件
• 數(shù)據(jù)雙向綁定也不也不一樣在 vue中,只需要再表單元素上加上 v-model,然后再綁定 data中對(duì)應(yīng)的一個(gè)值，當(dāng)表單元素內(nèi)容發(fā)生變化時(shí)，data中對(duì)應(yīng)的值也會(huì)相應(yīng)改變，這是 vue非常 nice 的一點(diǎn)。微信小程序必須獲取到表單元素，改變的值，然后再把值賦給一個(gè) data中聲明的變量。

6、小程序的雙向綁定和vue哪里不一樣

小程序直接 this.data屬性是不可以同步到視圖的，必須調(diào)用：

this.setData({
    // 這里設(shè)置
})

7、簡(jiǎn)述微信小程序原理

• 微信小程序采用 JavaScript、WXML、WXSS 三種技術(shù)進(jìn)行開(kāi)發(fā),本質(zhì)就是一個(gè)單頁(yè)面應(yīng)用，所有的頁(yè)面渲染和事件處理，都在一個(gè)頁(yè)面內(nèi)進(jìn)行，但又可以通過(guò)微信客戶(hù)端調(diào)用原生的各種接口
• 微信的架構(gòu)，是數(shù)據(jù)驅(qū)動(dòng)的架構(gòu)模式，它的 UI 和數(shù)據(jù)是分離的，所有的頁(yè)面更新，都需要通過(guò)對(duì)數(shù)據(jù)的更改來(lái)實(shí)現(xiàn)
• 小程序分為兩個(gè)部分 webview和 appService 。其中 webview 主要用來(lái)展現(xiàn)UI ，appService 有來(lái)處理業(yè)務(wù)邏輯、數(shù)據(jù)及接口調(diào)用。它們?cè)趦蓚€(gè)進(jìn)程中運(yùn)行，通過(guò)系統(tǒng)層 JSBridge 實(shí)現(xiàn)通信，實(shí)現(xiàn) UI 的渲染、事件的處理

8、小程序的生命周期函數(shù)

• onLoad 頁(yè)面加載時(shí)觸發(fā)。一個(gè)頁(yè)面只會(huì)調(diào)用一次，可以在onLoad 的參數(shù)中獲取打開(kāi)當(dāng)前頁(yè)面路徑中的參數(shù)
• onShow() 頁(yè)面顯示/切入前臺(tái)時(shí)觸發(fā)
• onReady() 頁(yè)面初次渲染完成時(shí)觸發(fā)。一個(gè)頁(yè)面只會(huì)調(diào)用一次，代表頁(yè)面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行交互
• onHide() 頁(yè)面隱藏/切入后臺(tái)時(shí)觸發(fā)。 如 navigateTo 或底部 tab 切換到其他頁(yè)面，小程序切入后臺(tái)等
• onUnload() 頁(yè)面卸載時(shí)觸發(fā)。如 redirectTo 或 navigateBack 到其他頁(yè)面時(shí)

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

1、提高頁(yè)面加載速度

2、用戶(hù)行為預(yù)測(cè)

3、減少默認(rèn) data 的大小

4、組件化方案

10、微信小程序的優(yōu)劣勢(shì)

優(yōu)勢(shì)

即用即走，不用安裝，省流量，省安裝時(shí)間，不占用桌面
依托微信流量，天生推廣傳播優(yōu)勢(shì)
開(kāi)發(fā)成本比 App 低

缺點(diǎn)

用戶(hù)留存，即用即走是優(yōu)勢(shì)，也存在一些問(wèn)題
入口相對(duì)傳統(tǒng) App 要深很多
限制較多,頁(yè)面大小不能超過(guò)2M。不能打開(kāi)超過(guò)10個(gè)層級(jí)的頁(yè)面

11、怎么解決小程序的異步請(qǐng)求問(wèn)題

• 小程序支持大部分 ES6 語(yǔ)法
• 在返回成功的回調(diào)里面處理邏輯Promise異步

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

首先在全局 config 中的 window配置 enablePullDownRefresh
，在 Page 中定義onPullDownRefresh 鉤子函數(shù),到達(dá)下拉刷新條件后，該鉤子函數(shù)執(zhí)行，發(fā)起請(qǐng)求方法
請(qǐng)求返回后，調(diào)用wx.stopPullDownRefresh停止下拉刷新

13、bindtap和catchtap的區(qū)別是什么

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

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

14、小程序頁(yè)面間有哪些傳遞數(shù)據(jù)的方法

1、使用全局變量實(shí)現(xiàn)數(shù)據(jù)傳遞。在 app.js 文件中定義全局變量 globalData， 將需要存儲(chǔ)的信息存放在里面

2、使用 wx.navigateTo與 wx.redirectTo 的時(shí)候，可以將部分?jǐn)?shù)據(jù)放在 url 里面，并在新頁(yè)面onLoad的時(shí)候初始化

3、使用本地緩存Storage 相關(guān)

15、小程序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對(duì)象和document對(duì)象。

16、小程序簡(jiǎn)單介紹下三種事件對(duì)象的屬性列表？

基礎(chǔ)事件（BaseEvent）

• type:事件類(lèi)型
• timeStamp：事件生成時(shí)的時(shí)間戳
• target：觸發(fā)事件的組件的屬性值集合
• currentTarget：當(dāng)前組件的一些屬性集合

自定義事件（CustomEvent）

• detail

觸摸事件（TouchEvent）

• touches
• changedTouches

17、小程序?qū)x:if 和 hidden使用的理解？

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

18、微信小程序與H5的區(qū)別？

• 運(yùn)行環(huán)境的不同

傳統(tǒng)的HTML5的運(yùn)行環(huán)境是瀏覽器，包括webview，而微信小程序的運(yùn)行環(huán)境并非完整的瀏覽器，是微信開(kāi)發(fā)團(tuán)隊(duì)基于瀏覽器內(nèi)核完全重構(gòu)的一個(gè)內(nèi)置解析器，針對(duì)小程序?qū)ｉT(mén)做了優(yōu)化，配合自己定義的開(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)限的不同

19、app.json 是對(duì)當(dāng)前小程序的全局配置，講述三個(gè)配置各個(gè)項(xiàng)的含義？

• ```pages字段`` —— 用于描述當(dāng)前小程序所有頁(yè)面路徑，這是為了讓微信客戶(hù)端知道當(dāng)前你的小程序頁(yè)面定義在哪個(gè)目錄。
• window字段 —— 小程序所有頁(yè)面的頂部背景顏色，文字顏色定義在這里的
• tab字段—小程序全局頂部或底部tab

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

由于此方法調(diào)用頻繁，不需要時(shí)，可以去掉，不要保留空方法，并且使用onPageScroll時(shí)，盡量避免使用setData()，盡量減少setData()的使用頻次。

21、小程序視圖渲染結(jié)束回調(diào)？

使用setData(data, callback)，在callback回調(diào)方法中添加后續(xù)操作代碼

22、小程序同步API和異步API使用時(shí)注意事項(xiàng)？

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

23、簡(jiǎn)述下 wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的區(qū)別</h5>

• wx.navigateTo()：保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。但是不能跳到 tabbar 頁(yè)面
• wx.redirectTo()：關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。但是不允許跳轉(zhuǎn)到 tabbar 頁(yè)面
• wx.switchTab()：跳轉(zhuǎn)到 abBar 頁(yè)面，并關(guān)閉其他所有非 tabBar 頁(yè)面
• wx.navigateBack()：關(guān)閉當(dāng)前頁(yè)面，返回上一頁(yè)面或多級(jí)頁(yè)面。可通過(guò)getCurrentPages() 獲取當(dāng)前的頁(yè)面棧，決定需要返回幾層
• wx.reLaunch()：關(guān)閉所有頁(yè)面，打開(kāi)到應(yīng)用內(nèi)的某個(gè)頁(yè)面

24、如何封裝微信小程序的數(shù)據(jù)請(qǐng)求的？

1、將所有的接口放在統(tǒng)一的js文件中并導(dǎo)出。

2、在app.js中創(chuàng)建封裝請(qǐng)求數(shù)據(jù)的方法。

3、在子頁(yè)面中調(diào)用封裝的方法請(qǐng)求數(shù)據(jù)。

25、小程序與原生App哪個(gè)好？

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

26、webview中的頁(yè)面怎么跳回小程序中？

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

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

27、小程序關(guān)聯(lián)微信公眾號(hào)如何確定用戶(hù)的唯一性？

使用wx.getUserInfo方法withCredentials為 true時(shí) 可獲取encryptedData，里面有union_id。后端需要進(jìn)行對(duì)稱(chēng)解密。

28、小程序調(diào)用后臺(tái)接口遇到哪些問(wèn)題？

1.數(shù)據(jù)的大小有限制，超過(guò)范圍會(huì)直接導(dǎo)致整個(gè)小程序崩潰，除非重啟小程序；

2.小程序不可以直接渲染文章內(nèi)容頁(yè)這類(lèi)型的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í)間。

29、webview的頁(yè)面怎么跳轉(zhuǎn)到小程序?qū)Ш降捻?yè)面？

答：小程序?qū)Ш降捻?yè)面可以通過(guò)switchTab，但默認(rèn)情況是不會(huì)重新加載數(shù)據(jù)的。若需加載新數(shù)據(jù)，則在success屬性中加入以下代碼即可：

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

webview的頁(yè)面，則通過(guò)

 wx.miniProgram.switchTab({
         url: '/pages/index/index'
       })

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

優(yōu)勢(shì)：

      1、無(wú)需下載，通過(guò)搜索和掃一掃就可以打開(kāi)。

      2、良好的用戶(hù)體驗(yàn)：打開(kāi)速度快。

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

      4、安卓上可以添加到桌面，與原生App差不多。

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

劣勢(shì)：

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

     2、樣式單一。小程序的部分組件已經(jīng)是成型的了，樣式不可以修改。例如：幻燈片、導(dǎo)航。

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

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