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();
