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。
· 而如果如果團隊前端強大,自己做一套框架也沒問題。
一:小程序與原生App哪個好?
答: 小程序除了擁有公眾號的低開發成本、獲客成本低以及無需下載等優勢,在服務請求延時與用戶使用體驗是都得到了較大幅度的提升,使得其能夠承載跟復雜的服務功能以及使用戶獲得更好的用戶體驗。
二:簡述微信小程序原理?
答: 微信小程序采用JavaScript、WXML、WXSS三種技術進行開發,從技術講和現有的前端開發差不多,但深入挖掘的話卻又有所不同。
JavaScript:首先JavaScript的代碼是運行在微信App中的,並不是運行在瀏覽器中,因此一些H5技術的應用,需要微信App提供對應的API支持,而這限制住了H5技術的應用,且其不能稱為嚴格的H5,可以稱其為偽H5,同理,微信提供的獨有的某些API,H5也不支持或支持的不是特別好。
WXML:WXML微信自己基於XML語法開發的,因此開發時,只能使用微信提供的現有標簽,HTML的標簽是無法使用的。
WXSS:WXSS具有CSS的大部分特性,但並不是所有的都支持,而且支持哪些,不支持哪些並沒有詳細的文檔。
微信的架構,是數據驅動的架構模式,它的UI和數據是分離的,所有的頁面更新,都需要通過對數據的更改來實現。
小程序分為兩個部分webview和appService。其中webview主要用來展現UI,appService有來處理業務邏輯、數據及接口調用。它們在兩個進程中運行,通過系統層JSBridge實現通信,實現UI的渲染、事件的處理
三:分析下微信小程序的優劣勢?
答:
優勢:
1、無需下載,通過搜索和掃一掃就可以打開。
2、良好的用戶體驗:打開速度快。
3、開發成本要比App要低。
4、安卓上可以添加到桌面,與原生App差不多。
5、為用戶提供良好的安全保障。小程序的發布,微信擁有一套嚴格的審查流程, 不能通過審查的小程序是無法發布到線上的。
劣勢:
1、限制較多。頁面大小有限制(持續更新中)。不能打開超過10個層級的頁面(持續更新中)。
2、樣式單一。小程序的部分組件已經是成型的了,樣式不可以修改。例如:幻燈片、導航。
3、推廣面窄,不能分享朋友圈,只能通過分享給朋友,附近小程序推廣。其中附近小程序也受到微信的限制。
4、依托於微信,無法開發后台管理功能。
四:微信小程序與H5的區別?
答:
第一條是運行環境的不同
傳統的HTML5的運行環境是瀏覽器,包括webview,而微信小程序的運行環境並非完整的瀏覽器,是微信開發團隊基於瀏覽器內核完全重構的一個內置解析器,針對小程序專門做了優化,配合自己定義的開發語言標准,提升了小程序的性能。
第二條是開發成本的不同
只在微信中運行,所以不用再去顧慮瀏覽器兼容性,不用擔心生產環境中出現不可預料的奇妙BUG
第三條是獲取系統級權限的不同
系統級權限都可以和微信小程序無縫銜接
第四條便是應用在生產環境的運行流暢度
長久以來,當HTML5應用面對復雜的業務邏輯或者豐富的頁面交互時,它的體驗總是不盡人意,需要不斷的對項目優化來提升用戶體驗。但是由於微信小程序運行環境獨立
五:小程序的雙向綁定和vue哪里不一樣?
小程序直接this.data的屬性是不可以同步到視圖的,必須調用:
1 2 3 |
this.setData({ noBind:true }) |