# 小程序常見面試題 ## 1、微信小程序有幾個文件 * `WXML（WeiXin Markup Language）`是框架設計的一套標簽語言，結合基礎組件、事件系統，可以構建出頁面的結構。內部主要是微信自己定義的一套組件 * `WXSS (WeiXin Style Sheets)`是一套樣式語言，用于描述 `WXML` 的組件樣式 * `js`邏輯處理，網絡請求 * `json`小程序設置，如頁面注冊，頁面標題及`tabBar` ## 2、微信小程序怎樣跟事件傳值 > 給 HTML 元素添加 `data-*`屬性來傳遞我們需要的值，然后通過 `e.currentTarget.dataset` 或 `onload`的 `param`參數獲取。但 `data -`名稱不能有大寫字母和不可以存放對象 ## 3、小程序的 wxss 和 css 有哪些不一樣的地方？ * `wxss`的圖片引入需使用外鏈地址 * `沒有 Body`；樣式可直接使用 `import` 導入 ## 4、小程序關聯微信公眾號如何確定用戶的唯一性 使用 `wx.getUserInfo`方法 `withCredentials` 為 `true` 時 可獲取 <`encryptedData`，里面有 `union_id`。后端需要進行對稱解密 ## 5、微信小程序與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`中聲明的變量。 ## 6、小程序的雙向綁定和vue哪里不一樣 小程序直接 `this.data`屬性是不可以同步到視圖的，必須調用： ~~~ this.setData({ // 這里設置 }) 復制代碼 ~~~ ## 7、簡述微信小程序原理 * 微信小程序采用 `JavaScript、WXML、WXSS` 三種技術進行開發,本質就是一個單頁面應用，所有的頁面渲染和事件處理，都在一個頁面內進行，但又可以通過微信客戶端調用原生的各種接口 * 微信的架構，是數據驅動的架構模式，它的 `UI` 和數據是分離的，所有的頁面更新，都需要通過對數據的更改來實現 * 小程序分為兩個部分 `webview`和 `appService` 。其中 `webview` 主要用來展現`UI ，appService` 有來處理業務邏輯、數據及接口調用。它們在兩個進程中運行，通過系統層 `JSBridge` 實現通信，實現 UI 的渲染、事件的處理 ## 8、小程序的生命周期函數 * `onLoad` 頁面加載時觸發。一個頁面只會調用一次，可以在`onLoad` 的參數中獲取打開當前頁面路徑中的參數 * `onShow()` 頁面顯示/切入前臺時觸發 * `onReady()` 頁面初次渲染完成時觸發。一個頁面只會調用一次，代表頁面已經準備妥當，可以和視圖層進行交互 * `onHide()` 頁面隱藏/切入后臺時觸發。 如 `navigateTo` 或底部 `tab` 切換到其他頁面，小程序切入后臺等 * `onUnload()` 頁面卸載時觸發。如 `redirectTo 或 navigateBack` 到其他頁面時 ## 9、哪些方法可以用來提高微信小程序的應用速度 1、提高頁面加載速度 2、用戶行為預測 3、減少默認 `data` 的大小 4、組件化方案 ## 10、微信小程序的優劣勢 `優勢` 即用即走，不用安裝，省流量，省安裝時間，不占用桌面 依托微信流量，天生推廣傳播優勢 開發成本比 `App` 低 `缺點` 用戶留存，即用即走是優勢，也存在一些問題 入口相對傳統 `App` 要深很多 限制較多,頁面大小不能超過2M。不能打開超過10個層級的頁面 ## 11、怎么解決小程序的異步請求問題 * 小程序支持大部分 `ES6` 語法 * 在返回成功的回調里面處理邏輯`Promise`異步 ## 12、如何實現下拉刷新 首先在全局 `config` 中的 `window`配置 `enablePullDownRefresh` ，在 `Page` 中定義`onPullDownRefresh` 鉤子函數,到達下拉刷新條件后，該鉤子函數執行，發起請求方法 請求返回后，調用`wx.stopPullDownRefresh`停止下拉刷新 ## 13、bindtap和catchtap的區別是什么 相同點：首先他們都是作為點擊事件函數，就是點擊時觸發。在這個作用上他們是一樣的，可以不做區分 不同點：他們的不同點主要是`bindtap`是不會阻止冒泡事件的，`catchtap`是阻值冒泡的 ## 14、小程序頁面間有哪些傳遞數據的方法 1、使用全局變量實現數據傳遞。在 `app.js` 文件中定義全局變量 `globalData`， 將需要存儲的信息存放在里面 2、使用 `wx.navigateTo`與 `wx.redirectTo` 的時候，可以將部分數據放在 `url` 里面，并在新頁面`onLoad`的時候初始化 3、使用本地緩存`Storage` 相關 ## 15、小程序wxml與標準的html的異同？ `相同：` * 都是用來描述頁面的結構； * 都由標簽、屬性等構成； `不同：` * 標簽名字不一樣，且小程序標簽更少，單一標簽更多； * 多了一些`wx:if` 這樣的屬性以及 `{{ }}`這樣的表達式 * WXML僅能在微信小程序開發者工具中預覽，而`HTML`可以在瀏覽器內預覽； * 組件封裝不同， `WXML`對組件進行了重新封裝， * 小程序運行在`JS Core`內，沒有`DOM樹`和`window`對象，小程序中無法使用`window`對象和`document`對象。 ## 16、小程序簡單介紹下三種事件對象的屬性列表？ 基礎事件（BaseEvent） * `type:`事件類型 * `timeStamp：`事件生成時的時間戳 * `target：`觸發事件的組件的屬性值集合 * `currentTarget：`當前組件的一些屬性集合 自定義事件（CustomEvent） * `detail` 觸摸事件（TouchEvent） * `touches` * `changedTouches` ## 17、小程序對wx:if 和 hidden使用的理解？ * `wx:if`有更高的切換消耗。 * `hidden` 有更高的初始渲染消耗。 * 因此，如果需要頻繁切換的情景下，用 `hidden` 更好，如果在運行時條件不大可能改變則`wx:if` 較好。 ## 18、微信小程序與H5的區別？ * 運行環境的不同 傳統的`HTML5`的運行環境是瀏覽器，包括`webview`，而微信小程序的運行環境并非完整的瀏覽器，是微信開發團隊基于瀏覽器內核完全重構的一個內置解析器，針對小程序專門做了優化，配合自己定義的開發語言標準，提升了小程序的性能。 * 開發成本的不同 只在微信中運行，所以不用再去顧慮瀏覽器兼容性，不用擔心生產環境中出現不可預料的奇妙`BUG` * 獲取系統級權限的不同 ## 19、app.json 是對當前小程序的全局配置，講述三個配置各個項的含義？ * ```pages字段`` —— 用于描述當前小程序所有頁面路徑，這是為了讓微信客戶端知道當前你的小程序頁面定義在哪個目錄。 * `window字段` —— 小程序所有頁面的頂部背景顏色，文字顏色定義在這里的 * `tab字段`—小程序全局頂部或底部`tab` ## 20、小程序onPageScroll方法的使用注意什么？ 由于此方法調用頻繁，不需要時，可以去掉，不要保留空方法，并且使用`onPageScroll`時，盡量避免使用`setData()`，盡量減少`setData()`的使用頻次。 ## 21、小程序視圖渲染結束回調？ 使用`setData(data, callback)`，在`callback`回調方法中添加后續操作代碼 ## 22、小程序同步API和異步API使用時注意事項？ `wx.setStorageSync`是以Sync結尾的API為同步API，使用時使用`try-catch`來查看異常，如果判定API為異步，可以在其回調方法`success、fail、complete`中進行下一步操作。 ## 23、簡述下 `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()：`關閉所有頁面，打開到應用內的某個頁面 ## 24、如何封裝微信小程序的數據請求的？ 1、將所有的接口放在統一的js文件中并導出。 2、在`app.js`中創建封裝請求數據的方法。 3、在子頁面中調用封裝的方法請求數據。 ## 25、小程序與原生App哪個好？ 小程序除了擁有公眾號的低開發成本、低獲客成本低以及無需下載等優勢，在服務請求延時與用戶使用體驗是都得到了較大幅度 的提升，使得其能夠承載跟復雜的服務功能以及使用戶獲得更好的用戶體驗。 ## 26、`webview`中的頁面怎么跳回小程序中？ 首先要引入最新版的`jweixin-x.x.x.js`，然后 ~~~ wx.miniProgram.navigateTo({ url: '/pages/login/login'+'$params' }) ~~~ ## 27、小程序關聯微信公眾號如何確定用戶的唯一性？ 使用`wx.getUserInfo`方法`withCredentials`為 `true`時 可獲取`encryptedData`，里面有`union_id`。后端需要進行對稱解密。 ## 28、小程序調用后臺接口遇到哪些問題？ 1.數據的大小有限制，超過范圍會直接導致整個小程序崩潰，除非重啟小程序； 2.小程序不可以直接渲染文章內容頁這類型的`html`文本內容，若需顯示要借住插件，但插件渲染會導致頁面加載變慢，所以最好在后臺對文章內容的`html`進行過濾，后臺直接處理批量替換`p`標簽`div`標簽為`view`標簽，然后其它的標簽讓插件來做，減輕前端的時間。 ## 29、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、微信小程序的優劣勢？ `優勢：` ~~~ 1、無需下載，通過搜索和掃一掃就可以打開。 2、良好的用戶體驗：打開速度快。 3、開發成本要比App要低。 4、安卓上可以添加到桌面，與原生App差不多。 5、為用戶提供良好的安全保障。小程序的發布，微信擁有一套嚴格的審查流程，不能通過審查的小程序是無法發布到線上的。 ~~~ `劣勢：` ~~~ 1、限制較多。頁面大小不能超過1M。不能打開超過5個層級的頁面。 2、樣式單一。小程序的部分組件已經是成型的了，樣式不可以修改。例如：幻燈片、導航。 3、推廣面窄，不能分享朋友圈，只能通過分享給朋友，附近小程序推廣。其中附近小程序也受到微信的限制。 4、依托于微信，無法開發后臺管理功能。 ~~~