小程序開發中遇到的問題有哪些

這篇文章主要介紹小程序開發中遇到的問題有哪些，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

小程序面試題

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,如果上述跳轉遇到跳轉失敗或無效的問題，請訪問下面鏈接:

wx.navigateTo/wx.redirectTo 無效

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

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

先看看這個接口的官方文檔：

wx.getUserInfo(OBJECT)

獲取用戶信息，需要先調用 wx.login 接口。

OBJECT參數說明：

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返回參數說明：

注：需要兼容微信低版本，向后兼容。

那么利用這個接口，我們可以直接拿到 登錄狀態，在其他需要驗證登錄的地方進行提示，而在不需要授權的地方還可以讓用戶瀏覽小程序。

回到前面的問題，在用戶點擊拒絕授權后，在某些操作時需要驗證用戶是否授權過，彈出交互信息，那么就利用上面的 SessionId或者 withCredentials 登錄態進行下面的操作：

applyIn: function applyIn() {
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: 'Hello MINA!'
  }
})
· wxml中這么寫：
<view> {{ message }} </view>

如果該數據在操作過程中發生變化，需要將新數據重新綁定到該變量中，寫法如下：

function setData(){
    var that = this;
    that.setData({
      message: '新消息'
    })
}

如果想在js文件中使用data中的數據寫法如下：

function getData(){
    var that = this;
    console.log(that.data.message)
}

10、如何檢測用戶的微信版本是否支持某項功能？

第一期開放的接口，不是不能使用，而是無需檢測，全部都是支持的。
只有后面最新開放的一些接口，才需要檢測是否支持。
目前開放的所有接口：
onMenuShareTimeline
onMenuShareAppMessage
onMenuShareQQ
onMenuShareWeibo
onMenuShareQZone
startRecord
stopRecord
onVoiceRecordEnd
playVoice
pauseVoice
stopVoice
onVoicePlayEnd
uploadVoice
downloadVoice
chooseImage
previewImage
uploadImage
downloadImage
translateVoice
getNetworkType
openLocation
getLocation
hideOptionMenu
showOptionMenu
hideMenuItems
showMenuItems
hideAllNonBaseMenuItem
showAllNonBaseMenuItem
closeWindow
scanQRCode
chooseWXPay
openProductSpecificView
addCard
chooseCard
openCard

11、如何分包加載？分包加載的優勢在哪？

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

     假設支持分包的小程序目錄結構如下：

    開發者通過在 app.json subPackages 字段聲明項目分包結構：

分包加載的低版本兼容問題
  微信 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": "日志"
    }]
  },
  //設置網絡超時時間
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  //設置是否開啟 debug 模式
  "debug": true
}

②但是在對頁面json文件進行配置的時候只可以配置設置默認頁面的窗口表現（即只能對window進行配置），但是在此時可以直接省略window，如果加window則沒有效果，也不會報錯。
以下是一個包含了window配置選項的簡單配置，post.json ：

注意：這是錯誤的寫法

{
  "window":{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }}

注意：正確的寫法

{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"}

4.此前一直沒有注意vertical-align: middle和height：40rpx;line-height:40rpx進行設置垂直劇中的區別，這次主要說一下vertical-align: middle
代碼如下：

<view class="post-author-date">
    <image class="post-author" src="../../images/avatar/1.png">
    </image>
    <text class="post-date">Nov 15 2016</text>
</view>
 
.post-author{
    width: 60rpx;
    height: 60rpx;
    vertical-align: middle;
}
.post-date{
    margin-top: 5rpx;
    vertical-align: middle;
    /*height: 40rpx;
    line-height: 40rpx;*/
}

總結：
①vertical-align: middle;把此元素放在父元素的中部
②當一個父元素里面有多個子元素，需要把幾個子元素水平對齊，并且每個子元素都垂直劇中的時候，對每一個子元素進行設置 vertical-align: middle
③height: 40rpx; line-height: 40rpx;可以對文本進行垂直居中

以上是“小程序開發中遇到的問題有哪些”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！