江苏龙网

  1. 主页 > 生活百科 > >

uniapp框架开发技巧

uniapp

一 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)=>{//成功执行resres(data)},fail:(err)=>{//失败执行rejrej(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/awaitrequestTest(options){return new Promise((res,rej)=>{uni.request({...options,success:(data)=>{//成功执行resres(data)},fail:(err)=>{//失败执行rejrej(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 = https://www.isolves.com/it/cxkf/kj/2022-03-08/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 = https://www.isolves.com/it/cxkf/kj/2022-03-08/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.把一个值作为对象的keylet obj = this.screen.list[this.screen.currentIndex] let value = https://www.isolves.com/it/cxkf/kj/2022-03-08/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.value6.对象的遍历for(let key in this.testObj){this.testObj[key].value = https://www.isolves.com/it/cxkf/kj/2022-03-08/'赋值'}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并停止遍历 。都不满足才返回falselet 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 = https://www.isolves.com/it/cxkf/kj/2022-03-08/'new value' ， 该组件不会立即重新渲染 。当刷新队列时 ， 组件会在下一个事件循环“tick”中更新 。多数情况我们不需要关心这个过程 ， 但是如果你想基于更新后的 DOM 状态来做点什么 ， 这就可能会有些棘手 。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考 ， 避免直接接触 DOM ， 但是有时我们必须要这么做 。为了在数据变化之后等待 Vue 完成更新 DOM ， 可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数将在 DOM 更新完成后被调用 。*/
 
//意思就是vue在更新视图层得数据时是异步得 ， 可是有时候我们在代码中想要等待数据完全渲染上去dom节点之后再进行获取节点信息操作 。比如使用selectorQuery.select(selector) 等相关api时 ， 如果直接使用有时候会获取不到正确的数据 ， 此时可以通过this.$nextTick(callback)的方式在回调函数里面进行操作dom节点


推荐阅读


上一篇：JPG 与 JPEG：这些图像文件格式有什么区别？

下一篇：安全代码审计-PHP