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

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   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
一 js部分:1.promise方式的封装函数//1.想要执行完一个函数之后再传入一个回调函数getData(callback = false){if(typeof callback === &#39;function&#39;){callback()}}//...【详细内容】
2022-03-08  Tags: uniapp  点击:(12)  评论:(0)  加入收藏
引言CRM改造项目需要研发涵盖网上营业厅(web版)主要业务能力的移动端掌厅APP,项目整体开发周期较短,且要求支持多平台上线(IOS、安卓、H5等)。每个平台要求相对一致的展示效果和用...【详细内容】
2019-11-25  Tags: uniapp  点击:(165)  评论:(0)  加入收藏
▌简易百科推荐
近几年以来,javascript 和 jquery:交互式前端 Web 开发已经成为非常有名的前端开发项目。 作为一名前端开发人员,如果你正在使用 JavaScript,你能说出哪个 JavaScript 框架对用...【详细内容】
2022-03-10  粤嵌教育    Tags:框架   点击:(10)  评论:(0)  加入收藏
一 js部分:1.promise方式的封装函数//1.想要执行完一个函数之后再传入一个回调函数getData(callback = false){if(typeof callback === &#39;function&#39;){callback()}}//...【详细内容】
2022-03-08  前端技术唠嗑    Tags:uniapp   点击:(12)  评论:(0)  加入收藏
准备测试代码 一个测试接口public interface UserService { void doProcess(long userId);} 以及他的实现类@Servicepublic class DefaultUserService implements UserSe...【详细内容】
2022-03-03  奋斗的三岁半    Tags:SpringAOP   点击:(13)  评论:(0)  加入收藏
1 我们在用Django编程时,会发现,经常需要用到列表、详情、修改这些操作。这些操作几乎可以满足数据编辑的大部分要求。那能不能像YII2脚手架功能一样直接提供一个通用的模板类...【详细内容】
2022-03-03  二次元美女8    Tags:Django 框架   点击:(13)  评论:(0)  加入收藏
1. 第一种import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.CorsRegistry;import org.springfram...【详细内容】
2022-03-02  Mcally    Tags:SpringBoot 跨域   点击:(14)  评论:(0)  加入收藏
漂亮的 Vue 3 组件库,风格大气国际化,自带 admin 框架,开箱即用,要是有中文文档就更好了。关于 Vuestic UIVuestic UI 是一套由 Epicmax 团队开发的一套基于 Vue.js 的 web 开...【详细内容】
2022-03-02  那些免费的砖    Tags:Vue3 组件库   点击:(22)  评论:(0)  加入收藏
2022年可选择的三个Rust Web框架:actix-web、warp和axum。 actix-web:4.0.0-rc.35,134,720Actix Web 是一个功能强大、实用且速度极快的 Rust Web 框架 warp:0.3.24,114,095以...【详细内容】
2022-02-25  解道Jdon    Tags:Web框架   点击:(28)  评论:(0)  加入收藏
众所周知,安卓手机安装谷歌商店,需要安装谷歌框架,也就是常说的谷歌三件套,包括google service framework,google play service,google play store。虽然可以通过GO谷歌安装器来安...【详细内容】
2022-02-24  网络饭票    Tags:谷歌框架   点击:(23)  评论:(0)  加入收藏
作者:王晨彦我们在开发应用的时候,一般都会引入 SDK,而大部分 SDK 都要求我们在 Application 中初始化,当我们引入的 SDK 越来越多,就会出现 Application 越来越长,如果 SDK 的初...【详细内容】
2022-02-24  像程序那样思考    Tags:框架   点击:(21)  评论:(0)  加入收藏
踩坑记:在传递List<Integer> typeIds作为参数时,MyBatis foreach不能获取到参数,使用Integer[] typeIds就可以了。主要代码:1、接口<!-- 获取站点列表 -->List<Station> getList...【详细内容】
2022-02-23  编程课堂    Tags:MyBatis   点击:(21)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条