1.不同盒子元素設置隨機背景色

//遍歷數(shù)據(jù)，創(chuàng)建多個元素，需求是每個元素都會在多個顏色范圍內設置不同的背景顏色
<view class="tags" v-for="(citem, cindex) in list" :key="cindex">
  <text :style="[randomColor()]">{{ citem }}</text>
</view>

//js:創(chuàng)建一個隨機色的方法，目前是固定的3中顏色之間隨機，返回拼接好的css即可
randomColor() {
      let arr = ['50, 166, 124', '125, 144, 94', '51, 124, 212'];
      let color = Math.floor(Math.random() * 3);
      return {
          color: 'rgb(' + arr[color] + ')',
          'border-color': 'rgb(' + arr[color] + ')'
      };
  }

2.uniapp開發(fā)微信小程序，h5，app的主體內容和導航欄與狀態(tài)欄的適配

//頂部手機狀態(tài)欄一般只需要加高導航欄，或者預留一塊空白區(qū)域即可避免狀態(tài)欄遮擋導航欄
//導航欄和主體內容之間，一般會進行計算后得到高度
//一般頂部導航欄都是使用了定位，所以會脫離文檔流，這里我們使用了導航欄組件，而導航欄一般都是44px的高度
<u-navbar title="導航欄" autoBack></u-navbar>
<view class="list" :style="{ position: 'absolute', top: sHeight }">
  //主體內容區(qū)域，寫業(yè)務邏輯代碼
</view>

//js:
// 計算距離頂部安全高度(頂部狀態(tài)欄的高度加上導航欄的高度，如果導航欄高度不固定，可以通過獲取節(jié)點信息來獲取導航欄高度)
getStatusHeight() {
    this.sHeight = uni.getSystemInfoSync().statusBarHeight + 44 + 'px';
    console.log(this.sHeight);
},

3.商城項目評論數(shù)、銷量、庫存等數(shù)字的格式化體現(xiàn)

//業(yè)務需求是把所有的有關數(shù)字類的數(shù)據(jù)（除了金錢，時間等）做一個格式化處理，例如1230 => 1000+
//輔助工具類代碼可以自己創(chuàng)建一個js放置該代碼,或者使用vue的過濾器filter,相關知識點自行搜索。這樣就可以進行全局使用,復用比較方便
export function handleNum(num) {
    if (num < 1000) {
        return num
    }
    if (num < 10000 && num >= 1000) {
        let numArr = ((num / 1000) + '').split('.')
        if (numArr.length > 1) {
            if (numArr[1][0] === '0') {
                return numArr[0] + '000+'
            } else {
                return numArr[0] + numArr[1][0] + '00+'
            }
        } else {
            return (numArr[0] + '000+')
        }
    } else if (num >= 10000) {
        let numArr = ((num / 10000) + '').split('.')
        if (numArr.length > 1) {
            if (numArr[1][0] === '0') {
                return numArr[0] + '萬+'
            } else {
                return numArr[0] + '.' + numArr[1][0] + '萬+'
            }
        } else {
            return (numArr[0] + '萬+')
        }
    }

}

4.uniapp開發(fā) 頁面通過拼接路由地址的傳參方式（復雜型數(shù)據(jù)）

//假設有2個頁面
index.vue
cindex.vue

//index.vue:
//路由跳轉，index頁面跳轉到cindex并攜帶參數(shù)
uni.navigateTo({
    url: `/pagesA/cindex/cindex?dataList=${encodeURIComponent(JSON.stringify(dataList))}`
});

//接收由index頁面帶來的參數(shù)
//cindex.vue:
onLoad(option) {
    this.dataList = JSON.parse(decodeURIComponent(option.dataList));
},

5.跨越多頁面,組件之間的傳參

//uni.$emit()  發(fā)送事件(vue則是this.$emit())具體用法類似
//uni.$on 或者 uni.$once  接收事件，并做后續(xù)的邏輯處理
//uni.$off 移除或卸載事件（避免多個頁面事件雜亂，會影響到其他頁面）

6.基于原生框架的上拉和下拉刷新邏輯

//在page.js中注冊頁面時
{
    "path": "pages/index/index",
    "style": {
        "navigationBarTitleText": "首頁",
        "enablePullDownRefresh": true,   //開啟刷新
        "navigationStyle": "custom"
    }
},

//上拉事件生命周期和onload同級（上拉刷新）
onPullDownRefresh() {
    //業(yè)務邏輯
    uni.stopPullDownRefresh(); //邏輯執(zhí)行完停止刷新事件
},

//觸底事件生命周期和onload同級（下拉加載）
onReachBottom() {
    //業(yè)務邏輯
},

7.倒計時

computetTime(current, create) {
        let st = current.replace(/\-/g, '/'), //當前服務器實時時間
              ct = create.replace(/\-/g, '/'); //創(chuàng)建訂單的時間
        let ts = new Date(st).getTime(),
              tc = new Date(ct).getTime();
        let cm = 30 * 60 * 1000 - (ts - tc);  //固定30分鐘倒計時
        this.runBack(cm);
    },
runBack(cm) {
    if (cm > 0) {
        cm > 60000
            ? (this.rocallTime =
                (new Date(cm).getMinutes() < 10 ? '0' + new Date(cm).getMinutes() : new Date(cm).getMinutes()) +
                ':' +
                (new Date(cm).getSeconds() < 10 ? '0' + new Date(cm).getSeconds() : new Date(cm).getSeconds()))
            : (this.rocallTime = '00:' + (new Date(cm).getSeconds() < 10 ? '0' + new Date(cm).getSeconds() : new Date(cm).getSeconds()));
        let _msThis = this;
        this.timeOut = setTimeout(function() {
            cm -= 1000;
            _msThis.runBack(cm);
        }, 1000);
    } else {
        uni.navigateBack({
            delta: 1
        });
        setTimeout(() => {
            this.tui.toast('該訂單支付已超時');
        },300)
        if (this.timeOut) {
            this.timeOut = null;
            clearTimeout(this.timeOut);
        }
    }
},

8.返回上一頁并刷新數(shù)據(jù)。當前方法是根據(jù)獲取路由信息，得到頁面實例，最終獲取頁面的刷新事件進行實現(xiàn)（需求場景：訂單詳情取消訂單后返回上一頁訂單列表并刷新數(shù)據(jù)）

//封裝一個函數(shù)：（該方法有弊端，必須有跳轉頁面的路由記錄才能進行使用）
//num 自行傳參，根據(jù)不同的場景，類型是數(shù)字，傳2就是上一個頁面，以此類推
backReload(num){
    let pages = getCurrentPages(); //得到進入過的頁面的列表
    let beforePage = pages[pages.length - num]; 
    beforePage.$vm.$refs.paging.reload()   //$vm是頁面信息，包括頁面的data,邏輯函數(shù)等等（$refs.paging.reload() 是我這邊列表的刷新方法）
}

9.uniapp獲取頁面節(jié)點信息

let selectorQuery = uni.createSelectorQuery();
    selectorQuery
        .selectAll('.className').boundingClientRect(data => {      //.className是類名
            console.log(data)
        })
.exec();