前言
首先說一些為什么總結(jié)小程序相關(guān)的面試題吧
我們可以隨便打開一個招聘網(wǎng)站苞轿，在那里你會發(fā)現(xiàn)市場對于小程序的需求還是蠻高的罗晕，有些公司可能就只需要寫小程序的前端人員
雖然小程序的開發(fā)很大一部分都是很簡單的误褪，但是有些常用的東西還是有必要了解一下的悉患。故此亭螟，有了這樣一篇小程序面試題的總結(jié)挡鞍。當然感興趣或者有需要的小伙伴也可以 點擊這里，查看完整版前端面試題
如果文章中有出現(xiàn)紕漏预烙、錯誤之處墨微，還請看到的小伙伴留言指正，先行謝過
以下 ↓
1. 簡單描述下微信小程序的相關(guān)文件類型
微信小程序項目結(jié)構(gòu)主要有四個文件類型
-
WXML（WeiXin Markup Language）是框架設(shè)計的一套標簽語言扁掸，結(jié)合基礎(chǔ)組件翘县、事件系統(tǒng)最域，可以構(gòu)建出頁面的結(jié)構(gòu)。內(nèi)部主要是微信自己定義的一套組件 -
WXSS(WeiXin Style Sheets)是一套樣式語言锈麸，用于描述WXML的組件樣式 -
js邏輯處理镀脂，網(wǎng)絡(luò)請求 -
json小程序設(shè)置，如頁面注冊忘伞，頁面標題及tabBar
主要文件
-
app.json必須要有這個文件薄翅，如果沒有這個文件，項目無法運行氓奈，因為微信框架把這個作為配置文件入口翘魄，整個小程序的全局配置。包括頁面注冊舀奶，網(wǎng)絡(luò)設(shè)置暑竟，以及小程序的window背景色，配置導(dǎo)航條樣式育勺，配置默認標題 -
app.js必須要有這個文件但荤，沒有也是會報錯！但是這個文件創(chuàng)建一下就行 什么都不需要寫以后我們可以在這個文件中監(jiān)聽并處理小程序的生命周期函數(shù)怀大、聲明全局變量 -
app.wxss可選
2. 簡述微信小程序原理
微信小程序采用
JavaScript纱兑、WXML、WXSS三種技術(shù)進行開發(fā),本質(zhì)就是一個單頁面應(yīng)用化借，所有的頁面渲染和事件處理潜慎，都在一個頁面內(nèi)進行，但又可以通過微信客戶端調(diào)用原生的各種接口微信的架構(gòu)蓖康，是數(shù)據(jù)驅(qū)動的架構(gòu)模式铐炫，它的UI和數(shù)據(jù)是分離的，所有的頁面更新蒜焊，都需要通過對數(shù)據(jù)的更改來實現(xiàn)
小程序分為兩個部分webview和appService倒信。其中webview主要用來展現(xiàn)UI，appService有來處理業(yè)務(wù)邏輯泳梆、數(shù)據(jù)及接口調(diào)用鳖悠。它們在兩個進程中運行，通過系統(tǒng)層JSBridge實現(xiàn)通信优妙，實現(xiàn)UI的渲染乘综、事件的處理
3. 小程序的雙向綁定和vue哪里不一樣
小程序直接 this.data 的屬性是不可以同步到視圖的，必須調(diào)用：
this.setData({
// 這里設(shè)置
})
4. 小程序的wxss和css有哪些不一樣的地方
WXSS和CSS類似套硼，不過在CSS的基礎(chǔ)上做了一些補充和修改
- 尺寸單位
rpx
rpx 是響應(yīng)式像素,可以根據(jù)屏幕寬度進行自適應(yīng)卡辰。規(guī)定屏幕寬為 750rpx。如在 iPhone6 上，屏幕寬度為 375px九妈，共有 750 個物理像素反砌，則 750rpx = 375px = 750 物理像素
- 使用
@import標識符來導(dǎo)入外聯(lián)樣式。@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對路徑萌朱，用;表示語句結(jié)束
/** index.wxss **/
@import './base.wxss';
.container{
color: red;
}
5. 小程序頁面間有哪些傳遞數(shù)據(jù)的方法
- 使用全局變量實現(xiàn)數(shù)據(jù)傳遞
在 app.js 文件中定義全局變量 globalData宴树， 將需要存儲的信息存放在里面
// app.js
App({
// 全局變量
globalData: {
userInfo: null
}
})
使用的時候，直接使用 getApp() 拿到存儲的信息
- 使用
wx.navigateTo與wx.redirectTo的時候嚷兔，可以將部分數(shù)據(jù)放在url里面森渐，并在新頁面onLoad的時候初始化
//pageA.js
// Navigate
wx.navigateTo({
url: '../pageD/pageD?name=raymond&gender=male',
})
// Redirect
wx.redirectTo({
url: '../pageD/pageD?name=raymond&gender=male',
})
// pageB.js
...
Page({
onLoad: function(option){
console.log(option.name + 'is' + option.gender)
this.setData({
option: option
})
}
})
需要注意的問題：
wx.navigateTo 和 wx.redirectTo 不允許跳轉(zhuǎn)到 tab 所包含的頁面
onLoad 只執(zhí)行一次
- 使用本地緩存
Storage相關(guān)
6. 小程序的生命周期函數(shù)
-
onLoad頁面加載時觸發(fā)做入。一個頁面只會調(diào)用一次冒晰，可以在onLoad的參數(shù)中獲取打開當前頁面路徑中的參數(shù) -
onShow()頁面顯示/切入前臺時觸發(fā) -
onReady()頁面初次渲染完成時觸發(fā)。一個頁面只會調(diào)用一次竟块，代表頁面已經(jīng)準備妥當壶运，可以和視圖層進行交互 -
onHide()頁面隱藏/切入后臺時觸發(fā)。 如navigateTo或底部tab切換到其他頁面浪秘，小程序切入后臺等 -
onUnload()頁面卸載時觸發(fā)蒋情。如redirectTo或navigateBack到其他頁面時
7. 怎么封裝微信小程序的數(shù)據(jù)請求
參考 這里
8. 哪些方法可以用來提高微信小程序的應(yīng)用速度
1、提高頁面加載速度
2耸携、用戶行為預(yù)測
3棵癣、減少默認 data 的大小
4、組件化方案
9. 微信小程序的優(yōu)劣勢
優(yōu)勢
- 即用即走夺衍，不用安裝狈谊，省流量，省安裝時間沟沙，不占用桌面
- 依托微信流量河劝，天生推廣傳播優(yōu)勢
- 開發(fā)成本比
App低
缺點
- 用戶留存，即用即走是優(yōu)勢矛紫，也存在一些問題
- 入口相對傳統(tǒng)
App要深很多 - 限制較多,頁面大小不能超過2M赎瞎。不能打開超過10個層級的頁面
10. 怎么解決小程序的異步請求問題
小程序支持大部分
ES6語法
- 在返回成功的回調(diào)里面處理邏輯
-
Promise異步
11. 小程序關(guān)聯(lián)微信公眾號如何確定用戶的唯一性
如果開發(fā)者擁有多個移動應(yīng)用、網(wǎng)站應(yīng)用颊咬、和公眾帳號（包括小程序）务甥，可通過
unionid來區(qū)分用戶的唯一性，因為只要是同一個微信開放平臺帳號下的移動應(yīng)用喳篇、網(wǎng)站應(yīng)用和公眾帳號（包括小程序）敞临，用戶的unionid是唯一的。換句話說杭隙，同一用戶哟绊，對同一個微信開放平臺下的不同應(yīng)用，unionid是相同的
12. 如何實現(xiàn)下拉刷新
- 首先在全局
config中的window配置enablePullDownRefresh - 在
Page中定義onPullDownRefresh鉤子函數(shù),到達下拉刷新條件后，該鉤子函數(shù)執(zhí)行票髓，發(fā)起請求方法 - 請求返回后攀涵，調(diào)用
wx.stopPullDownRefresh停止下拉刷新
參考 這里
13. bindtap和catchtap的區(qū)別是什么
相同點：首先他們都是作為點擊事件函數(shù)，就是點擊時觸發(fā)洽沟。在這個作用上他們是一樣的以故，可以不做區(qū)分
不同點：他們的不同點主要是bindtap是不會阻止冒泡事件的，catchtap是阻值冒泡的
14. 簡述下 wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的區(qū)別</h5>
- wx.navigateTo()：保留當前頁面裆操，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面怒详。但是不能跳到
tabbar頁面 - wx.redirectTo()：關(guān)閉當前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面踪区。但是不允許跳轉(zhuǎn)到
tabbar頁面 - wx.switchTab()：跳轉(zhuǎn)到
abBar頁面昆烁，并關(guān)閉其他所有非tabBar頁面 - wx.navigateBack()關(guān)閉當前頁面，返回上一頁面或多級頁面缎岗【材幔可通過
getCurrentPages()獲取當前的頁面棧，決定需要返回幾層 - wx.reLaunch()：關(guān)閉所有頁面传泊，打開到應(yīng)用內(nèi)的某個頁面
后記
很多東西真正做一遍鼠渺，收獲一定是最大的，那些途中踩過的坑眷细、迸發(fā)的靈性火花都是我們成長路上寶貴的東西
