uniapp学习历程

1.不同盒子元素设置随机背景色

//遍历数据，创建多个元素，需求是每个元素都会在多个颜色范围内设置不同的背景颜色
<view class="tags" v-for="(citem, cindex) in list" :key="cindex">
  <text :style="[randomColor()]">{{ citem }}</text>
</view>

//js:创建一个随机色的方法，目前是固定的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开发微信小程序，h5，app的主体内容和导航栏与状态栏的适配

//顶部手机状态栏一般只需要加高导航栏，或者预留一块空白区域即可避免状态栏遮挡导航栏
//导航栏和主体内容之间，一般会进行计算后得到高度
//一般顶部导航栏都是使用了定位，所以会脱离文档流，这里我们使用了导航栏组件，而导航栏一般都是44px的高度
<u-navbar title="导航栏" autoBack></u-navbar>
<view class="list" :style="{ position: 'absolute', top: sHeight }">
  //主体内容区域，写业务逻辑代码
</view>

//js:
// 计算距离顶部安全高度(顶部状态栏的高度加上导航栏的高度，如果导航栏高度不固定，可以通过获取节点信息来获取导航栏高度)
getStatusHeight() {
    this.sHeight = uni.getSystemInfoSync().statusBarHeight + 44 + 'px';
    console.log(this.sHeight);
},

3.商城项目评论数、销量、库存等数字的格式化体现

//业务需求是把所有的有关数字类的数据（除了金钱，时间等）做一个格式化处理，例如1230 => 1000+
//辅助工具类代码可以自己创建一个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开发 页面通过拼接路由地址的传参方式（复杂型数据）

//假设有2个页面
index.vue
cindex.vue

//index.vue:
//路由跳转，index页面跳转到cindex并携带参数
uni.navigateTo({
    url: `/pagesA/cindex/cindex?dataList=${encodeURIComponent(JSON.stringify(dataList))}`
});

//接收由index页面带来的参数
//cindex.vue:
onLoad(option) {
    this.dataList = JSON.parse(decodeURIComponent(option.dataList));
},

5.跨越多页面,组件之间的传参

//uni.$emit()  发送事件(vue则是this.$emit())具体用法类似
//uni.$on 或者 uni.$once  接收事件，并做后续的逻辑处理
//uni.$off 移除或卸载事件（避免多个页面事件杂乱，会影响到其他页面）

6.基于原生框架的上拉和下拉刷新逻辑

//在page.js中注册页面时
{
    "path": "pages/index/index",
    "style": {
        "navigationBarTitleText": "首页",
        "enablePullDownRefresh": true,   //开启刷新
        "navigationStyle": "custom"
    }
},

//上拉事件生命周期和onload同级（上拉刷新）
onPullDownRefresh() {
    //业务逻辑
    uni.stopPullDownRefresh(); //逻辑执行完停止刷新事件
},

//触底事件生命周期和onload同级（下拉加载）
onReachBottom() {
    //业务逻辑
},

7.倒计时

computetTime(current, create) {
        let st = current.replace(/\-/g, '/'), //当前服务器实时时间
              ct = create.replace(/\-/g, '/'); //创建订单的时间
        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.返回上一页并刷新数据。当前方法是根据获取路由信息，得到页面实例，最终获取页面的刷新事件进行实现（需求场景：订单详情取消订单后返回上一页订单列表并刷新数据）

//封装一个函数：（该方法有弊端，必须有跳转页面的路由记录才能进行使用）
//num 自行传参，根据不同的场景，类型是数字，传2就是上一个页面，以此类推
backReload(num){
    let pages = getCurrentPages(); //得到进入过的页面的列表
    let beforePage = pages[pages.length - num]; 
    beforePage.$vm.$refs.paging.reload()   //$vm是页面信息，包括页面的data,逻辑函数等等（$refs.paging.reload() 是我这边列表的刷新方法）
}

9.uniapp获取页面节点信息

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