最新微信小程序面試題集結

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

第一條是運行環境的不同

傳統的HTML5的運行環境是瀏覽器，包括webview，而微信小程序的運行環境并非完整的瀏覽器，是微信開發團隊基于瀏覽器內核完全重構的一個內置解析器，針對小程序專門做了優化，配合自己定義的開發語言標準，提升了小程序的性能。

第二條是開發成本的不同

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

第三條是獲取系統級權限的不同

系統級權限都可以和微信小程序無縫銜接

第四條便是應用在生產環境的運行流暢度

長久以來，當HTML5應用面對復雜的業務邏輯或者豐富的頁面交互時，它的體驗總是不盡人意，需要不斷的對項目優化來提升用戶體驗。但是由于微信小程序運行環境獨立

2、請談談小程序的雙向綁定和vue的異同?

大體相同，但小程序直接this.data的屬性是不可以同步到視圖的，必須調用this.setData()方法!

1.雙向綁定:vue默認支持雙向綁定，微信小程序需要借助data。

2.取值:vue 中，通過this.msg取值。小程序中，通過this.data.msg取值。

3.定義方法:小程序使用在app.js 中定義即可，vue的方法通過寫在method中進行定義。

遍歷的時候:

-小程序wx: for = "{{lists}}"

- Vue是v- for = "item in lists"

調用data模型(賦值)的時候:

-小程序:this.data.item //調用this.setData({item:1})//賦值

- vue: this.item//調用this.item =1//賦值

小程序的雙向綁定實際上并不是雙向綁定如果在小程序js文件中改變了某個變量的值那么頁面上的值并不會跟著改變如果想要頁面上的值也跟著改變的話需要通過setData來操作而vue默認就是雙向綁定只改變了某個變量的值頁面上也會跟著改變

3、簡述五個路由的區別？

wx.navigateTo(）保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到tabbar頁面
wx.redirectTo() 關閉當前頁面，跳轉到應用內的某個頁面。但是不允許跳轉到tabbar頁面
wx.switchTab() 跳轉到tabBar頁面，并關閉其他所有非tabBar頁面
wx.navigateBack(）關閉當前頁面，返回上一頁面或多級頁面。可通過getCurrentPages()獲取當前的頁面棧，決定需要返回幾層
wx.reLaunch(）關閉所有頁面，打開到應用內的某個頁面

4、bindtap和catchtap的區別?

bind事件綁定不會阻止冒泡事件向上冒泡
catch事件綁定可以阻止冒泡事件向上冒泡

5、小程序如何實現下拉刷新?

用view代替scroll-view ,設置onPullDownRefresh函數實現。

1、在json文件中配置enablePullDownRefresh為true( app.json中在window中設置enablePullDownRefresh ,此效果作用于全局)。

2、在js文件中實現onPullDownRefresh方法,在網絡請求完成后調用wx.stopPul1DownRefresh()來結束下拉刷新。

6、小程序的生命周期函數

1. onLoad頁面加載時觸發。一個頁面只會調用一次，可以在onLoad 的參數中獲取打開當前頁面路徑中的參數

2. onShow()頁面顯示/切入前臺時觸發

3. onReady()頁面初次渲染完成時觸發。一個頁面只會調用一次，代表頁面已經準備妥當，可以和視圖層進行交互

4. onHide()頁面隱藏/切入后臺時觸發。如navigateTo或底部|tab切換到其他頁面，小程序切入后臺等

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

7、小程序對wx:if和hidden使用的理解?

1. wx :if有更高的切換消耗。

2. hidden有更高的初始渲染消耗。

3.因此，如果需要頻繁切換的情景下，用hidden更好，如果在運行時條件不大可能改變則wx:if較好。

8、你是怎么封裝微信小程序的數據請求的?

1、創建一個js 文件文件中聲明一個baseUr1(接口地址的公共部分)

2、創建一個api 函數里面可以接收接地址，請求方式，請求參數然后使用

wx.request友起請求并把結果使用promise返回

3、我們通常會在wx.request的請求中配置header和響應攔截，整個小程序的全局配置。包括頁面注冊，網絡設置，以及小程序的window背景色，配置導航條樣式，配置默認標題。

app.js必須要有這個文件，沒有也是會報錯!但是這個文件創建一下就行什么都不需要寫以后我們可以在這個文件中監聽并處理小程序的生命周期函數、聲明全局變量。

9、小程序兼容問題(開發中遇到的問題)

1、input、textear層及比較高

要使用cover-view，不能漸變背景，可以使用漸變背景圖web-view自動鋪滿整個小程序頁面

2、text-indent 對input標簽和text標簽失效input可以用placeholder-class 實現

text可以直接打空格

3，左右邊框不生效

當邊框的寬度設置為奇數的時候，可能會不生效

解決方法:將寬度設置為偶數的時候，在ios下就可以解決

4，還有盡量不要用margin-bottom，當元素是在整個頁面的最底部的時候，在ios下可能margin-bottom 會失效，所以建議，都使用padding-bottom 。

10、小程序與原生App哪個好?

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

小程序也屬于App的一種，那么它和我們現在流行的原生App (Ios、Android)相比，有什么區別和優勢呢?

一、區別與優勢

首先，從技術上來講，目前App的主流開發方式有三種:web App 、Native App和Hybrid App。比如:

. Wweb App

在微信”發現“s里面有一個”購物“入口，點進去打開的是京東的移動購物頁面，這個頁面實際上就是一個Web App。支付寶的眾多小服務也是web App，這類App其實就是我們經常在PC上瀏覽的網頁，只不過加入了響應式的設計讓它適合在移動端顯示和運行，所采用的技術依然是Javascript 、css 和HTML。相對于其他兩種APP，Web App具有開發簡單、高效，更新靈活、跨平臺、大量的網頁應用稍作調整即可放在移動端運行。但缺點與優點并存，Web App性能、體驗極差，無法使用照相機、系統通知、本地緩存等原生特性

- Native App

Native App也稱原生App 。這種App不是采用avaScript 、CSS及HTML開發，而是使用Objective-C (IoS)或者Java (Android)開發。微信、支付寶等都屬于這類App，是目前主流的開發方式。Native App具有性能、體驗非常良好，組件支持完善、接口豐富等特點。但Native App最大的缺點在于，不能跨平臺，有多少個平臺就要開發多少版本，現在主要有IOS和Android兩個主流平臺，還好Windows Phone已沒了蹤影。

·Hybrid App

Hybrid App也稱為混合式App 。Hybrid App 看上去像一個Native App，但實質上Native技術在這里只是作為一個容器，將 web App包裹了起來，在容器內部實質運行的還是網頁。Hybrid App更像是Web App 與Native App的混合體。與純粹的web App相比，Hybrid App會有一部分訪問原生組件(相機、加速器）的能力。事實上，目前主流的應用中，純粹的原生的App很少，絕大多數都屬于混合式App。比如，常見的京東、淘寶等電商類App，由于商品及業務變化非常頻繁，需要經常調整，所以這類App 的主要頁面都是采用Web技術來構建，只是用Native包裝了一下。Hybrid App具有接近于Native App的體驗、開發效率高、跨平臺等特性。

那我們如何界定，哪些App屬于“原生”，哪些App屬于

“混合”呢?這個要看Web頁面在App中所占的比例，如果絕大多數頁面都采用Web技術構建，那么我們稱為混合式App ;

而如果只有少數頁面采用Web技術，我們稱為原生應用。

那么小程序屬于以上三種的那一種?嚴格意義上來說，它不屬于以上三種中的任何一種，在實現的技術上小程序同傳統的Hybrid還是有很大的不同的。小程序采用avascript和

css這類常見的Web技術開發，但它又不使用HTML，E同Web沒有直接的聯系。小程序實際上是將一系列自己定義的組

件編譯成了對應平臺(Ios、Android、PC)的相應可運行組件，以提高運行性能。如果一定要將小程序歸并到以上三類A

pp中，可能Hybrid App更合適:非原生，但使用到了Web技術(JavaScript和CSS)。

相比于Native App，小程序具有Hybrid App的一些優勢:

·跨平臺(對于iOS和Android兩個平臺只需要開發一套程序)

·具備接近于Native App 的體驗·對原生組件有訪問能力

·具備緩存能力

·上手容易，開發邏輯較為簡單

同時，小程序還具有一些它獨有的特點:

·小程序在設計時就做了很多約定式的規

·開發環境很干凈，無需安裝任何除開發工具外的其他的軟件·發布和部署流程非常簡單，幾乎是“傻瓜式”，點擊下就可以將應用發布到騰訊云

·小程序具有微信天然的關系鏈與獲客能力(這也是小程序最大的優勢)

但是，時間沒有完美的事物，計算機世界里也沒有完美的技術，你以為的優勢在另一方面卻成了缺點:

·小程序為了簡化復雜性，做了一些UI上的設計規范，確實方便了很多對U要求不高的應用。但也限制了那些對UI要求極高的產品發揮

·不支持現有的HTML DOM結構，而是自己給出了一系列的組件，造就了一個封閉的開發環境

。小程序只實現了模塊化，并沒有實現自定義組件，這是最令人不滿意的地方

二、小程序會淘汰原生APP么

不會。連Hybrid App都無法撼動(Native App的地位，又何況小程序本身只是 Hybrid App的一個子集，運行在微信這個[Native App 之下呢?除了Hybrid App本身與Native技術的差距，微信對小程序還附加了諸多限制和自身定位也非常明確——做低頻和業務邏輯不復雜的應用。

11、移動App的拍照功能怎么實現

利用移動端對于文件上傳時支持拍照上傳在html中利用input標簽設置類型為file

移動端點擊該input標簽可進行選擇(相冊選擇圖片、拍照等功能，該功能為提供掃碼的app或系統定制)

可根據獲取上傳過后input輸入框的files屬性拿到拍照記錄的照片信息數組

12、請你講述一下微信小程序原理?

1、微信小程序采用JavaScript、WXML、WXSS三種技術進行開發，從技術講和現有的前端開發差不多，但深入挖掘的話卻又有所不同

2、JavaScript:首先JavaScript的代碼是運行在微信App中的，并不是運行在瀏覽器中，因此一些H5s技術的應用，需要微信App提供對應的APr支持，而這限制住了H5技術的應用，且其不能稱為嚴格的H5，可以稱其為偽H5，同理，微信提供的獨有的某些API，H5也不支持或支持的不是特別好

3、WXML: WXML微信自己基于XML語法開發的，因此開發時，只能使用微信提供的現有標簽，HTML的標簽是無法使用的

4、WxSS: WxSS具有css的大部分特性，但并不是所有的都支持，而且支持哪些，不支持那些并沒有詳細的文檔5、微信的架構，是數據驅動的架構模式，它的UI和數據是分離的，所有的頁面更新，都需要通過對數據的更改來實現6、小程序分為兩個部分webview和appService。其中webview主要用來展現UI,appService有來處理業務邏輯、數據及接口調用。它們在兩個進程中運行，通過系統層JSBridge實現通信，實現UI的渲染、事件的處理

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

小程序直接this.data的屬性是不可以同步到視圖的，必須調用:

小程序:

Page({data: {items: []},onLoad: function(options) {this.setData({items : [1，2，3]})}
})

VUE

new vue({data: {items: []},mounted() {this.items = [1，2，3]}
})

14、小程序調用后臺接口遇到哪些問題?

1、數據的大小有限制，超過范圍會直接導致整個小程序崩潰，除非重啟小程序;

2、小程序不可以直接渲染文章內容頁這類型的html文本內容，若需顯示要借住插件，但插件渲染會導致頁面加載變慢，

所以最好在后臺對文章內容的html進行過濾，后臺直接處理批量替換p標簽div標簽為view標簽，然后其它的標簽讓插件來做，減輕前端的時間。

15、網頁瀏覽頁面如何跳轉到小程序導航頁面?

答案:小程序導航的頁面可以通過switchTab，但默認不會重新加載到數據的。加載新數據，可以加入以下代碼:

//成功:函數(e){
var page = getCurrentPages().pop();//如果(頁面--未定義||頁面-= null)返回;page.onLoad();
}
//網頁瀏覽，通過
wx.miniProgram.switchTab ({網址: '/pages/index/index'
})

16、請談談原生開發小程序、wepy.mpvue的對比?

個人認為，如果是新項目，且沒有l舊的h5項目遷移，則考慮用小程序原生開發，好處是相比于第三方框架，坑少。
而如果有老的h5項目是vue開發或者也有h5項目也需要小程序開發，則比較適合wepy 或者mpvue來做遷移或者開發，近期看wepy 幾乎不更新了，所以推薦美團的mpvue )o
而如果如果團隊前端強大，自己做一套框架也沒問題。

17、請談談wxml與標準的html的異同?

都是用來描述頁面的結構;都由標簽、屬性等構成;
標簽名字不一樣，且小程序標簽更少，單一標簽更多;·多了一些wx:if 這樣的屬性以及{}這樣的表達式wXML僅能在微信小程序開發者工具中預覽，而HTML 可以在瀏覽器內預覽
組件封裝不同，wXML對組件進行了重新封裝，
小程序運行在s Core內，沒有DoM樹和window對象，小程序中無法使用window對象和document對象。