uniapp框架开发技巧 (mixin注入)等

下面是使用uniapp框架开发app时用到过的一些技巧,可能有一些与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)=>{
                //成功执行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();

 

二view部分

1.v-model的使用

//vue的v-model给form组件提供了非常便捷的用法,可以直接在data里声明一个变量,则无需再写方法来修改这个值。比如input组件,就不需要再写@input的方法来修改
比如input,textarea,checkbox,radio,select 

//原来的使用
<input :value="yourInput" @input="onInputEvent">

data(){
    return{
        yourInput:''
    }
}


onInputEvent(e){
    this.yourInput = e.detaio.value
}


//v-model
<input v-model="yourInput">


data(){
    return{
        yourInput:''
    }
}

2.

 

2.组件  .sync的使用

<!-- 单选按钮组 -->
    <zcmRadioGroup :label="label" :selected.sync="label.selected"></zcmRadioGroup>


//组件里的方法
onChangeRadio(index){
	this.$emit('update:selected',index)
}

3. 插槽的快捷用法  #插槽名

<!-- 对应在自定义组件loading-plus里定义的三个插槽-->
<loading-plus v-if="beforeReady">
    <template #left></template>
    <template #center></template>
    <template #right></template>
</loading-plus>

 

三功能部分

1.监听从上个页面返回回来的数据  例如选择地址

 

需要选择地址页面:

onLoad() {
			
	//开启监听选择收货地址事件
	uni.$on('choosePath',(res)=>{
		this.path = res;
	})
},
		
//页面卸载
	onUnload() {
		//关闭监听选择收货地址事件
	uni.$off('choosePath',()=>{
		console.log('关闭监听选择收货地址');
	})
},
	
methods: {
	openPathList(){
	    uni.navigateTo({
	        url: '../user-path-list/user-path-list?type=choose'
		});
	},
}	

地址列表页面:

onLoad(option) {
	if(option.type==='choose'){
		this.isChoose = true
	}
},

methods:{
    //选择收获地址
	choosePath(item){
		if(this.isChoose){
			//通知订单页面修改地址
			uni.$emit('choosePath',item)
			//关闭当前页面
			uni.navigateBack({
				delta: 1
			});
		}
	}
}

2.封装全局函数

//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);
}

3.封装全局组件

//main.js

//全局加载中
import loadingPlus from "@/common/mixin/loading-plus.vue"
Vue.component('loading-plus',loadingPlus)

4.定义全局变量

//App.vue


/*
全局变量  获取全局变量的方法:getApp().globalData.text
*/
globalData:{
	text:''
}, 

 

5.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>

 

6.vuex的使用   有空在更

  • 6
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值