學習微信小程序踩過的坑

前段時間試着做了一個微信小程序，第一次從數據庫到後端再到前端一起弄，這個過程還是遇到了很多問題，然後就總結下來了。

1. 找錯誤技巧：

出現問題一定先看報錯，一般都能看出是哪裏出錯了，還要會點擊報錯中的提示出錯的類的路徑，找到出錯的哪一個語句，一般出錯的就是和這句話有關的內容，有時也會因爲其他語句有錯導致該語句報錯，所以在檢查之後發現報錯的這條語句沒用問題就往上看看前面的代碼會不會出錯了。
一定要多在控制檯輸出提示語句，比如輸入、輸出、變量賦值後的結果、收到的請求內容，發送出去的數據，這個功能要幹什麼，關鍵變量的值。有了這些提示就大概清楚這個功能有沒有正常執行，或者執行到哪一步之後就停下出錯了。

2. 後端找不到json數據中的屬性：

由於前後端交互傳遞的是一個對象，在後端servlet中需要提取該對象中的屬性，所以用到了request.getParameter()方法來提取，該方法的參數爲要提取的屬性的名字。由於在前端的json的data中使用了JSON.stringify()方法，該方法會把一個對象轉化爲json格式的字符串，所以前端傳回來的是一個字符串而不是可以單獨提取屬性的對象。所以json的data只需要直接放一個按照json格式的javascript對象即可。此時servlet就可以直接用request.getParameter()方法來提取單獨的值

3. AJAX跨域請求失敗：

在servlet中加上 response.setHeader(“Access-Control-Allow-Origin”, “*”)

4. servlet404錯誤可能：

使用idea出現404的話，要在servlet文件中進行註解配置，加上servlet的映射路徑
@WebServlet(name=“servlet名字”, urlPatterns=“映射路徑”)
如果不放心，就在web.xml文件中也配置servlet的請求路徑

5. servlet500錯誤可能：

servlet中聲明的變量沒有初始化，會出現 java.lang.NumberFormatException:null 錯誤

6. js中出現 this.setData is not a function：

在該方法裏定義一個this的備份 var that = this ;

7. js中關於日期的操作：

使用var date = new Date()即可獲得當前日期，若要創建指定日期的變量，則添加一個字符串類型的日期作爲Date()的參數var date = new Date(str)
date.getFullYear()獲得日期的年
data.getMonth()+1獲得日期的月份
data.getDate()獲得日期的日
如果兩個日期需要比較大小或者計算時間差，把日期變爲時間戳然後用時間戳相減就得到了時間差。時間戳是自1970/1/1/00：00：00至這個日期的總秒數，分爲10位（以秒爲單位）和13位（以毫秒爲單位）。使用date.getTime()就可以將日期變量轉換爲時間戳

8. console.log()輸出this.data裏的數據出錯：

除了this.data的數據之外不能含有其他的內容
consloe.log(this.data.user); 正確
consloe.log(‘數據爲：’ + this.data.user); 錯誤

9. 微信小程序獲取js中的全局變量：

在app.js文件中的globalData中聲明變量，按照普通的賦值方法後即可在其他頁面中直接使用，但要先在使用的js文件中聲明const app = getApp()

10. 數據庫導出sql文件：

使用命令行跳轉到mysql安裝的文件夾中的bin文件夾中，輸入：
mysqldump -u 用戶名 -p 要導出的數據庫名 > 數據庫名.sql
回車後提示輸入和用戶名匹配的密碼就會導出到bin文件夾中了。用戶名一般是root

11. 微信小程序關閉或切換後臺時保存數據：

小程序的生命週期是創建onLaunch()、更新onShow()、銷燬onHide()。當從小程序前臺切換到後臺時，會觸發app.js文件中的onHide()方法，在此方法中寫入需要保存的數據，向後端發送請求保存到數據庫中

12. 微信小程序彈框：

wx.showToast是一個提示框，可在其屬性title中設置7個字以內的提示語
wx.showModal是一個確認框，可在其屬性content中設置長文本內容，若需要換行就在需要換行的地方後加上 \n ，但只會在真機上出現換行，如果要在開發者工具中也顯示就用 \n\n

13. 微信小程序wxml中顯示的數據動態改變：

在組件中的文字是顯示出來的內容，如果想要達到修改某個值後這個內容就會自動改變而不需要重新刷新頁面，那麼就要使用{{xxx}}來代表要顯示的內容，xxx爲js文件中的data數據，之後只需要在js方法中使用setData方法修改xxx的值就會自動更新內容。要注意的是如果是{{xxx.yy}}，xxx是一個對象，yy是它的屬性，改變yy的值不會自動更新內容，目前的解決方法就是將這個屬性賦值給一個單獨的變量，用這個變量來顯示內容

14. 微信小程序登錄授權時出現 errcode":40125,“errmsg”:"invalid appsecret：

● 可能是太久沒用，需要重置appSecret，在微信小程序官網裏弄。
● url中出現了空格
● 創建項目時appID用了測試號，導致appID和appSecret配對不上，在微信開發者工具中修改appID爲自己註冊的賬號的ID即可

15. 微信小程序textarea組件獲取value值慢：

觸發的條件不要用bindblur，這是失去焦點後纔會觸發，會晚於bindtap，編輯完文本框中的內容後還沒來得及觸發失焦事件就已經來不及了。
使用bindinput，這是文本框內容發生變化就會觸發事件，所以當文本框的內容編輯完時相應的事件也完成了

16. 微信小程序觸發事件後刷新頁面：

調用this.onLoad()或者this.onShow()就可重新刷新頁面，重點是重新讀取數據，你把讀取數據的代碼放在哪裏就調用哪個方法

17. 微信小程序循環對點擊內容單獨執行操作：

在循環元素的view組件中加入data-xxx屬性，將想要傳遞的數據賦值給它，這個數據甚至可以是一整個對象，可以存在很多個類似的屬性。在觸發的js方法中通過參數e可以找到這個屬性，e.currentTarget.dataset.xxx即data-xxx的值，從而對點擊的內容單獨執行操作

18. 微信小程序連續打開多次相同頁面但參數不同出現頁面棧滿：

不能使用wx.navigateTo()，會保留當前頁面跳轉到指定頁面，也不能使用wx.redirectTo()，雖然不會保留當前頁面但是依然會累積同樣會滿。
使用wx.navigateBack()，delta指定退回幾層頁面

19. 微信小程序在當前頁面進行編輯後返回上層頁面並刷新數據：

onLoad(Object query)：頁面加載時觸發。一個頁面只會調用一次。
onShow：頁面顯示/切入前臺時觸發。所以把之前在onLoad裏的操作全部轉移到onShow裏，爲獲取上上層頁面的傳來的參數使用頁面棧。
let pages = getCurrentPages(); //獲取頁面棧
let currpage = pages[pages.length-1]; //獲得當前頁面
currpage.options.參數名 //獲取上上層頁面傳來的參數

20.用戶使用微信自帶的openID:

首次登錄小程序時會提示授權登錄的按鈕，點擊之後便會進入到主頁面中。若不進行授權登錄則無法使用其中的功能，該點也符合了微信小程序平臺的要求 ，即使不授權登錄也有展示的內容。登錄的過程使用的是微信自帶的openId,點擊授權登錄後，會向該小程序後端發送一個臨時碼，然後小程序向後臺發送請求得到每個微信用戶唯一的openId。使用openId可以省下注冊賬號的過程，同時可以獲取用用戶微信中的信息，例如頭像、暱稱、所在位置等,則可以直接使用微信的頭像、暱稱等等作爲該小程序用戶的信息，從而節省了存儲用戶部分數據的空間，提高了效率。

總結

• 這是在寒假期間自學了數據庫、jdbc、js、html、小程序開發之後弄的，第一次實現了三層架構，但也只是很簡單很low的，沒有用到什麼框架，因爲還不會，等暑假就會把框架也學了。
• 在打代碼的過程真的遇到了好多問題，上面列舉的只是一部分，我是在重複遇到幾次相同問題之後纔想起來應該把這些問題和解決方法總結起來，以後再遇到就方便查看了
• 我覺得這個過程中最難的就是前後端的溝通，一個404能噁心我一天，還有前端的東西不是很熟，感覺有很多方便的方法可以實現某個功能但我不知道或者不會用就只能自己硬想一些野路子的方法實現
• 上學期學了jsp說實話真的沒有理解servlet之類的東西，這次硬着頭皮不斷 摸索終於搞懂了，這是比較值得高興的一點
• 在微信小程序功能實現的差不多了之後要來美化界面，調配色是真的太噁心人了，不管怎麼弄都達不到自己的想法，就有一種想自己設計又做不到的感覺
• 這個小程序還沒完工，之後還會繼續完善，到時候會出一期從0開始實現一個微信小程序的全過程