uniapp实例教程,uniapp低代码开发平台

  

  一射流研究…部分承诺方式的封装函数//1.想要执行完一个函数之后再传入一个回调函数get data(callback=false){ if(callback===' function '){ callback()} }//使用this.getData(()={console.log('执行回调)})//2 .承诺风格封装请求测试(选项){ return new Promise((RES,rej)={uni.request({.选项,成功:(数据)={//成功执行resres(data)},fail:(err)={//失败执行rej rej(err)} })}//使用这个。reqyesttest({ URL : this。URL,method :“GET”,token:true}).然后(res={//这里的表示留数是上面成功里资源(数据)返回回来的数据数据console.log(res)}).catch(err={//这里的犯罪是上面失败里拒绝(错误)返回的犯罪信息console.log(err)})//3 .当需要使用几个承诺函数的时候就头疼了,代码嵌套十分严重这时候可以使用async/awaitrequestTest(options){ return new Promise((RES,rej)={uni.request({.选项,成功:(数据)={//成功执行resres(data)},fail:(err)={//失败执行rej rej(err)} })}//使用async _ _ init(){ let=等待此消息。请求测试({ URL : ' http://史策3。拒绝。cn/API/index _ category/data ',method: 'GET'})//正确如果(结果。code===200){控制台。log(result)}//错误if(错误){返回uni。显示toast({ title :错误。errmsg,//错误信息图标: '无' });}}2.替换列表里的某个对象,使用拓展字符串或者$set//方式一直接复制//let item=this.tableData//item。名称=this.form.name//项目。订单=this.form.order//项目。状态=this.form.status//项目。类型=this.form.type//项目。价值=this.form.value//方式2解构赋值let item={.this.form,value _ list : this。value _ list }这个。表格数据。拼接(这个。编辑索引,1,item)//方式3美元一套官方文档虚拟机.$set(vm.items,indexOfItem,newValue)this .$ set(这个。表数据,this.editIndex,item)3 .复制一个新列表防止引用赋值使用拓展字符串以后凡是使用es5的契约就换成es6的拓展字符串let data=RES . map(v={ return { id :v。id,URL :v。URL } })let list=if(index===-1){ list=.横幅,data}else{list=.this . banner list=data 0 } 4 .把一个值作为对象的关键字母obj=this。屏幕。列表字母值=obj。状态===1?asc':'desc '返回{:value}//相当于return{ //key:value //}}5 .判断是否为数组if(数组。是数组(这个。couponuseritem)这个。couponuseritem。couponuseritem。couponuseritem。优惠券)返回这个。couponuseritem。优惠券。价值6 .对象的遍历因为(让我们键入这个。{ this。测试对象。值='赋值'}7.数组的遍历与过滤//1.为每一个直接修改原素组里的值设arr=1,2,3,4;设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 = '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:}</script>

相关文章