1. 程式人生 > >微信小程式踩坑日誌(二)

微信小程式踩坑日誌(二)

indexOf

在wxml檔案中不能使用 Object.keys() toString() indexOf() ;
其中indexOf()方法在wxml中怎麼樣都返回undefined;

textarea

textarea在小程式中算是一個比較大的坑了;具體表現為

  1. textarea在swiper中使用的話安卓環境下無法使用;只會有樣式出現,無法輸入,不能聚焦不能喚起輸入按鍵;
  2. textarea 的父級元素中有overflow屬性的時候 textarea的類容在輸入框移動時無法跟隨輸入框一起移動;
  3. 上面兩種情況是我在專案中遇到的;網上說還有很多其他情況的BUG,本人沒去測試

暫時能想到的辦法就是同時生產一個樣式一模一樣的view,點選的時候顯示textarea並聚焦,隱藏view;失去焦點的時候隱藏textarea,顯示view;做好資料繫結就可以了

路由

小程式的路由切換主要有一下幾種方式;理解其真正意義的前提是要理解小程式的路由這麼設定目的;
下面這些跳轉方法的目的就是為了儲存頁面的狀態,類似Vue的keep-alive;當用戶需要返回之前頁面的時候能夠儲存原狀;

可以理解為小程式執行時開啟了一個路由緩衝空間,每次頁面跳轉的時候需要考慮該頁面是否需要被快取;快取後的頁面使用者可以通過點選頂部後退按鈕或者按返回鍵回到之前的頁面;如果快取空間中沒有快取頁面的時候,頂部的返回按鈕不會出現,並且使用者再按返回鍵就會推出小程式介面

一. 微信提供的API路由跳轉

  1. wx.navigateBack

    		wx.navigateBack({
    				delta: 2,  //接收Number型別,表示往回跳轉的頁面層數
    				success(){},		//	介面呼叫成功的回撥函式	
    				fail(){},		//	介面呼叫失敗的回撥函式	
    				complete(){}  //	介面呼叫成功失敗都會執行的回撥函式	
    		})
    
  2. wx.navigateTo

     	該方法跳轉後,原頁面會儲存到路由的快取機制中;可以通過wx.navigateBack回到該頁面,並且狀態儲存和離開時一致
     	wx.navigateTo({
     					url: url,  //跳轉路徑  不能是tabBar裡面的路徑
     					success(){},		//	介面呼叫成功的回撥函式	
     					fail(){},		//	介面呼叫失敗的回撥函式	
     					complete(){}  //	介面呼叫成功失敗都會執行的回撥函式	
     	})
    
  3. wx.redirectTo

     	該方法跳轉後,原頁面直接銷燬
     	wx.redirectTo({
     					url: url,  //跳轉路徑  不能是tabBar裡面的路徑
     					success(){},		//	介面呼叫成功的回撥函式	
     					fail(){},		//	介面呼叫失敗的回撥函式	
     					complete(){}  //	介面呼叫成功失敗都會執行的回撥函式	
     	})
    
  4. wx.reLaunch

     	使用該方法跳轉後,快取的所有頁面全部銷燬
     	wx.redirectTo({
     					url: url,  //跳轉路徑  不能是tabBar裡面的路徑
     					success(){},		//	介面呼叫成功的回撥函式	
     					fail(){},		//	介面呼叫失敗的回撥函式	
     					complete(){}  //	介面呼叫成功失敗都會執行的回撥函式	
     	})
    
  5. wx.switchTab

     	使用該方法跳轉後,跳轉到 tabBar 頁面,並關閉其他所有非 tabBar 頁面
     	wx.redirectTo({
     					url: url,  //跳轉路徑  只能是tabBar裡面的路徑,並且路徑不能帶有引數
     					success(){},		//	介面呼叫成功的回撥函式	
     					fail(){},		//	介面呼叫失敗的回撥函式	
     					complete(){}  //	介面呼叫成功失敗都會執行的回撥函式	
     	})
    

二. 元件路由跳轉

  1. navigator

     navigator元件包含了上面所有API的功能;並且能實現不同小程式之間的跳轉
    
     1.  target  取值 self/miniProgram 
     		跳轉的限制和效果 暫時還沒有實驗;後期會再回來更新
     
     		self 表示當前小程式
     		miniProgram 表示其他小程式
     	
     2. url 表示在當前小程式內部跳轉的路徑
    
     		該路徑的設定要結合open-type引數一起遵循API跳轉的原則,跳轉方式決定url能填寫tabBar上面的路徑
     
     3. open-type 跳轉方式
     		
     		除了上面提到的五種跳轉方式,這裡還多了一個功能
     		open-type=exit時退出當前小程式