下面是使用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.value6.对象的遍历
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>
4748
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
