微信小程序

1.簡單描述下微信小程序的相關(guān)文件類型？

wxml 模板文件，是框架設(shè)計(jì)的一套標(biāo)簽語言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)、可以構(gòu)建出頁面的結(jié)構(gòu)

wxss 樣式文件，是一套樣式語言，用于描述WXML的組件樣式

js 腳本邏輯文件，邏輯處理網(wǎng)絡(luò)請求

json 配置文件，小程序設(shè)置，如頁面注冊，頁面標(biāo)題及tabBar

app.json 整個(gè)小程序的全局配置，包括：

pages:[所有頁面路徑]

網(wǎng)絡(luò)設(shè)置（網(wǎng)絡(luò)超時(shí)時(shí)間）

界面表現(xiàn)（頁面注冊）

window:{背景色、導(dǎo)航樣式、默認(rèn)標(biāo)題}

底部tab等

app.js 監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量

app.wxss 全局配置的樣式文件

2.請談?wù)剋xml與標(biāo)準(zhǔn)的html的異同？

都是用來描述頁面的結(jié)構(gòu)；

都由標(biāo)簽、屬性等構(gòu)成；

標(biāo)簽名字不一樣，且小程序標(biāo)簽更少，單一標(biāo)簽更多；

多了一些 wx:if 這樣的屬性以及 {{ }} 這樣的表達(dá)式

WXML僅能在微信小程序開發(fā)者工具中預(yù)覽，而HTML可以在瀏覽器內(nèi)預(yù)覽

組件封裝不同， WXML對組件進(jìn)行了重新封裝，

小程序運(yùn)行在JS Core內(nèi)，沒有DOM樹和window對象，小程序中無法使用window對象和document對象。

3.請談?wù)勑〕绦虻碾p向綁定和vue的異同？

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

1.雙向綁定：vue默認(rèn)支持雙向綁定，微信小程序需要借助data。

2.取值：vue中，通過this.reason取值。小程序中，通過this.data.reason取值。

3.定義方法：小程序使用 在app.js中定義即可，vue的方法通過寫在method中進(jìn)行定義。

1. 去變量的時(shí)候：

???- 小程序 ?wx:for = "lists"

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

2. 調(diào)用data模型（賦值）的時(shí)候：

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

???- vue: this.item //調(diào)用 ?this.item =1 //賦值

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

4.請談?wù)勑〕绦虻纳芷诤瘮?shù)？

onLoad() 頁面加載時(shí)觸發(fā)，只會調(diào)用一次，可獲取當(dāng)前頁面路徑中的參數(shù)。

onShow() 頁面顯示/切入前臺時(shí)觸發(fā)，一般用來發(fā)送數(shù)據(jù)請求；

onReady() 頁面初次渲染完成時(shí)觸發(fā), 只會調(diào)用一次，代表頁面已可和視圖層進(jìn)行交互。

onHide() 頁面隱藏/切入后臺時(shí)觸發(fā), 如底部 tab 切換到其他頁面或小程序切入后臺等。

onUnload() 頁面卸載時(shí)觸發(fā)，如redirectTo或navigateBack到其他頁面時(shí)。

onPullDownRefresh() 下拉刷新的鉤子函數(shù) 用戶下拉刷新時(shí)會自動(dòng)走到這個(gè)函數(shù)中

onReachBottom() 上翻到底的鉤子函數(shù)

5.簡述微信小程序原理？

小程序本質(zhì)就是一個(gè)單頁面應(yīng)用，所有的頁面渲染和事件處理，都在一個(gè)頁面內(nèi)進(jìn)行，但又可以通過微信客戶端調(diào)用原生的各種接口；

它的架構(gòu)，是數(shù)據(jù)驅(qū)動(dòng)的架構(gòu)模式，它的UI和數(shù)據(jù)是分離的，所有的頁面更新，都需要通過對數(shù)據(jù)的更改來實(shí)現(xiàn)；

它從技術(shù)講和現(xiàn)有的前端開發(fā)差不多，采用JavaScript、WXML、WXSS三種技術(shù)進(jìn)行開發(fā)；

功能可分為webview和appService兩個(gè)部分；

webview用來展現(xiàn)UI，appService有來處理業(yè)務(wù)邏輯、數(shù)據(jù)及接口調(diào)用；

兩個(gè)部分在兩個(gè)進(jìn)程中運(yùn)行，通過系統(tǒng)層JSBridge實(shí)現(xiàn)通信，實(shí)現(xiàn)UI的渲染、事件的處理等。

或

微信小程序采用JavaScript、wxml、wxss三種技術(shù)進(jìn)行開發(fā)，與現(xiàn)有前端開發(fā)的區(qū)別：

JavaScript的代碼是運(yùn)行在微信APP中的，因此一些h5技術(shù)的應(yīng)用需要微信APP提供對應(yīng)的API支持；

wxml微信自己基于xml語法開發(fā)的，因此在開發(fā)時(shí)只能使用微信提供的現(xiàn)有標(biāo)簽，html的標(biāo)簽是無法使用的；

wxss具有css的大部分特性，但并不是所有都支持沒有詳細(xì)文檔（wxss的圖片引入需使用外鏈地址，沒有body，樣式可直接使用import導(dǎo)入）。

微信的架構(gòu)，是數(shù)據(jù)驅(qū)動(dòng)的架構(gòu)模式，它的UI和數(shù)據(jù)是分離的，所有的頁面更新，都需要通過對數(shù)據(jù)的更改來實(shí)現(xiàn)。

小程序功能分為webview和APPservice，webview主要用來展示UI，appservice用來處理業(yè)務(wù)邏輯、數(shù)據(jù)及接口調(diào)用。它們在兩個(gè)進(jìn)程中進(jìn)行，通過系統(tǒng)層JSBridge實(shí)現(xiàn)通信，實(shí)現(xiàn)UI的渲染、事件處理。

6.分析微信小程序的優(yōu)劣勢？

優(yōu)勢：

容易上手，基礎(chǔ)組件庫比較全，基本上不需要考慮兼容問題；

開發(fā)文檔比較完善，開發(fā)社區(qū)比較活躍，支持插件式開發(fā)；

良好的用戶體驗(yàn)：無需下載，通過搜索和掃一掃就可以打開，打開速度快，安卓上可以添加到桌面，與原生APP差不多；

開發(fā)成本比APP要低；

為用戶提供良好的安全保障（小程序發(fā)布 嚴(yán)格的審查流程）

劣勢：

限制較多，單個(gè)包文件大小不能超過2M，不能打開超過10個(gè)層級的頁面；

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

推廣面窄，不能分享朋友圈，只能通過分享給朋友，附近小程序推廣

依托于微信，無法開發(fā)后臺管理功能

后臺調(diào)試麻煩，因?yàn)閍pi接口必須https請求且公網(wǎng)地址

真機(jī)測試，個(gè)別功能安卓和蘋果表現(xiàn)迥異，例如安卓的定位功能加載很慢

7.簡述小程序原理

小程序分為兩個(gè)部分webview和appService，webview用來展現(xiàn)UI，appService用來處理業(yè)務(wù)邏輯、數(shù)據(jù)及接口調(diào)用，它們在兩個(gè)進(jìn)程中運(yùn)行，通過系統(tǒng)層JSBridge實(shí)現(xiàn)通信，完成UI渲染、事件處理。

8.如何實(shí)現(xiàn)下拉刷新

先在app.json或page.json中配置enablePullDownRefresh:true

page里用onPullDownRefresh函數(shù)，在下拉刷新時(shí)執(zhí)行

在下拉函數(shù)執(zhí)行時(shí)發(fā)起數(shù)據(jù)請求，請求返回后，調(diào)用wx.stopPullDownRefresh停止下拉刷新的狀態(tài)

9.bindtap和catchtap的區(qū)別是什么

bindtap不會阻止冒泡事件，catchtap阻止冒泡

10.小程序關(guān)聯(lián)微信公眾號如何確定用戶的唯一性？

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

內(nèi)容有些多，大家可以先點(diǎn)贊收藏，但一定要去看。當(dāng)你把大廠面試題知識點(diǎn)都看完并且理解了，以后就沒有你過不了的前端面試。資源都幫你整理好了，還不學(xué)就有些說不過去了。

更多學(xué)習(xí)資料以及面試題庫，需要的伙伴點(diǎn)擊下方可以無償獲?。?！

微信小程序開發(fā)最新教程

2022年前端全套教程