小新活動中的一些覆盤記錄(uniapp活動)

以前不知道覆盤的好處,但 太受益之後,你會的。有思想的回憶,也是有意思。

判斷裝置

在同一個路由下,pc和h5顯示的佈局完全不一樣,我需要判斷一下,方法如下:

// 判斷是否是移動裝置isMobilePost(){ // #ifdef H5 if (navigator。userAgent。indexOf(‘Mobile’) === -1) { this。isMobile = false; } // #endif}, // 說明 //#ifdef:if defined 僅在某平臺存在 //#ifndef:if not defined 除了某平臺均存在 條件編譯用特殊註釋作為標記,在編譯時根據這些特殊的註釋,將註釋裡面的程式碼編譯到不同平臺。

點選獲取驗證碼

//templete佈局獲取驗證碼{{verifyTip+‘秒’}}

//方法執行// 倒計時timedown:function(num){ let that = this; if(num == 0){ that。verifyShow = true; // 是否顯示獲取驗證碼 this。downTimeTotal = 60; //重新賦值 return clearTimeout(); }else{ that。verifyShow = false;// 是否顯示獲取驗證碼 setTimeout(function() { that。downTimeTotal = num-1; that。timedown(num-1); }, 1000);//定時每秒減一 }}, //點選獲取驗證碼 getCode:function(){ //手機號校驗成功後 this。$refs。form。validateField([‘tel’])。then((res)=>{ console。log(‘表單資料資訊:’, res); this。timedown(this。verifyTip);//執行倒計時 this。request({ url: interfaces。getCode, method: ‘POST’, data:{ “tel”:res。tel }, success: ((r) => { // 獲取驗證碼返回的結果。。。 }) //end }); })。catch((err)=>{ // 表單校驗驗失敗,err 為具體錯誤資訊 // 其他邏輯處理 // 。。。 }); },

頁面跳轉/頁面棧

框架以棧的形式管理當前所有頁面, 當發生路由切換的時候,頁面棧的表現如下:

路由方式

頁面棧表現

觸發時機

初始化

新頁面入棧

uni-app 開啟的第一個頁面

開啟新頁面

新頁面入棧

呼叫 API uni。navigateTo 、使用元件

頁面重定向

當前頁面出棧,新頁面入棧

呼叫 API uni。redirectTo 、使用元件

頁面返回

頁面不斷出棧,直到目標返回頁

呼叫 API uni。navigateBack 、使用元件 、使用者按左上角返回按鈕、安卓使用者點選物理back按鍵

Tab 切換

頁面全部出棧,只留下新的 Tab 頁面

呼叫 API uni。switchTab 、使用元件 、使用者切換 Tab

重載入

頁面全部出棧,只留下新的頁面

呼叫 API uni。reLaunch 、使用元件

//開啟新頁面uni。navigateTo({ url: `/pages/index?id=${item。id}&token=${this。token}` });//重載入方法toIndex(index) { console。log(‘作品頁面的選擇’ + index); uni。reLaunch({ url: `/pages/index?id=${index}` });},

api介面地址檔案封裝

在專案中,我們不同的頁面要請求不一樣的地址,並且我們的域名(有測試,正式換的),為了便於維護,統一將請求地址放在指定檔案內。

//1、interfaces。js 檔案,內容如下:let domain = ‘https://dev。xxx。com/api’;if (process。env。NODE_ENV === ‘production’) { domain = ‘https://www。xxx。com/api’;}console。log(domain);const interfaces = { // 獲取驗證碼 getCode: domain + ‘/sendCode’, // 登入介面 login:domain + ‘login’,}module。exports = interfaces;//2、在有請求的頁面,如index。vue

頁面用到的配置

// pages。json 檔案中{ “path”: “pages/index”, “style”: { “navigationBarTitleText”: “當前頁面的title”, “navigationStyle”:“custom”, //當前頁面不需要導航 “enablePullDownRefresh”:true, //配置後,可以下拉重新整理,上拉載入 “onReachBottomDistance”:100 }}, // 滑動到距離底部100px的時候觸發 onReachBottom() { console。log(‘滑動到距離底部100px的時候觸發,可以放 。。業務邏輯’); }, //下拉執行的時候觸發 onPullDownRefresh () { //放要執行的動作。。。。 wx。stopPullDownRefresh() //停止下拉重新整理效果的api,如果發現進入重新整理狀態無法停止,可以用這個 },