當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端面试题微信小程序

發布時間：2023/12/31 HTML 28 豆豆

生活随笔收集整理的這篇文章主要介紹了前端面试题微信小程序小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

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

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

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

?5. 小程序頁面間有哪些傳遞數據的方法

?6. 小程序的生命周期函數

?7. 怎么封裝微信小程序的數據請求

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

?9. 微信小程序的優劣勢

?10. 怎么解決小程序的異步請求問題

?11. 小程序關聯微信公眾號如何確定用戶的唯一性

?12. 如何實現下拉刷新

?13. bindtap和catchtap的區別是什么

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

1. 簡單描述下微信小程序的相關文件類型

微信小程序項目結構主要有四個文件類型

WXML: WeiXin Markup Language是框架設計的一套標簽語言，結合基礎組件、事件系統，可以構建出頁面的結構。內部主要是微信自己定義的一套組件
WXSS: WeiXin Style Sheets 是一套樣式語言，用于描述 WXML 的組件樣式
js: 邏輯處理，網絡請求
json: 小程序設置，如頁面注冊，頁面標題及tabBar

主要文件

app.json 必須要有這個文件，如果沒有這個文件，項目無法運行，因為微信框架把這個作為配置文件入口，整個小程序的全局配置。包括頁面注冊，網絡設置，以及小程序的 window 背景色，配置導航條樣式，配置默認標題
app.js 必須要有這個文件，沒有也是會報錯！但是這個文件創建一下就行什么都不需要寫以后我們可以在這個文件中監聽并處理小程序的生命周期函數、聲明全局變量
app.wxss 可選

2. 簡述微信小程序原理

微信小程序采用 JavaScript、WXML、WXSS 三種技術進行開發,本質就是一個單頁面應用，所有的頁面渲染和事件處理，都在一個頁面內進行，但又可以通過微信客戶端調用原生的各種接口

微信的架構，是數據驅動的架構模式，它的 UI 和數據是分離的，所有的頁面更新，都需要通過對數據的更改來實現

小程序分為兩個部分 webview 和 appService 。其中 webview 主要用來展現 UI ，appService 有來處理業務邏輯、數據及接口調用。它們在兩個進程中運行，通過系統層 JSBridge 實現通信，實現 UI 的渲染、事件的處理

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

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

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

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

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

尺寸單位 rpx

rpx 是響應式像素,可以根據屏幕寬度進行自適應。規定屏幕寬為 750rpx。如在 iPhone6 上，屏幕寬度為 375px，共有 750 個物理像素，則 750rpx = 375px = 750 物理像素

使用 @import 標識符來導入外聯樣式。@import 后跟需要導入的外聯樣式表的相對路徑，用;表示語句結束

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

5. 小程序頁面間有哪些傳遞數據的方法

使用全局變量實現數據傳遞在 app.js 文件中定義全局變量 globalData，將需要存儲的信息存放在里面

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

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

使用 wx.navigateTo 與 wx.redirectTo 的時候，可以將部分數據放在 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 不允許跳轉到 tab 所包含的頁面

onLoad 只執行一次

使用本地緩存 Storage 相關

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

onLoad 頁面加載時觸發。一個頁面只會調用一次，可以在 onLoad 的參數中獲取打開當前頁面路徑中的參數
onShow() 頁面顯示/切入前臺時觸發
onReady() 頁面初次渲染完成時觸發。一個頁面只會調用一次，代表頁面已經準備妥當，可以和視圖層進行交互
onHide() 頁面隱藏/切入后臺時觸發。如 navigateTo 或底部 tab 切換到其他頁面，小程序切入后臺等
onUnload() 頁面卸載時觸發。如 redirectTo 或 navigateBack 到其他頁面時

詳見生命周期回調函數

7. 怎么封裝微信小程序的數據請求

參考這里

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

1、提高頁面加載速度

2、用戶行為預測

3、減少默認 data 的大小

4、組件化方案

9. 微信小程序的優劣勢

優勢

即用即走，不用安裝，省流量，省安裝時間，不占用桌面
依托微信流量，天生推廣傳播優勢
開發成本比 App 低

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

缺點

用戶留存，即用即走是優勢，也存在一些問題
入口相對傳統 App 要深很多
限制較多,頁面大小不能超過2M。不能打開超過10個層級的頁面

10. 怎么解決小程序的異步請求問題

小程序支持大部分 ES6 語法

在返回成功的回調里面處理邏輯
Promise 異步

11. 小程序關聯微信公眾號如何確定用戶的唯一性

如果開發者擁有多個移動應用、網站應用、和公眾帳號（包括小程序），可通過 unionid 來區分用戶的唯一性，因為只要是同一個微信開放平臺帳號下的移動應用、網站應用和公眾帳號（包括小程序），用戶的 unionid 是唯一的。換句話說，同一用戶，對同一個微信開放平臺下的不同應用，unionid 是相同的

12. 如何實現下拉刷新

首先在全局 config 中的 window 配置 enablePullDownRefresh
在 Page 中定義 onPullDownRefresh 鉤子函數,到達下拉刷新條件后，該鉤子函數執行，發起請求方法
請求返回后，調用 wx.stopPullDownRefresh 停止下拉刷新