微信小程序面試題


1 請談談微信小程序主要目錄和文件的作用?

  • project.config.json 項目配置文件,用得最多的就是配置是否開啟https校驗;
  • App.js 設置一些全局的基礎數據等;
  • App.json 底部tab, 標題欄和路由等設置;
  • App.wxss 公共樣式,引入iconfont等;
  • pages 里面包含一個個具體的頁面;
  • index.json (配置當前頁面標題和引入組件等);
  • index.wxml (頁面結構);
  • index.wxss (頁面樣式表);
  • index.js (頁面的邏輯,請求和數據處理等);

2 請談談wxml與標准的html的異同?

  • 都是用來描述頁面的結構;
  • 都由標簽、屬性等構成;
  • 標簽名字不一樣,且小程序標簽更少,單一標簽更多;
  • 多了一些 wx:if 這樣的屬性以及 {{ }} 這樣的表達式
  • WXML僅能在微信小程序開發者工具中預覽,而HTML可以在瀏覽器內預覽
  • 組件封裝不同, WXML對組件進行了重新封裝,
  • 小程序運行在JS Core內,沒有DOM樹和window對象,小程序中無法使用window對象和document對象。

3 請談談WXSS和CSS的異同?

  • 都是用來描述頁面的樣子;
  • WXSS 具有 CSS 大部分的特性,也做了一些擴充和修改;
  • WXSS新增了尺寸單位,WXSS 在底層支持新的尺寸單位 rpx;
  • WXSS 僅支持部分 CSS 選擇器;
  • WXSS 提供全局樣式與局部樣式

4 你是怎么封裝微信小程序的數據請求的?

  • 在根目錄下創建utils目錄及api.js文件和apiConfig.js文件;
  • 在apiConfig.js 封裝基礎的get, post 和 put, upload等請求方法,設置請求體,帶上token和異常處理等;
  • 在api中引入apiConfig.js封裝好的請求方法,根據頁面數據請求的urls, 設置對應的方法並導出;
  • 在具體的頁面中導入;

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

  • 使用全局變量實現數據傳遞
  • 頁面跳轉或重定向時,使用url帶參數傳遞數據
  • 使用組件模板 template傳遞參數
  • 使用緩存傳遞參數
  • 使用數據庫傳遞數據

6 請談談小程序的雙向綁定和vue的異同?

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

7 請談談小程序的生命周期函數?

  • onLoad() 頁面加載時觸發,只會調用一次,可獲取當前頁面路徑中的參數。
  • onShow() 頁面顯示/切入前台時觸發,一般用來發送數據請求;
  • onReady() 頁面初次渲染完成時觸發, 只會調用一次,代表頁面已可和視圖層進行交互。
  • onHide() 頁面隱藏/切入后台時觸發, 如底部 tab 切換到其他頁面或小程序切入后台等。
  • onUnload() 頁面卸載時觸發,如redirectTo或navigateBack到其他頁面時。

8 簡述微信小程序原理?

  • 小程序本質就是一個單頁面應用,所有的頁面渲染和事件處理,都在一個頁面內進行,但又可以通過微信客戶端調用原生的各種接口;
  • 它的架構,是數據驅動的架構模式,它的UI和數據是分離的,所有的頁面更新,都需要通過對數據的更改來實現;
  • 它從技術講和現有的前端開發差不多,采用JavaScript、WXML、WXSS三種技術進行開發;
  • 功能可分為webview和appService兩個部分;
  • webview用來展現UI,appService有來處理業務邏輯、數據及接口調用;
  • 兩個部分在兩個進程中運行,通過系統層JSBridge實現通信,實現UI的渲染、事件的處理等。

9 請談談原生開發小程序、wepy、mpvue 的對比?

  • 個人認為,如果是新項目,且沒有舊的 h5 項目遷移,則考慮用小程序原生開發,好處是相比於第三方框架,坑少。
  • 而如果有 老的 h5 項目是 vue 開發 或者 也有 h5 項目也需要小程序開發,則比較適合 wepy 或者 mpvue 來做遷移或者開發,近期看wepy幾乎不更新了,所以推薦美團的mpvue。
  • 而如果如果團隊前端強大,自己做一套框架也沒問題。
一.簡單描述下微信小程序的相關文件類型?
1、①.wxml 模板文件,是框架設計的一套標簽語言,結合基礎組件、事件系統、可以構建出頁面的結構
②.wxss 樣式文件,是一套樣式語言,用於描述WXML的組件樣式
③.js 腳本邏輯文件,邏輯處理網絡請求
④.json 配置文件,小程序設置,如頁面注冊,頁面標題及tabBar
2、 app.json 整個小程序的全局配置,包括:
pages:[所有頁面路徑]
網絡設置(網絡超時時間)
界面表現(頁面注冊)
window:{背景色、導航樣式、默認標題}
底部tab等
3、app.js 監聽並處理小程序的生命周期函數、聲明全局變量
4、app.wxss 全局配置的樣式文件
 
二.怎么封裝微信小程序的數據請求?
1、將所有的接口放在統一的js文件中並導出
2、在app.js中創建封裝請求數據的方法
3、在子頁面中調用封裝的請求數據
1、在根目錄下創建utils目錄及api.js文件和apiConfig.js文件;
2、在appConfig.js封裝基礎的get\post\put\upload等請求方法,設置請求體,帶上token和異常處理等;
3、在api.js中引入apiConfig.js封裝好的請求方法,根據頁面數據請求的urls,設置對應的方法並導出;
4、在具體頁面導入;
 
三.微信小程序有哪些傳值(傳遞數據)方法?
1、給html元素添加data-*屬性來傳遞值,然后通過e.currentTarget.dataset或onload的param參數獲取。
注:data-名稱不能有大寫字母、不可以存放對象
2、設置id的方法標識來傳值,通過e.currentTarget.id獲取設置的id的值,然后通過設置全局對象的方式來傳遞數值
3、在navigator中添加參數數值
1、使用全局變量實現數據傳遞
2、頁面跳轉或重定向時,使用url帶參數傳遞數據
3、使用組件模板template傳遞參數
4、使用緩存傳遞參數
5、使用數據庫傳遞參數
 
四.哪些方法來提高微信小程序的應用速度?
1、提高頁面的加載速度
2、用戶行為預測
3、減少默認data的大小
4、組件化方案
 
五.微信小程序的原理?
微信小程序采用JavaScript、wxml、wxss三種技術進行開發,與現有前端開發的區別:
①JavaScript的代碼是運行在微信APP中的,因此一些h5技術的應用需要微信APP提供對應的API支持;
②wxml微信自己基於xml語法開發的,因此在開發時只能使用微信提供的現有標簽,html的標簽是無法使用的;
③wxss具有css的大部分特性,但並不是所有都支持沒有詳細文檔(wxss的圖片引入需使用外鏈地址,沒有body,樣式可直接使用import導入)。
微信的架構,是數據驅動的架構模式,它的UI和數據是分離的,所有的頁面更新,都需要通過對數據的更改來實現。
小程序功能分為webview和APPservice,webview主要用來展示UI,appservice用來處理業務邏輯、數據及接口調用。它們在兩個進程中進行,通過系統層JSBridge實現通信,實現UI的渲染、事件處理。
 
六.分析微信小程序的優劣勢?
優勢:
①容易上手,基礎組件庫比較全,基本上不需要考慮兼容問題;
②開發文檔比較完善,開發社區比較活躍,支持插件式開發;
③良好的用戶體驗:無需下載,通過搜索和掃一掃就可以打開,打開速度快,安卓上可以添加到桌面,與原生APP差不多;
④開發成本比APP要低;
⑤為用戶提供良好的安全保障(小程序發布 嚴格的審查流程)
 
劣勢:
①限制較多,頁面大小不能超過1M,不能打開超過5個層級的頁面;
②樣式單一,部分組件已經是成型了的,樣式不可修改,例如:幻燈片、導航
③推廣面窄,不能分享朋友圈,只能通過分享給朋友,附近小程序推廣
④依托於微信,無法開發后台管理功能
⑤后台調試麻煩,因為api接口必須https請求且公網地址
⑥真機測試,個別功能安卓和蘋果表現迥異,例如安卓的定位功能加載很慢
 
六.微信小程序與H5的區別?
①運行環境不同(小程序在微信運行,h5在瀏覽器運行);
②開發成本不同(h5需要兼容不同的瀏覽器);
③獲取系統權限不同(系統級權限可以和小程序無縫銜接);
④應用在生產環境的運行流暢度(h5需不斷對項目優化來提高用戶體驗);
 
七.怎么解決微信小程序的異步請求問題?
在回調函數中調用下一個組件的函數:
app.js
success:function(info){
that.apirtnCallback(info)
}
index.js
onLoad:function(){
app.apirtnCallback = res =>{
console.log(res)
}
}
 
八.小程序關聯微信公眾號如何確定用戶的唯一性?
使用wx.getUserInfo方法 withCredentials為true時,可獲取encryptedData,里面有union_id.后端需要進行對稱解密。
 
九.使用webview直接加載要注意哪些事項?
①必須要在小程序后台使用管理員添加業務域名;
②h5頁面跳轉至小程序的腳步必須是1.3.1以上;
③微信分享只可以是小程序的主名稱,如要自定義分享內容,需小程序版本在1.7.1以上;
④h5的支付不可以是微信公眾號的appid,必須是小程序的appid,而且用戶的openid也必須是用戶和小程序的
 
十.小程序調用后台接口遇到哪些問題?
①數據的大小限制,超過范圍會直接導致整個小程序崩潰,除非重啟小程序;
②小程序不可以直接渲染文章內容這類型的html文本,顯示需借助插件
注:插件渲染會導致頁面加載變慢,建議在后台對文章內容的html進行過濾,后台直接處理批量替換p標簽div標簽為view標簽。然后其他的標簽讓插件來做。
 
十一.微信小程序如何實現下拉刷新?
用view代替scroll-view,設置onPullDownRefresh函數實現
 
十二.webview中的頁面怎么跳轉回小程序?
wx.miniProgram.navigateTo({
url:’pages/login/login’+’$params’
})
//跳轉到小程序導航頁面
wx.miniProgram.switchTab({
url:’/pages/index/index’
})
 
十三.bindtap和catchtap的區別?
①bind事件綁定不會阻止冒泡事件向上冒泡
②catch事件綁定可以阻止冒泡事件向上冒泡
 
十四.簡述wx.navigateTo(),wx.redirectTo(),wx.switchTab(),wx.navigateBack(),wx.reLaunch()的區別?
①在wxml頁面中:
跳轉新頁面
在當前頁打開
切換到首頁Tab
②在js頁面中:分為‘應用內的頁面’和‘tabBar頁面’;
③如果上述跳轉遇到跳轉失敗或者無效的問題,請訪問:wx.navigateTo/wx.redirectTo無效
 
十五.小程序的生命周期函數?
1、onLoad()頁面加載時觸發,只會調用一次,可獲取當前頁面路徑中的參數
2、onShow()頁面顯示/切換前台時觸發,一般用來發送數據請求
3、onReady()頁面初次渲染完成時觸發,只會調用一次,代表頁面已可和視圖層進行交互
4、onHide()頁面隱藏/切入后台時觸發,如底部tab切換到其他頁面或小程序切入后台等
5、onUnload()頁面卸載時觸發,如redirectTo或navigateBack到其他頁面時。
 
十六.小程序和Vue寫法的區別?
①遍歷的時候:小程序wx:for = "lists",而Vue是v-for = "item in lists"
②調用data模型(賦值)的時候:
小程序:this.data.item //調用
this.setData({item:1}) //賦值
vue: this.item //調用
this.item =1 //賦值
 
常見問題
1、rpx:小程序的尺寸單位,規定屏幕為750rpx,可適配不同分辨率的屏幕。
2、本地資源無法通過wxss獲取
RE:background-image:可以使用網絡圖片,或者base64,或者使用標簽
3、wx.navigateTo無法打開頁面
RE:一個應用同時只能打開5個頁面,請避免多層級的交互方式,或使用wx.redirectTo
4、tabBar設置不顯示
RE:①tabBar的數量少於2項或超過5項都不會顯示;
②tabBar寫法錯誤導致不顯示;
③tabBar沒有寫pagePath字段(程序啟動后顯示的第一個頁面)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM