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

?2. 簡述微信小程序原理

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

?4. 小程序的wxss和css有哪些不一樣的地方

?5. 小程序頁面間有哪些傳遞數(shù)據(jù)的方法

?6. 小程序的生命周期函數(shù)

?7. 怎么封裝微信小程序的數(shù)據(jù)請(qǐng)求

?8. 哪些方法可以用來提高微信小程序的應(yīng)用速度

?9. 微信小程序的優(yōu)劣勢(shì)

?10. 怎么解決小程序的異步請(qǐng)求問題

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

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

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

?14. 簡述下wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的區(qū)別

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

微信小程序項(xiàng)目結(jié)構(gòu)主要有四個(gè)文件類型

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

主要文件

• app.json 必須要有這個(gè)文件，如果沒有這個(gè)文件，項(xiàng)目無法運(yùn)行，因?yàn)槲⑿趴蚣馨堰@個(gè)作為配置文件入口，整個(gè)小程序的全局配置。包括頁面注冊(cè)，網(wǎng)絡(luò)設(shè)置，以及小程序的 window 背景色，配置導(dǎo)航條樣式，配置默認(rèn)標(biāo)題
• app.js 必須要有這個(gè)文件，沒有也是會(huì)報(bào)錯(cuò)！但是這個(gè)文件創(chuàng)建一下就行 什么都不需要寫以后我們可以在這個(gè)文件中監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量
• app.wxss 可選

2. 簡述微信小程序原理

微信小程序采用 JavaScript、WXML、WXSS 三種技術(shù)進(jìn)行開發(fā),本質(zhì)就是一個(gè)單頁面應(yīng)用，所有的頁面渲染和事件處理，都在一個(gè)頁面內(nèi)進(jìn)行，但又可以通過微信客戶端調(diào)用原生的各種接口

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

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

3. 小程序的雙向綁定和vue哪里不一樣

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

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

4. 小程序的wxss和css有哪些不一樣的地方

WXSS 和 CSS 類似，不過在 CSS 的基礎(chǔ)上做了一些補(bǔ)充和修改

• 尺寸單位 rpx

rpx 是響應(yīng)式像素,可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為 750rpx。如在 iPhone6 上，屏幕寬度為 375px，共有 750 個(gè)物理像素，則 750rpx = 375px = 750 物理像素

• 使用 @import 標(biāo)識(shí)符來導(dǎo)入外聯(lián)樣式。@import 后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑，用;表示語句結(jié)束

/** index.wxss **/ @import './base.wxss'; .container{ color: red; }

5. 小程序頁面間有哪些傳遞數(shù)據(jù)的方法

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

// app.js App({ // 全局變量 globalData: { userInfo: null } })

使用的時(shí)候，直接使用 getApp() 拿到存儲(chǔ)的信息

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

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

詳見 生命周期回調(diào)函數(shù)

7. 怎么封裝微信小程序的數(shù)據(jù)請(qǐng)求

參考 這里

8. 哪些方法可以用來提高微信小程序的應(yīng)用速度

1、提高頁面加載速度

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

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

4、組件化方案

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

優(yōu)勢(shì)

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

• 容易上手，只要之前有HTML+CSS+JS基礎(chǔ)知識(shí)，寫小程序基本上沒有大問題；當(dāng)然如果了解ES6+CSS3則完全可以編寫出即精簡又動(dòng)感的小程序
• 基本上不需要考慮兼容性問題，只要微信可以正常運(yùn)行的機(jī)器，就可以運(yùn)行小程序；
• 基本組件庫已經(jīng)比較齊全：Toast,Loading框,Picker,定位及地圖,Image,Input,Checkbox,Text,TextArea,ScrollView等常用的組件都有，而且使用也挺簡單、方便；
• 發(fā)布、審核高效，基本上上午發(fā)布審核，下午就審核通過，升級(jí)簡單，而且支持灰度發(fā)布；
• 微信官方提供使用人數(shù)、頻率等數(shù)據(jù)統(tǒng)計(jì)，小程序js腳本執(zhí)行錯(cuò)誤日志；
• 開發(fā)文檔比較完善，開發(fā)社區(qū)比較活躍；
• 最近剛開放的牛x功能，新增webview組件，可以展示網(wǎng)頁啦，這個(gè)比較爽；
• 支持插件式開發(fā)，一些基本功能可以開發(fā)成插件，供多個(gè)小程序調(diào)用；

缺點(diǎn)

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

10. 怎么解決小程序的異步請(qǐng)求問題

小程序支持大部分 ES6 語法

• 在返回成功的回調(diào)里面處理邏輯
• Promise 異步

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

如果開發(fā)者擁有多個(gè)移動(dòng)應(yīng)用、網(wǎng)站應(yīng)用、和公眾帳號(hào)（包括小程序），可通過 unionid 來區(qū)分用戶的唯一性，因?yàn)橹灰峭粋€(gè)微信開放平臺(tái)帳號(hào)下的移動(dòng)應(yīng)用、網(wǎng)站應(yīng)用和公眾帳號(hào)（包括小程序），用戶的 unionid 是唯一的。換句話說，同一用戶，對(duì)同一個(gè)微信開放平臺(tái)下的不同應(yīng)用，unionid 是相同的

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. 簡述下 `wx.navigateTo()`, `wx.redirectTo()`, `wx.switchTab()`, `wx.navigateBack()`, `wx.reLaunch()`的區(qū)別

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

總結(jié)

以上是生活随笔為你收集整理的前端面试题 微信小程序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。