原生小程序面試題

生小程序面試題1.請談?wù)勎⑿判〕绦蜃饔茫縫roject.config.json項目配置文件，用得最多的就是配置是否開啟https校驗；App.js設(shè)置一些全局的基礎(chǔ)數(shù)據(jù)等；App.json底部tab,標(biāo)題欄和路由等設(shè)置；App.wxss公共樣式，弓|入iconfont等；pages里面包含一個個具體的頁面；index.json（配置當(dāng)前頁面標(biāo)題和引入組件等）；index.wxml（頁面結(jié)構(gòu)）；index.wxss（頁面樣式表）；index.js（頁面的邏輯，請求和數(shù)據(jù)處理等）；2.簡單描述下微值小程序的相關(guān)文件類型？.wxml模板文件，是框架設(shè)計的一套標(biāo)簽語言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)、可以構(gòu)建出頁面的結(jié)構(gòu).wxss樣式文件，是一套樣式語言，用于描述WXML的組件樣式.js腳本邏輯文件，邏輯處理網(wǎng)絡(luò)請求.json配置文件，小程序設(shè)置，如頁面注冊，頁面標(biāo)題及tabBar.叩p.json整個小程序的全局配置，包括：?pages:［所有頁面路徑］網(wǎng)絡(luò)設(shè)置（網(wǎng)絡(luò)超時時間）界面表現(xiàn)（頁面注冊）window:｛背景色、導(dǎo)航樣式、默認(rèn)標(biāo)題｝?底部tab等.app.js監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量.app.wxss全局配置的樣式文件.請談?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)行了重新封裝，小程序運行在JSCore內(nèi)，沒有DOM樹和window對象，小程序中無法使用window對象和document對象。.請談?wù)刉XSS和CSS的異同？都是用來描述頁面的樣子；WXSS具有CSS大部分的特性，也做了一些擴充和修改；WXSS新增了尺寸單位，WXSS在底層支持新的尺寸單位rpx；WXSS僅支持部分CSS選擇器；WXSS提供全局樣式與局部樣式WXSS不支持window和dom文檔流.你是怎么封裝微值小程序的數(shù)據(jù)請求的？.將所有的接口放在統(tǒng)一的js文件中并導(dǎo)出.在app.js中創(chuàng)建封裝請求數(shù)據(jù)的方法.在子頁面中調(diào)用封裝的請求數(shù)據(jù)或.在根目錄下創(chuàng)建utils目錄及叩i.js文件和叩iConfig.js文件；.在叩pConfig.js封裝基礎(chǔ)的get\post\put\upload等請求方法，設(shè)置請求體，帶上token和異常處理等；.在叩i.js中引入apiConfig.js封裝好的請求方法，根據(jù)頁面數(shù)據(jù)請求的urls，設(shè)置對應(yīng)的方法并導(dǎo)出；.在具體頁面導(dǎo)入；.小程序頁面間有哪些傳遞數(shù)據(jù)的方法？.給html元素添加data-*屬性來傳遞值，然后通過e.currentTarget.dataset或onload的param參數(shù)獲取。注：data-名稱不能有大寫字母、不可以存放對象.設(shè)置id的方法標(biāo)識來傳值，通過e.currentTarget.id獲取設(shè)置的id的值，然后通過設(shè)置全局對象的方式來傳遞數(shù)值.在navigator中添加參數(shù)數(shù)值.使用全局變量實現(xiàn)數(shù)據(jù)傳遞.頁面跳轉(zhuǎn)或重定向時，使用url帶參數(shù)傳遞數(shù)據(jù).使用組件模板template傳遞參數(shù).使用緩存?zhèn)鬟f參數(shù).使用數(shù)據(jù)庫傳遞參數(shù).請談?wù)勑〕绦虻碾p向綁定和vue的異同？大體相同，但小程序直接this.data的屬性是不可以同步到視圖的，必須調(diào)用this.setData()方法！.雙向綁定：vue默認(rèn)支持雙向綁定，微信小程序需要借助data。.取值：vue中，通過this.reason取值。小程序中，通過this.data.reason取值。.定義方法：小程序使用在叩p.js中定義即可，vue的方法通過寫在method中進(jìn)行定義。.去變量的時候：-小程序wx:for="lists"-Vue是v-for="iteminlists".調(diào)用data模型(賦值)的時候:-小程序：this.data.item〃調(diào)用this.setData({item:1})//賦值-vue:this.item〃調(diào)用this.item=1〃賦值小程序的雙向綁定實際上并不是雙向綁定如果在小程序.js文件中改變了某個變量的值那么頁面上的值并不會跟著改變?nèi)绻胍撁嫔系闹狄哺淖兊脑捫枰ㄟ^setData來操作而Vue默認(rèn)就是雙向綁定只改變了某個變量的值頁面上也會跟著改變8.請談?wù)勑〕绦虻纳芷诤瘮?shù)？onLoad()頁面加載時觸發(fā)，只會調(diào)用一次，可獲取當(dāng)前頁面路徑中的參數(shù)。onShow()頁面顯示/切入前臺時觸發(fā)，一般用來發(fā)送數(shù)據(jù)請求；onReady()頁面初次渲染完成時觸發(fā)，只會調(diào)用一次，代表頁面已可和視圖層進(jìn)行交互。onHide()頁面隱藏/切入后臺時觸發(fā)，如底部tab切換到其他頁面或小程序切入后臺等。onUnload()頁面卸載時觸發(fā)，如redirectTo或navigateBack到其他頁面時。onPullDownRefresh()下拉刷新的鉤子函數(shù)用戶下拉刷新時會自動走到這個函數(shù)中onReachBottom()上翻到底的鉤子函數(shù)9.簡述微值小程序原理？小程序本質(zhì)就是一個單頁面應(yīng)用，所有的頁面渲染和事件處理，都在一個頁面內(nèi)進(jìn)行，但又可以通過微信客戶端調(diào)用原生的各種接口；它的架構(gòu)，是數(shù)據(jù)驅(qū)動的架構(gòu)模式，它的UI和數(shù)據(jù)是分離的，所有的頁面更新，都需要通過對數(shù)據(jù)的更改來實現(xiàn)；它從技術(shù)講和現(xiàn)有的前端開發(fā)差不多，采用JavaScript、WXML、WXSS三種技術(shù)進(jìn)行開發(fā)；功能可分為webview和appService兩個部分；webview用來展現(xiàn)UI，叩pService有來處理業(yè)務(wù)邏輯、數(shù)據(jù)及接口調(diào)用；兩個部分在兩個進(jìn)程中運行，通過系統(tǒng)層JSBridge實現(xiàn)通信，實現(xiàn)UI的渲染、事件的處理等。或.微信小程序采用JavaScript、wxml、wxss三種技術(shù)進(jìn)行開發(fā)，與現(xiàn)有前端開發(fā)的區(qū)別：JavaScript的代碼是運行在微信APP中的，因此一些h5技術(shù)的應(yīng)用需要微信APP提供對應(yīng)的API支持；

wxml微信自己基于xml語法開發(fā)的，因此在開發(fā)時只能使用微信提供的現(xiàn)有標(biāo)簽，html的標(biāo)簽是無法使用的；wxss具有css的大部分特性，但并不是所有都支持沒有詳細(xì)文檔（wxss的圖片引入需使用外鏈地址，沒有body，樣式可直接使用import導(dǎo)入）。.微信的架構(gòu)，是數(shù)據(jù)驅(qū)動的架構(gòu)模式，它的UI和數(shù)據(jù)是分離的，所有的頁面更新，都需要通過對數(shù)據(jù)的更改來實現(xiàn)。.小程序功能分為webview和APPservice，webview主要用來展示UI，叩pservice用來處理業(yè)務(wù)邏輯、數(shù)據(jù)及接口調(diào)用。它們在兩個進(jìn)程中進(jìn)行，通過系統(tǒng)層JSBridge實現(xiàn)通信，實現(xiàn)UI的渲染、事件處理。10.請談?wù)?0.請談?wù)勆_發(fā)小^程序、wepy.mpvue的對比？個人認(rèn)為，如果是新項目，且沒有舊的h5項目遷移，則考慮用小程序原生開發(fā)，好處是相比于第三方框架，坑少。而如果有老的h5項目是vue開發(fā)或者也有h5項目也需要小程序開發(fā)，則比較適合wepy或者mpvue來做遷移或者開發(fā)，近期看wepy幾乎不更新了，所以推薦美團(tuán)的mpvue。而如果如果團(tuán)隊前端強大，自己做一套框架也沒問題。.哪些方法來提高微值小程序的應(yīng)用速度？.提高頁面的加載速度.用戶行為預(yù)測#什么叫行為預(yù)測.減少默認(rèn)data的大小.組件化方案#使用.分析微值小程序的優(yōu)劣勢？?優(yōu)勢：,容易上手，基礎(chǔ)組件庫比較全，基本上不需要考慮兼容問題；.開發(fā)文檔比較完善，開發(fā)社區(qū)比較活躍，支持插件式開發(fā)；.良好的用戶體驗無需下載，通過搜索和掃一掃就可以打開打開速度快，安卓上可以添加到桌面，與原生APP差不多；.開發(fā)成本比APP要低；.為用戶提供良好的安全保障（小程序發(fā)布嚴(yán)格的審查流程）?劣勢：.限制較多，頁面大小不能超過1M，不能打開超過5個層級的頁面；.樣式單一，部分組件已經(jīng)是成型了的，樣式不可修改，例如：幻燈片、導(dǎo)航.推廣面窄，不能分享朋友圈，只能通過分享給朋友，附近小程序推廣.依托于微信，無法開發(fā)后臺管理功能.后臺調(diào)試麻煩，因為api接口必須https請求且公網(wǎng)地址

.真機測試，個別功能安卓和蘋果表現(xiàn)迥異，例如安卓的定位功能加載很慢.怎么解決微值小程序的異步請求問題？小程序支持ES6語法在返回成功的回調(diào)里面處理邏輯Promise異步async/await在回調(diào)函數(shù)中調(diào)用下一個組件的函數(shù):**app.js**success:function(info){that.apirtnCallback(info)}**index.js**onLoad:function(){app.apirtnCallback=res=>{console.log(res)}}14.小程序關(guān)聯(lián)微信公眾號如何需定用戶的唯一性？使用wx.getUserInfo方法withCredentials為true時，可獲取encryptedData，里面有union_id.后端需要進(jìn)行對稱解密。15.使用15.使用webview接加載要注意哪些事項？.必須要在小程序后臺使用管理員添加業(yè)務(wù)域名；h5頁面跳轉(zhuǎn)至小程序的腳步必須是1.3.1以上;.微信分享只可以是小程序的主名稱，如要自定義分享內(nèi)容，需小程序版本在1.7.1以上；h5的支付不可以是微信公眾號的appid，必須是小程序的appid，而且用戶的openid也必須是用戶和小程序的.小程序調(diào)用后臺接口遇到哪些問題？.數(shù)據(jù)的大小限制超過范圍會直接導(dǎo)致整個小程序崩潰，除非重啟小程序;.小程序不可以直接渲染文章內(nèi)容這類型的html文本，顯示需借助插件注：插件渲染會導(dǎo)致頁面加載變慢，建議在后臺對文章內(nèi)容的html進(jìn)行過濾，后臺直接處理批量替換p標(biāo)簽div標(biāo)簽為view標(biāo)簽。然后其他的標(biāo)簽讓插件來做。.微值小幅序如何實現(xiàn)下拉刷新？用view代替scroll-view，設(shè)置onPullDownRefresh函數(shù)實現(xiàn).webview中的頁面怎么跳轉(zhuǎn)回小幅序？wx.miniProgram.navigateTo({url:’pages/login/login’+'$params,})**〃跳轉(zhuǎn)到小程序?qū)Ш巾撁?*wx.miniProgram.switchTab({url:’/pages/index/index'}).bindtap和catchtap的區(qū)別？?相同點：首先他們都是作為點擊事件函數(shù)，就是點擊時觸發(fā)。在這個作用上他們是一樣的，可以不做區(qū)分?不同點:他們的不同點主要是bindtap是不會阻止冒泡事件的，catchup是阻值冒泡的20.簡述五個路由的區(qū)別wx.navigateTo()wx.redirectTo()wx.switchTab()wx.navigateBack()wx.reLaunch().在wxml頁面中：跳轉(zhuǎn)新頁面在當(dāng)前頁打開切換到首頁Tab在js頁面中：分為‘應(yīng)用內(nèi)的頁面’和‘tabBar頁面'如果上述跳轉(zhuǎn)遇到跳轉(zhuǎn)失敗或者無效的問題，請訪問：wx.navigateTo/wx.redirectTo無效wx.navigateTo():保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。但是不能跳至Utabbar頁面wx.redirectTo()：關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。但是不允許跳轉(zhuǎn)至I」tabbar頁面wx.switchTab():跳轉(zhuǎn)至I」tabBar頁面，并關(guān)閉其他所有非tabBar頁面wx.navigateBack()關(guān)閉當(dāng)前頁面，返回上一頁面或多級頁面?？赏ㄟ^getCurrentPages()獲取當(dāng)前的頁面棧，決定需要返回幾層wx.reLaunch():關(guān)閉所有頁面，打開到應(yīng)用內(nèi)的某個頁面.微值小程序與H5的區(qū)別？.運行環(huán)境不同(小程序在微信運行，h5在瀏覽器運行)；.開發(fā)成本不同(卜5需要兼容不同的瀏覽器)；.獲取系統(tǒng)權(quán)限不同(系統(tǒng)級權(quán)限可以和小程序無縫銜接)；.應(yīng)用在生產(chǎn)環(huán)境的運行流暢度(h5需不斷對項目優(yōu)化來提高用戶體驗)；.”展序如何更新頁面中的值?可以通過this.setData來進(jìn)行改變.如何實現(xiàn)登錄數(shù)據(jù)的持久化？可以通過wx.setStorageSync。鍵名'，對應(yīng)的值)來進(jìn)行數(shù)據(jù)持久化.微值dMgMapp有什么不同之處微信小程序?qū)儆谳p量級的app但是限制在微信中，開發(fā)周期短功能較少，占用空間少,app就相反需要占用額外內(nèi)存開發(fā)周期長【【我理解的意思相當(dāng)于flask和django的區(qū)別】】.微值小幅序如何進(jìn)行雙向綁定.通過bind-tap點擊事件向叩p.js定義的方法中獲取回執(zhí).設(shè)置data的值實現(xiàn)雙向綁定.如何自定義toobar.取消當(dāng)前的toobar.插入自定義toobar組件.app.json調(diào)用組件.頁面顯示1。。12「組件B類問題（業(yè)務(wù)）你在開發(fā)過程中有什么困難點（或者使用了什么技術(shù)）在開發(fā)的過程中我沒有太多的問題但是我的同事遇到了一個問題，怎么在序列化器中獲取request的值。通過源碼的研究發(fā)現(xiàn)self.context["reqeust"].xx可以獲取到值大大提高了數(shù)據(jù)的粘性和開發(fā)效率在小程序端使用模塊的引用設(shè)置url值方便url路徑的更改會寫接口嗎？項目你負(fù)責(zé)什么？會寫drf源碼在小程序的項目中我通過自定義方法重構(gòu)drf內(nèi)部方法實現(xiàn)更高的擴展性。開始：小程序、api（主）你之前做過小程序嗎？主要包括哪些功能？.沒做過小程序，這次公司需求。.了解vue.js，類似。.小程序就是前端技術(shù)：html、css、js這個小程序的具體設(shè)計邏輯是怎么樣的？有幾個人開發(fā)？周期多長？在你離職時，這個小程序項目是否還在開發(fā)？或者你離職時，你們公司在開發(fā)什么？他分為兩大模塊，有用戶動態(tài)模塊，拍賣模塊，用戶動態(tài)模塊又分為發(fā)布功能，動態(tài)展示功能以及常見的用戶交互功能，拍賣模塊又分為專場-拍品，由后臺管理人員維護(hù)更新，連我總共有3個人開發(fā)，總共開發(fā)了三個月，我離職時，項目還在開發(fā)，正在開發(fā)xx你說你負(fù)責(zé)支付環(huán)節(jié)，那么微值支付的流程是否可以簡單說一下？臨時憑證獲取wxid生成repayidjson，返回給小程序，小程序調(diào)支付窗口。支持成功提示+POST回調(diào)。.那好，既然流程說完了，那么，我問你，你這個項目涉及到了rmb,它在用戶點擊支付之后的邏輯關(guān)系和表關(guān)系你是怎么理解的？有多少張表？表關(guān)系？首先，在做這個功能的時候，會先在紙上畫出來其中的邏輯，然后再把后端需要的值傳過去。做這個后端api時，需要拿到前端的數(shù)據(jù)，判斷它是否使用優(yōu)惠券了，是否使用保證金了，是否有地址了，選擇什么方式支付了，余額還是微信支付，還有該用戶的支付價格，傳到后端之后進(jìn)行數(shù)據(jù)校驗，首先判斷地址是否存在，然后判斷訂單是否合法，是否使用了優(yōu)惠券，是否使用保證金，用戶的支付價格和后端計算的價格是否相符，由于支付環(huán)節(jié)必須保證一次完成，所以給它加了事務(wù)，訂單表的查詢加了鎖，通過一系列校驗，然后進(jìn)行支付。支付成功之后，訂單表記錄，保證金抵扣記錄，優(yōu)惠券使用記錄，退保證金記錄，都需要進(jìn)行相應(yīng)的修改.你覺得這個小程序項目的細(xì)節(jié)之處有哪些？閉包drf，認(rèn)證組件自定義。drf序列化嵌套重復(fù)訂單處理&數(shù)據(jù)庫鎖(InnoDB行級鎖).如何自定義tabbar?創(chuàng)建一^個compent文件夾，里面創(chuàng)建一^個tabbar頁面取消原有的tabbar頁面。需要在app.json中輸入compent:ture，在自定義的pages頁面中寫入<tabbarselected="{{0}}"></tabbar>進(jìn)行選中效果顯示.可否說一下小程序頁面之間的傳值，如果是tabbar頁面是否有問題？varpages=getCurrentPages()varprevPage=pages[pages.length-2];#prevPage是上一個頁面的對象，下面可以設(shè)置頁面的值prevPage.setData({topicText:topicInfo.title});也可以執(zhí)行那個頁面的函數(shù)，prevPage.getInfo(orderId);tabba