uniapp框架开发技巧

博主：茶白
发布时间：2021 年 11 月 12 日
暂无评论
7015字数
分类： uniapp vue

# JS部分

> ### 1.promise方式的封装函数

```js
//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

```js
//方式一 直接复制
// 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的拓展字符串

```js

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

```js

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

> ### 5.判断是否为数组

```js

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

> ### 6.对象的遍历

```js

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

> ### 7.数组的遍历与过滤

```js
//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.[异步更新队列](https://cn.vuejs.org/v2/guide/reactivity.html#%E5%BC%82%E6%AD%A5%E6%9B%B4%E6%96%B0%E9%98%9F%E5%88%97)

```js
//以下摘自官方文档
/*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的使用

```js
//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.组件  .sync的使用**

```js

    <zcmRadioGroup :label="label" :selected.sync="label.selected"></zcmRadioGroup>
 
 
//组件里的方法
onChangeRadio(index){
	this.$emit('update:selected',index)
}

```

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

```js

<loading-plus v-if="beforeReady">
    <template #left></template>
    <template #center></template>
    <template #right></template>
</loading-plus>

```

# 功能部分

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

需要选择地址页面：

```js

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'
		});
	},
}
```

地址列表页面：

```js

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

> ### 2.封装全局函数

```js
//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.封装全局组件

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

> ### 4.定义全局变量

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

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

```js
//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>
```

最后修改：2021 年 11 月 12 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复

评论 *

私密评论

名称 *

🎲

邮箱 *

地址 *

qnlhlbtzyz
作者以非凡的视角解读平凡，让文字焕发出别样的光彩。
yfrynkdfhc
内容的丰富性和深度让人仿佛置身于知识的海洋，受益匪浅。
zbhgvcirlo
作者以非凡的视角解读平凡，让文字焕发出别样的光彩。
rnntuaazaw
作者的观点新颖且实用，让人在阅读中获得了新的思考和灵感。
ijvwqqiaar
场景转换稍显突兀，可增加过渡描写。

uniapp框架开发技巧

茶白 • 2021 年 11 月 12 日

# JS部分

> ### 1.promise方式的封装函数

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

}
}

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

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

```js

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

```js

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

> ### 5.判断是否为数组

```js

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

> ### 6.对象的遍历

```js

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

> ### 7.数组的遍历与过滤

```

> ### 8.[异步更新队列](https://cn.vuejs.org/v2/guide/reactivity.html#%E5%BC%82%E6%AD%A5%E6%9B%B4%E6%96%B0%E9%98%9F%E5%88%97)

```

# **view部分**

> ### 1.v-model的使用

```

> ### **2.组件  .sync的使用**

```js

    <zcmRadioGroup :label="label" :selected.sync="label.selected"></zcmRadioGroup>
 
 
//组件里的方法
onChangeRadio(index){
	this.$emit('update:selected',index)
}

```

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

```

# 功能部分

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

需要选择地址页面：

```js

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'
		});
	},
}
```

地址列表页面：

```js

> ### 2.封装全局函数

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

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

> ### 3.封装全局组件

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

> ### 4.定义全局变量

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

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

uniapp框架开发技巧

发表评论取消回复

在线影视视频网站合集

js奇淫技巧（一）

常见的app scheme大全

uniapp图片未加载成功前处理方案,防止闪烁

浏览器console引入jq

windows代理服务器脚本设置仅访问指定github或指定站点

crypto-js aes 前端数据加解密

css3动画大全（从上、左下、左、右进入页面）Animate列表

docker-compose ports和expose的区别

将window的location的search字符串转换成一个对象

uniapp框架开发技巧

发表评论 取消回复

uniapp框架开发技巧

发表评论取消回复