小程式面試題

1. bindtap和catchtap的區別是什麼？

bind事件繫結不會阻止冒泡事件向上冒泡，catch事件繫結可以阻止冒泡事件向上冒泡

2. Js陣列轉成換字串，強制轉換成整數及轉換成浮點數的函式分別是什麼？

js提供了parseInt()和parseFloat()兩個轉換函式。前者把值轉換成整數，後者把值轉換成浮點數。只有對String型別呼叫這些方法，這兩個函式才能正確執行；對其他型別返回的都是NaN(Not a Number)。

1. 轉換函式：

在 判斷字串是否是數字值前，parseInt()和parseFloat()都會仔細分析該字串。parseInt()方法首先檢視位置0處的 字元，判斷它是否是個有效數字；如果不是，該方法將返回NaN，不再繼續執行其他操作。但如果該字元是有效數字，該方法將檢視位置1處的字元，進行同樣的 測試。這一過程將持續到發現非有效數字的字元為止，此時parseInt()將把該字元之前的字串轉換成數字。

parseInt("1234blue"); //returns 1234 parseInt("0xA"); //returns 10 parseInt("22.5"); //returns 22 parseInt("blue"); //returns NaN

2. 強制型別轉換

還可使用強制型別轉換（type casting）處理轉換值的型別。使用強制型別轉換可以訪問特定的值，即使它是另一種型別的。ECMAScript中可用的3種強制型別轉換如下： Boolean(value)——把給定的值轉換成Boolean型； Number(value)——把給定的值轉換成數字（可以是整數或浮點數）； String(value)——把給定的值轉換成字串。

3. 利用js變數弱型別轉換

舉個小例子，一看，就會明白了。<script> var str= '012.345 '; var x = str-0; x = x*1;</script>

上例利用了js的弱型別的特點，只進行了算術運算，實現了字串到數字的型別轉換，不過這個方法還是不推薦的。

3. 簡單描述下微信小程式的相關檔案型別。

小程式：pages ——index：index.js(頁面邏輯) /index.wxml (頁面結構)/index.wxss (頁面樣式表) / index.json (頁面配置)

App.js   小程式邏輯

App.json  小程式公共設定

App.wxss   小程式公共樣式表

4. 小程式有哪些引數傳值的方法？

1、設定id的方法標識跳轉後傳遞的引數值；

2、通過使用data - xxxx 的方法來標識要傳遞的值

微信小程式設定id的方法標識來傳值

在要跳轉的item處，設定一個id並給當前的id賦值上對應的key值，比如一部電影的id（後面帶著id去下一個頁面查詢，詳細資訊）如：

後我們在js的bindtap的響應事件中獲取，並傳遞到下一個介面中；

獲取到id傳的值

通過e.currentTarget.id;獲取設定的id值，並通過設定全域性物件的方式來傳遞數值，

獲取全域性物件 var app=getApp(); //設定全域性的請求訪問傳遞的引數 app.requestDetailid=id;

提示：其實我們也可以在，wxml中檢視到我們設定的每一個item的id值

通過使用data - xxxx 的方法標識來傳值

通過使用data - xxxx 的方法標識來傳值，xxxx可以自定義取名 比如data-key等等都可以。

如何獲取data-xxxx傳遞的值？

在js的bindtap的響應事件中：

通過資料解析一層層找到資料，var id=e.target.dataset.id(根據你的data-id的取名)

微信小程式如何跨頁面獲取值？

依據上面的方式設定要傳遞的值，頁面跳轉後，我們就需要在下一個頁面拿到傳遞的資料（這個資料在傳遞前，就已經被設定成全域性變數）

在跳轉後的js頁面，接收傳遞過來的資料detail.js

同樣通過全域性額方式取值出來，（即和app.js中取某個變數的值是一樣的）

var movieid=getApp().MovieDetailid;
console.log(movieid);

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

微信小程式 跳轉頁面

小程式頁面有2種跳轉，可以在wxml頁面或者js中：

1，在wxml頁面中：

<navigator url="../index/index">跳轉到新頁面</navigator>

<navigator url="../index/index" open-type="redirect">在當前頁開啟</navigator>

<navigator url="../index/index" open-type="switchTab">切換到首頁Tab</navigator>

 

2，在js頁面中：

【注意】此處注意兩個關鍵詞 “應用內的頁面” 和 “tabBar頁面”。  app.json檔案中tabBar中註冊過的tab頁，即為“tabBar頁面”，非tabBar中註冊佔用的頁面即為“應用內的頁面” 。 如下圖：home頁面為“應用內的頁面”,index和logs頁面則為 “tabBar頁面”。

 

3,如果上述跳轉遇到跳轉失敗或無效的問題，請訪問下面連結:

6. 如果需要使用者授權，使用者選擇拒絕授權，此時應該如何處理？

在微信小程式開發時，當我們呼叫API  wx.getUserInfo(OBJECT) 時，需要使用者授權。但如果使用者拒絕授權，我們如何相容使用者拒絕授權狀態，擁有更好的使用者體驗呢？

先看看這個介面的官方文件：

wx.getUserInfo(OBJECT)

獲取使用者資訊，需要先呼叫 wx.login 介面。

OBJECT引數說明：

引數名	型別	必填	說明
withCredentials	Boolean	否	是否帶上登入態資訊
success	Function	否	介面呼叫成功的回撥函式
fail	Function	否	介面呼叫失敗的回撥函式
complete	Function	否	介面呼叫結束的回撥函式（呼叫成功、失敗都會執行）

1. tip: wx.getUserInfo 介面需要使用者授權，請相容使用者拒絕授權的場景。

我們就是要在使用者點選拒絕的時候，彈出提示框，提示使用者以提升使用者體驗。像下面這樣的。

用具體程式碼實現就是，將彈窗寫在 wx.getUserInfo 的fail回撥函式中，像下面這樣：

wx.getUserInfo({

success: function (resuser) {

console.log(success)

},

fail: function () {// 呼叫微信彈窗介面

wx.showModal({

title: '警告',

content: '您點選了拒絕授權，將無法正常使用******的功能體驗。請10分鐘後再次點選授權，或者刪除小程式重新進入。',

success: function (res) {

if (res.confirm) {

console.log('使用者點選確定')

}

}

})

}

})

這樣使用者就獲得了提示資訊，但此時，使用者還是停留在頁面的，如果某些展示資訊，還是給要給使用者展示的，只是在進行某些操作的時候要對授權進行驗證的話，那就得繼續修改我們的程式碼，儲存使用者的登入態，在其他地方做驗證使用。

第一種思路：

儲存登入態這裡是這樣的，將使用者的登入資訊傳給後臺，後臺儲存使用者資訊，同時用 open_id 在後臺換取一個SessionId  用換取的這個SessionId 存在快取，做為登入態驗證。

wx.getUserInfo({

success: function (resuser) {

let userInfo = resuser.userInfo

that.healthApi.login(code, userInfo).then(logindata => {   // 這裡將微信的請求封裝成Promiese 風格

if (logindata.code === 0) {

var sessionId = logindata.data// 呼叫微信wechat.setStorage將換回來的 SessionId 存在本地快取

that.wechat.setStorage('sessionId', sessionId).then(() => {

that.globalData.userInfo = userInfo

typeof cb == "function" && cb(that.globalData.userInfo)

})

}

})

},

fail: function () {

wx.showModal({

title: '警告',

content: '您點選了拒絕授權，將無法正常使用*****的功能體驗。請10分鐘後再次點選授權，或者刪除小程式重新進入。',

success: function (res) {

if (res.confirm) {

console.log('使用者點選確定')

}

}

})

}

})

這樣我們將登入態儲存在了 SessionId 中，在每次登入的時候我們只需要再呼叫一個 檢查 SessionId的介面就行，檢查不通過再調微信登入介面。此處不做延伸了。

第二種思路：

在3.29微信小程式更新的版本中，加入了這樣一條屬性

withCredentials 欄位基礎庫版本 1.1.0 開始支援，低版本需做相容處理

這個欄位的意思就是呼叫 wx.getUserInfo(OBJECT) 是否帶上 登入態  的資訊。

官方文件是這樣解釋的：

withCredentials 欄位基礎庫版本 1.1.0 開始支援，低版本需做相容處理

注：當 withCredentials 為 true 時，要求此前有呼叫過 wx.login 且登入態尚未過期，此時返回的資料會包含 encryptedData, iv 等敏感資訊；當 withCredentials 為 false 時，不要求有登入態，返回的資料不包含 encryptedData, iv 等敏感資訊。

success返回引數說明：

引數	型別	說明
userInfo	OBJECT	使用者資訊物件，不包含 openid 等敏感資訊
rawData	String	不包括敏感資訊的原始資料字串，用於計算簽名。
String	使用 sha1( rawData + sessionkey ) 得到字串，用於校驗使用者資訊。
iv	String	加密演算法的初始向量，詳細見

注：需要相容微信低版本，向後相容。

那麼利用這個介面，我們可以直接拿到 登入狀態，在其他需要驗證登入的地方進行提示，而在不需要授權的地方還可以讓使用者瀏覽小程式。

回到前面的問題，在使用者點選拒絕授權後，在某些操作時需要驗證使用者是否授權過，彈出互動資訊，那麼就利用上面的 SessionId或者 withCredentials 登入態進行下面的操作：

applyIn: functionapplyIn() {

if (wx.getStorageSync('sessionId')) {  // 根據儲存的sessionId 進行驗證

wx.navigateTo({

url: 'familyDoctorApply/familyDoctorApply?Oid=' + this.data.params.Oid + '&title=' + this.data.params.title + '&serviceCity=' + this.data.array[this.data.index].name + '&productPrice=' + this.data.product.productPrice

});

} else {

wx.showModal({

title: '警告',

content: '您點選了拒絕授權，無法使用此功能。',

success: function (res) {

if (res.confirm) {

console.log('使用者點選確定')

}

}

})

}

效果像這樣：

這樣一個簡單完整的登入及授權，登入態儲存等前端微信小程式解決方案就完成了，還可以繼續擴充套件到登入有效期，退出登入，使用者許可權等跟多擴充套件的地方。

7. 你平時封裝可以複用的方法嗎？你會把可以複用的方法寫在哪個檔案裡？

其實可以模擬一些框架的，比如bootsrap,寫個demo出來，抽出css和js,js最好抽象成物件（建構函式）或者是帶引數的方法，然後你只要宣告對像，或者引數指定某個class或id，就可以了

寫在html檔案裡有什麼優點嗎？獨立出來會有什麼問題嗎？尤其是載入頁面的時候，應該會多發很多http請求吧，會不會造成載入變慢？

8. 分析下小程式的優劣勢?

小程式是在微信生態發展過程中新出現的一種應用形態，小程式的小，從某種程度上已經說明了它的體量不會很大，但是可以實現一些功能相對簡單、互動相對簡單的服務需求，同時解決了App長期以來多平臺適配、多應用市場分發、開發成本居高不下等諸多方面的問題。所以小程式【密件】依靠微信平臺和自身“閱後即焚”的功能，獲得眾多年輕人的好評

優勢：

1）容易上手，只要之前有HTML+CSS+JS基礎知識，寫小程式基本上沒有大問題；當然如果瞭解ES6+CSS3則完全可以編寫出即精簡又動感的小程式；

2）基本上不需要考慮相容性問題，只要微信可以正常執行的機器，就可以執行小程式；

3）基本元件庫已經比較齊全：Toast,Loading框,Picker,定位及地圖,Image,Input,Checkbox,Text,TextArea,ScrollView等常用的元件都有，而且使用也挺簡單、方便；

4）釋出、稽核高效，基本上上午釋出稽核，下午就稽核通過，升級簡單，而且支援灰度釋出；

5 ) 微信官方提供使用人數、頻率等資料統計，小程式js指令碼執行錯誤日誌；

6）開發文件比較完善，開發社群比較活躍；

7）最近剛開放的牛x功能，新增webview元件，可以展示網頁啦，這個比較爽；

8）支援外掛式開發，一些基本功能可以開發成外掛，供多個小程式呼叫；

劣勢：

1）後臺除錯麻煩，因為API介面必須https請求，且公網地址，也就是說後臺程式碼必須釋出到遠端伺服器上；當然我們可以修改host進行dns對映把遠端伺服器轉到本地，或者開啟tomcat遠端除錯；不管怎麼說終歸除錯比較麻煩。

2）前臺測試有諸多坑，最頭疼莫過於模擬器與真機顯示不一致（之前碰到一個案例，後續單獨講解）

3）真機測試，個別功能安卓和蘋果表現迥異，我們的小程式裡有很多頁面有定位功能，模擬器和iphone定位瞬間完成，然而安卓手機就蛋疼了，老顯示“定位中...”要很久才能定位好。後來沒辦法只能優化，減少定位次數。

4）native元件，展示很不好，比如textarea，不能在滾動頁面出現，而且至於頂層，經常其它元件會被它遮擋，點選其它元件時，就進入textarea輸入框；畫布元件也是如此；

5）頁面跳轉深度不能超過5個頁面，這個比較麻煩，有些複雜的頁面跳轉沒法實現，不過太複雜的話也有悖小程式簡單易用的原則啦；

6）小程序升級問題，官方文件說會自動更新，實際情況往往是要先把原來的小程式刪除掉，重新搜尋新增，才能載入最新版本；

7）頁面渲染穩定性有待提高，已經好幾次出現部分使用者的頁面顯示異常，整個頁面被放大了好幾倍，先刪除原來小程式再添加回來，如此重複好幾次，才能顯示正常；

8）js引用只能使用絕對路徑，很蛋疼；基於安全性及MINA框架實現原理，小程式中對js使用做了很多限制，不能使用：new Function，eval，Generator，不能操作cookie，不能操作DOM；

9）開發工具bug比較多且效率比較低，三天兩頭升級，解決老問題的同時又出現問題；檔案查詢、資源定位、程式碼編輯較eclipse有一定差距。經常出現把a.js當做b.js來修改

9. 設定值到頁面暫存區（即data）裡面的方法有幾種？分別是什麼？有什麼區別？

1. 使用QueryString變數     QueryString是一種非常簡單的傳值方式，他可以將傳送的值顯示在瀏覽器的位址列中。如果是傳遞一個或多個安全性要求不高或是結構簡單的數值時，可以使用這個方法。但是對於傳遞陣列或物件的話，就不能用這個方法了。下面是一個例子： a.aspx的C#程式碼 private void Button1_Click(object sender, System.EventArgs e) {  string s_url;  s_url = "b.aspx?name=" + Label1.Text;  Response.Redirect(s_url); } b.aspx中C#程式碼 private void Page_Load(object sender, EventArgs e) {  Label2.Text = Request.QueryString["name"]; }   2. 使用Application 物件變數     Application物件的作用範圍是整個全域性，也就是說對所有使用者都有效。其常用的方法用Lock和UnLock。 a.aspx的C#程式碼 private void Button1_Click(object sender, System.EventArgs e) {  Application["name"] = Label1.Text;  Server.Transfer("b.aspx"); } b.aspx中C#程式碼 private void Page_Load(object sender, EventArgs e) {  string name;  Application.Lock();  name = Application["name"].ToString();  Application.UnLock(); }   3. 使用Session變數     想必這個肯定是大家使用中最常見的用法了，其操作與Application類似，作用於使用者個人，所以，過量的儲存會導致伺服器記憶體資源的耗盡。 a.aspx的C#程式碼 private void Button1_Click(object sender, System.EventArgs e) {  Session["name"] = Label.Text; } b.aspx中C#程式碼 private void Page_Load(object sender, EventArgs e) {  string name;  name = Session["name"].ToString(); }   4. 使用Cookie物件變數     這個也是大家常使用的方法，與Session一樣，其是什對每一個使用者而言的，但是有個本質的區別，即Cookie是存放在客戶端的，而session是存放在伺服器端的。而且Cookie的使用要配合ASP.NET內建物件Request來使用。 a.aspx的C#程式碼 private void Button1_Click(object sender, System.EventArgs e) {  HttpCookie cookie_name = new HttpCookie("name");  cookie_name.Value = Label1.Text;  Reponse.AppendCookie(cookie_name);  Server.Transfer("b.aspx"); } b.aspx中C#程式碼 private void Page_Load(object sender, EventArgs e) {  string name;  name = Request.Cookie["name"].Value.ToString(); }   5. 使用Server.Transfer方法     這個才可以說是面象物件開發所使用的方法，其使用Server.Transfer方法把流程從當前頁面引導到另一個頁面中，新的頁面使用前一個頁面的應答流，所以這個方法是完全面象物件的，簡潔有效。 a.aspx的C#程式碼 public string Name {  get{ return Label1.Text;} } private void Button1_Click(object sender, System.EventArgs e) {  Server.Transfer("b.aspx"); } b.aspx中C#程式碼 private void Page_Load(object sender, EventArgs e) {  a newWeb; //例項a窗體  newWeb = (source)Context.Handler;  string name;  name = newWeb.Name; }

微信小程式--data的賦值與取值

通過小程式官方文件可知：

Page() 函式用來註冊一個頁面。接受一個 object 引數，其指定頁面的初始資料、生命週期函式、事件處理函式等。其中的引數data用來設定初始資料，WXML 中的動態資料均來自對應 Page 的 data。

所以如果頁面需要顯示動態資料必須要把資料更新到data中對應的變數中。

· 頁面js檔案中這麼寫：

Page({

data: {

message: 'HelloMINA!'

  }

})

· wxml中這麼寫：

<view> {{ message }} </view>

· 如果該資料在操作過程中發生變化，需要將新資料重新繫結到該變數中，寫法如下：

functionsetData(){

var that = this;

    that.setData({

      message: '新訊息'

    })

}

· 如果想在js檔案中使用data中的資料寫法如下：

functiongetData(){

var that = this;

    console.log(that.data.message)

}

10. 如何檢測使用者的微信版本是否支援某項功能？

第一期開放的介面，不是不能使用，而是無需檢測，全部都是支援的。只有後面最新開放的一些介面，才需要檢測是否支援。目前開放的所有介面：onMenuShareTimelineonMenuShareAppMessageonMenuShareQQonMenuShareWeiboonMenuShareQZonestartRecordstopRecordonVoiceRecordEndplayVoicepauseVoicestopVoiceonVoicePlayEnduploadVoicedownloadVoicechooseImagepreviewImageuploadImagedownloadImagetranslateVoicegetNetworkTypeopenLocationgetLocationhideOptionMenushowOptionMenuhideMenuItemsshowMenuItemshideAllNonBaseMenuItemshowAllNonBaseMenuItemcloseWindowscanQRCodechooseWXPayopenProductSpecificViewaddCardchooseCardopenCard

 

11. 如何分包載入？分包載入的優勢在哪？

分包載入的介紹      大部分小程式都會由某幾個功能組成，通常這幾個功能之間是獨立的，但會依賴一些公共的邏輯，並且這些功能通常會對應某幾個獨立的頁面。那麼小程式程式碼的打包，大可不必一定要打成一個，可以按照功能的劃分，拆分成幾個分包，當需要用到某個功能時，才載入這個功能對應的分包。對於使用者來說，小程式載入流程變成了：1.首次啟動時，先下載小程式主包，顯示主包內的頁面；2.如果使用者進入了某個分包的頁面，再下載這個對應分包，下載完畢後，顯示分包的頁面。採用分包載入，對開發者而言，能使小程式有更大的程式碼體積，承載更多的功能與服務；而對使用者而言，可以更快地開啟小程式，同時在不影響啟動速度前提下使用更多功能。分包的劃分在配置前首先需要開發者規劃下各個分包需要容納的內容，我們建議開發者按照功能劃分的的原則，將同一個功能下的頁面和邏輯放置於同一個目錄下，對於一些跨功能之間公共邏輯，將其放置於主包下，這樣可以確保在分包引用這部分功能時，這部分的邏輯一定存在。在分包劃分時，應該注意以下事項：1.避免分包與分包之間引用上的耦合。因為分包的載入是由使用者操作觸發的，並不能確保某分包載入時，另外一個分包就一定存在，這個時候可能會導致 JS 邏輯異常的情況，例如報「"xxx.js" is not defined」這樣的錯誤；2.一些公共用到的自定義元件，需要放在主包內。分包的配置      當理清了分包的劃分後，就可以進行分包的配置了，這一步並不複雜。

      假設支援分包的小程式目錄結構如下：

 

開發者通過在 app.jsonsubPackages欄位宣告專案分包結構：

分包載入的低版本相容問題   微信 6.6.0 版本開始支援分包載入，而對於低於這個版本的客戶端，我們做了相容處理，開發者不需要對老版本微信客戶端做相容。對於老版本的客戶端，編譯後臺會將所有的分包打包成一個整包，老版本的客戶端依然按照整包的方式進行載入。所以在老版本的微信客戶端下，是依然採取整包載入的方式載入的，建議開發者儘量控制程式碼包的大小。目前小程式分包大小的限制：    整個小程式所有分包大小不超過 4M    單個分包/主包大小不能超過 2M   隨著時間推移，老版本覆蓋率降低，我們會考慮進一步擴大程式碼包的大小。

12. 在你開發小程式的過程中遇到過什麼坑？ 你是怎麼解決的？

1.我們使用app.json檔案來對微信小程式進行全域性配置，決定頁面檔案的路徑、視窗表現、設定網路超時時間、設定多 tab 的時候在pages中寫註釋的時候回報錯。 
例如：

{

  "pages":[

      //這是首頁面

"pages/welcome/welcome"

  ]}

此時就會報錯 

2.在json檔案中沒有寫內容的時候也要加一對大括號{ }，不然的話也會報錯 
 
3. ①在開發微信小程式的時候，我們使用app.json檔案來對微信小程式進行全域性配置，決定頁面檔案的路徑，視窗表現，設定網路超時時間，設定多Tab等。 
以下是一個包含了所有配置選項的簡單配置，app.json ：

{

//設定頁面路徑

"pages": [

"pages/index/index",

"pages/logs/index"

  ],

//設定預設頁面的視窗表現

"window": {

"navigationBarTitleText": "Demo"

  },

//設定底部 tab 的表現

"tabBar": {

"list": [{

"pagePath": "pages/index/index",

"text": "首頁"

    }, {

"pagePath": "pages/logs/logs",

"text": "日誌"

    }]

  },

//設定網路超時時間

相關推薦