您当前的位置:首页 > 电脑百科 > 程序开发 > 框架

uniapp框架开发技巧

时间:2022-03-08 14:06:11  来源:  作者:前端技术唠嗑

一 js部分:

1.promise方式的封装函数

//1.想要执行完一个函数之后再传入一个回调函数
getData(callback = false){
if(typeof callback === 'function'){
callback()
}
}

//使用
this.getData(()=>{
console.log('执行回调')
})


//2.promise风格封装
requestTest(options){
return new Promise((res,rej)=>{
uni.request({
...options,
success:(data)=>{
//成功执行res
res(data)
},
fAIl:(err)=>{
//失败执行rej
rej(err)
}
})
})
}

//使用
this.reqyestTest({
url:this.url,
method:'GET',
token:true
}).then(res=>{
//这里的res是上面success里res(data)返回回来的data数据
console.log(res)
}).catch(err=>{
//这里的err是上面fail里rej(err)返回的err信息
console.log(err)
})


//3.当需要使用几个promise函数的时候就头疼了,代码嵌套十分严重 这时候可以使用async/await
requestTest(options){
return new Promise((res,rej)=>{
uni.request({
...options,
success:(data)=>{
//成功执行res
res(data)
},
fail:(err)=>{
//失败执行rej
rej(err)
}
})
})
}

//使用
async __init(){
let [error,result] = await this.requestTest({
url: 'http://ceshi3.dishait.cn/api/index_category/data',
method: 'GET'
})

//正确
if(result.code===200){
console.log(result)
}

//错误
if(error){
return uni.showToast({
title: error.errMsg, //错误信息
icon:'none'
});

}
}

2.替换列表里的某个对象,使用拓展字符串或者$set

//方式一 直接复制
// let item = this.tableData[this.editIndex]
// item.name = this.form.name
// item.order = this.form.order
// item.status = this.form.status
// item.type = this.form.type
// item.value = this.form.value

//方式2 解构赋值
let item = {
...this.form,
value_list:this.value_list
}

this.tableData.splice(this.editIndex,1,item)

//方式3 $set 官方文档 vm.$set(vm.items, indexOfItem, newValue)

this.$set(this.tabbleData,this.editIndex,item)

3.复制一个新列表 防止引用赋值 使用拓展字符串 以后凡是使用es5的concact就换成es6的拓展字符串

let data = res.map(v=>{
return {
id:v.id,
url:v.url
}
})

let list = []
if(index===-1){
list = [...this.banners,...data]
}else{
list = [...this.banners]
list[index] = data[0]
}

4.把一个值作为对象的key


let obj = this.screen.list[this.screen.currentIndex]
	let value = obj.status === 1 ? 'asc':'desc'
    return {
		[obj.key]:value
	}
//相当于 return{
        // 	key:value
        // }
}

5.判断是否为数组

if(Array.isArray(this.couponUserItem) && this.couponUserItem.coupon && this.couponUserItem.coupon) return this.couponUserItem.coupon.value

6.对象的遍历

for(let key in this.testObj){
this.testObj[key].value = '赋值'
}

7.数组的遍历与过滤

//1. forEach 直接修改原素组里的值
let arr = [1, 2,3, 4];
let r1=arr.forEach(v=>{
return v+=1;
});

// arr= [2,3,4,5]


//2. map 用于对数组或对象进行处理,并返回处理之后的数组
let arr = [1,2,3,4];
let brr = arr.map(v=>{
return v<=2
})

//也可以简写为
let brr = arr.map(v=> v<=2)

//brr = [1,2]

//3. filter 用于筛选出符合要求的数据,并返回该数据集合 以数组形式返回满足条件(判断结果为true)
//的值。如果都不满足,则返回一个空数组

let arr = [1,2,3,4];
let brr = arr.filter(v=>{
if (item % 2 !== 0) {
return item;
}
})

//brr = [1,3]


//4.some 有一个满足,就返回true并停止遍历。都不满足才返回false
let arr = [{id:1,value:'a'},{id:2,value:'b'},{id:3,value:'c'},{id:4,value:'d'}]
let brr = arr.some(v=>{
return arr.id <= 2
})

//brr = [{id:1,value:'a'},{id:2,value:'b'}]

//5.every 数组中的每一个元素都满足条件才返回true。有一个不满足,就返回false并停止寻找
//与some相反

8.异步更新队列

//以下摘自官方文档

/*Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。例如,当你设置 vm.someData = 'new value',该组件不会立即重新渲染。当刷新队列时,组件会在下一个事件循环“tick”中更新。多数情况我们不需要关心这个过程,但是如果你想基于更新后的 DOM 状态来做点什么,这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM,可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。*/

 

//意思就是vue在更新视图层得数据时是异步得,可是有时候我们在代码中想要等待数据完全渲染上去dom节点之后再进行获取节点信息操作。比如使用selectorQuery.select(selector) 等相关api时,如果直接使用有时候会获取不到正确的数据,此时可以通过this.$nextTick(callback)的方式在回调函数里面进行操作dom节点

 

this.$nextTick(()=>{
let view = uni.createSelectorQuery().in(this).select(".test");

view.fields({
size: true,
scrollOffset: true
}, data => {
console.log("得到节点信息" + JSON.stringify(data));
console.log("节点的宽为" + data.width);
}).exec();
})

//或者

await this.$nextTick()
let view = uni.createSelectorQuery().in(this).select(".test");

view.fields({
size: true,
scrollOffset: true
}, data => {
console.log("得到节点信息" + JSON.stringify(data));
console.log("节点的宽为" + data.width);
}).exec();

封装全局函数

//main.js


//权限跳转 跳转到该页面前验证是否登录
Vue.prototype.navigateTo = (options)=>{
//判断用户是否登录
if(!store.state.user.loginStatus){
uni.showToast({
title: '请先登录',
icon:'none'
});

return uni.navigateTo({
url: '/pages/login/login'
});
}

//通过验证
uni.navigateTo(options);
}

mixin注入 有的时候有一部分代码需要在多个页面重复使用到,这时候就该使用mixin注入了

//loading.js里的代码

export default {
// 所在页面没有beforeReady属性就注入到所在页面的data中,若有该属性则优先使用页面中定义的那个
data(){
return{
beforeReady:true
}
},

//所在页面有onReady生命周期就合并
onReady() {
this.beforeReady = false
}
}



//其他页面 通过import导入进来,再使用mixins注册一下就能注入该页面了

<script>
import loading from "@/common/mixin/loading.js"

export default{
mixins:[loading]
}
</script>


Tags:uniapp   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
想要微信小程序+Uniapp?XBoot开源项目助你快速开发!
大家好,我是墨林,今天给大家推荐一款基于Spring Boot 2.x开发的微信小程序平台项目:XBoot。前言随着当前互联网技术的不断发展,前后端分离的开发模式越来越受到大多数开发者的欢...【详细内容】
2023-11-08  Search: uniapp  点击:(261)  评论:(0)  加入收藏
开源即时通讯IM框架MobileIMSDK的Uniapp端开发快速入门
► 相关链接: ① MobileIMSDK-Uniapp端的详细介绍 ② MobileIMSDK-Uniapp端的开发手册new(* 精编PDF版)一、理论知识准备您需要对Uniapp和Vue开发有所了解: 1)Uniapp 官方入门教...【详细内容】
2023-05-19  Search: uniapp  点击:(340)  评论:(0)  加入收藏
uniapp框架开发技巧
一 js部分:1.promise方式的封装函数//1.想要执行完一个函数之后再传入一个回调函数getData(callback = false){if(typeof callback === &#39;function&#39;){callback()}}//...【详细内容】
2022-03-08  Search: uniapp  点击:(482)  评论:(0)  加入收藏
跨平台移动端框架UniApp的应用实践
引言CRM改造项目需要研发涵盖网上营业厅(web版)主要业务能力的移动端掌厅APP,项目整体开发周期较短,且要求支持多平台上线(IOS、安卓、H5等)。每个平台要求相对一致的展示效果和用...【详细内容】
2019-11-25  Search: uniapp  点击:(704)  评论:(0)  加入收藏
▌简易百科推荐
Qt与Flutter:在跨平台UI框架中哪个更受欢迎?
在跨平台UI框架领域,Qt和Flutter是两个备受瞩目的选择。它们各自具有独特的优势,也各自有着广泛的应用场景。本文将对Qt和Flutter进行详细的比较,以探讨在跨平台UI框架中哪个更...【详细内容】
2024-04-12  刘长伟    Tags:UI框架   点击:(6)  评论:(0)  加入收藏
Web Components实践:如何搭建一个框架无关的AI组件库
一、让人又爱又恨的Web ComponentsWeb Components是一种用于构建可重用的Web元素的技术。它允许开发者创建自定义的HTML元素,这些元素可以在不同的Web应用程序中重复使用,并且...【详细内容】
2024-04-03  京东云开发者    Tags:Web Components   点击:(8)  评论:(0)  加入收藏
Kubernetes 集群 CPU 使用率只有 13% :这下大家该知道如何省钱了
作者 | THE STACK译者 | 刘雅梦策划 | Tina根据 CAST AI 对 4000 个 Kubernetes 集群的分析,Kubernetes 集群通常只使用 13% 的 CPU 和平均 20% 的内存,这表明存在严重的过度...【详细内容】
2024-03-08  InfoQ    Tags:Kubernetes   点击:(22)  评论:(0)  加入收藏
Spring Security:保障应用安全的利器
SpringSecurity作为一个功能强大的安全框架,为Java应用程序提供了全面的安全保障,包括认证、授权、防护和集成等方面。本文将介绍SpringSecurity在这些方面的特性和优势,以及它...【详细内容】
2024-02-27  风舞凋零叶    Tags:Spring Security   点击:(59)  评论:(0)  加入收藏
五大跨平台桌面应用开发框架:Electron、Tauri、Flutter等
一、什么是跨平台桌面应用开发框架跨平台桌面应用开发框架是一种工具或框架,它允许开发者使用一种统一的代码库或语言来创建能够在多个操作系统上运行的桌面应用程序。传统上...【详细内容】
2024-02-26  贝格前端工场    Tags:框架   点击:(50)  评论:(0)  加入收藏
Spring Security权限控制框架使用指南
在常用的后台管理系统中,通常都会有访问权限控制的需求,用于限制不同人员对于接口的访问能力,如果用户不具备指定的权限,则不能访问某些接口。本文将用 waynboot-mall 项目举例...【详细内容】
2024-02-19  程序员wayn  微信公众号  Tags:Spring   点击:(41)  评论:(0)  加入收藏
开发者的Kubernetes懒人指南
你可以将本文作为开发者快速了解 Kubernetes 的指南。从基础知识到更高级的主题,如 Helm Chart,以及所有这些如何影响你作为开发者。译自Kubernetes for Lazy Developers。作...【详细内容】
2024-02-01  云云众生s  微信公众号  Tags:Kubernetes   点击:(55)  评论:(0)  加入收藏
链世界:一种简单而有效的人类行为Agent模型强化学习框架
强化学习是一种机器学习的方法,它通过让智能体(Agent)与环境交互,从而学习如何选择最优的行动来最大化累积的奖励。强化学习在许多领域都有广泛的应用,例如游戏、机器人、自动驾...【详细内容】
2024-01-30  大噬元兽  微信公众号  Tags:框架   点击:(71)  评论:(0)  加入收藏
Spring实现Kafka重试Topic,真的太香了
概述Kafka的强大功能之一是每个分区都有一个Consumer的偏移值。该偏移值是消费者将读取的下一条消息的值。可以自动或手动增加该值。如果我们由于错误而无法处理消息并想重...【详细内容】
2024-01-26  HELLO程序员  微信公众号  Tags:Spring   点击:(92)  评论:(0)  加入收藏
SpringBoot如何实现缓存预热?
缓存预热是指在 Spring Boot 项目启动时,预先将数据加载到缓存系统(如 Redis)中的一种机制。那么问题来了,在 Spring Boot 项目启动之后,在什么时候?在哪里可以将数据加载到缓存系...【详细内容】
2024-01-19   Java中文社群  微信公众号  Tags:SpringBoot   点击:(88)  评论:(0)  加入收藏
站内最新
站内热门
站内头条