文章目录
1、生命周期
<script>
export default {
data() {
return {
msg: '我是data定义的数据'
};
},
// 1.页面的生命周期
onLoad(options) {
console.log('detail04 onLoad');
},
onShow() {
console.log('detail04 onShow');
console.log(this);
},
onReady() {
console.log('detail04 onReady');
},
onHide() {
console.log('detail04 onHide');
},
onUnload() {
console.log('detail04 onUnload');
},
onPullDownRefresh() {
console.log('detail04 onPullDownRefresh');
setTimeout(() => {
// 关闭下拉刷新的图标
uni.stopPullDownRefresh()
}, 1000)
},
onReachBottom() {
console.log('detail04 onReachBottom');
},
// 2.Vue组件的生命周期
beforeCreate() {
console.log('detail04 beforeCreate');
},
created() {
console.log('detail04 created');
},
beforeMount() {
console.log('detail04 beforeMount');
},
mounted() {
console.log('detail04 mounted');
},
beforeDestroy() {
console.log('detail04 beforeDestroy');
},
destroyed() {
console.log('detail04 destroyed');
}
}
</script>
ript setup>
import { ref, onBeforeMount, onMounted } from 'vue'
import {
onLoad,
onShow,
onReady,
onHide,
onUnload,
onPullDownRefresh,
onReachBottom
} from '@dcloudio/uni-app'
// 1.页面的生命周期
onLoad(() => {
console.log('detail05 onLoad');
})
onShow(() => {
console.log('detail05 onShow');
})
onReady(() => {
console.log('detail05 onReady');
})
onHide(() => {
console.log('detail05 onHide');
})
onUnload(() => {
console.log('detail05 onUnload');
})
onPullDownRefresh(() => {
console.log('detail05 onPullDownRefresh');
setTimeout(() => {
uni.stopPullDownRefresh()
}, 1000)
})
onReachBottom(() => {
console.log('detail05 onReachBottom');
})
// 2.Vue组件的生命周期
onBeforeMount(() => {
console.log('detail05 onBeforeMount');
})
onMounted(() => {
console.log('detail05 onMounted');
})
</script>
2、页面路由
<template>
<view class="content">
<view class="">1.路由(组件)</view>
<navigator url="/pages/detail01/detail01" open-type="navigate">
<button type="default">01-detail navigate</button>
</navigator>
<navigator url="/pages/detail01/detail01" open-type="redirect">
<button type="default">02-detail redirect</button>
</navigator>
<navigator url="/pages/category/category" open-type="switchTab">
<button type="default">03-category</button>
</navigator>
<view class="">2.路由(API)</view>
<button type="default" @click="goToDetail01()">04-detail navigate</button>
<button type="default" @click="goToDetail02()">04-detail redirect</button>
<button type="default" @click="goToDetail03()">04-detail switchTab</button>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
// 1.页面的生命周期
onLoad() {
console.log('home onLoad');
},
onShow() {
console.log('home onShow');
},
onReady() {
console.log('home onReady');
},
onHide() {
console.log('home onHide');
},
onPullDownRefresh() {
console.log('home onPullDownRefresh');
},
onReachBottom() {
console.log('home onReachBottom');
},
// 2.组件的生命周期
beforeCreate() {
},
created() {
},
methods: {
acceptDataFromDetail03(value) {
console.log('这是从detail03传递过来的数据:', value);
},
goToDetail01() {
uni.navigateTo({
url: "/pages/detail01/detail01"
})
},
goToDetail02() {
uni.redirectTo({
url: "/pages/detail01/detail01"
})
},
goToDetail03() {
uni.switchTab({
url: "/pages/category/category"
})
},
goToDetail04() {
uni.navigateTo({
url: "/pages/detail01/detail01?name=liujun&id=200",
success(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFormHomePage', {
data: '我是从Home Page 传递过来的数据' ,
})
}
})
},
goToDetail05() {
uni.navigateTo({
url: "/pages/detail02/detail02?name=liujun&id=400",
})
},
goToDetail06() {
uni.navigateTo({
url:'/pages/detail03/detail03'
})
},
goToDetail07() {
uni.navigateTo({
url:'/pages/detail04/detail04'
})
},
goToDetail08() {
uni.navigateTo({
url:'/pages/detail05/detail05'
})
}
}
}
</script>
<style>
</style>
3、页面间通讯
3.1 正向数据传递
3.2 逆向数据传递
<template>
<view>
<navigator :delta="1" open-type="navigateBack">
<button type="default" >返回(组件)</button>
</navigator>
<button type="default" @click="goBackHome">返回(API)</button>
</view>
</template>
<script>
export default {
data() {
return {
};
},
onLoad(options) {
console.log('接受url传递过来的数据:', options);
},
methods: {
goBackHome() {
uni.navigateBack({
delta: 1
})
// 触发一个全局的事件( 在触发事件之前一定要先监听 )
uni.$emit('acceptDataFromDetail03', {
data: {
desc: '这个在detail03传递到Home页面的数据'
}
})
}
}
}
</script>
<style lang="scss">
</style>
3.3 事件总线
<template>
<view>
<navigator :delta="1" open-type="navigateBack">
<button type="default" >返回(组件)</button>
</navigator>
<button type="default" @click="goBackHome">返回(API)</button>
</view>
</template>
<script>
export default {
data() {
return {
};
},
onLoad(options) {
console.log('接受url传递过来的数据:', options);
},
methods: {
goBackHome() {
uni.navigateBack({
delta: 1
})
// 触发一个全局的事件( 在触发事件之前一定要先监听 )
uni.$emit('acceptDataFromDetail03', {
data: {
desc: '这个在detail03传递到Home页面的数据'
}
})
}
}
}
</script>
<style lang="scss">
</style>
4、网络请求的封装
- server/index.js
const TIME_OUT = 60000
const BASE_URL = 'http://152.136.185.210:7878/api/hy66'
class HYRequest{
request(url,methods,data) {
return new Promise((resolve,reject)=>{
uni.request({
url:BASE_URL + url,
method:methods || 'GET',
timeout:TIME_OUT,
data:data,
success(res) {
resolve(res.data)
},
fail(err){
reject(err)
}
})
})
}
get(url,params) {
return this.request(url,'Get',params)
}
post(url,params){
return this.request(url,'POST',params)
}
}
export default HYRequest()
5、数据缓存
6、组件
6.1 组件生命周期
7、页面传递参数 setup
7.1 正向传递数据
<template>
<view>
{{props.name}}
</view>
</template>
<script setup>
import {ref,getCurrentInstance} from 'vue'
import {onLoad} from '@dcloudio/uni-app'
// 方式1: navigate
onLoad(options=>{
console.log('接收home传递的参数',options)
})
// 方式2: props
const props = defineProps({
name:String,
age:Number
})
// 方式3.通过emit
const $instance = ref(getCurrentInstance().proxy)
onLoad(options=>{
const eventChannel = $instance.value.getOpenerEventChannel()
eventChannel.on('emitHome2Detail',(res)=>{
console.log(res)
})
})
</script>
<style lang="scss">
</style>
7.2 逆向传递数据
<template>
<view>
<button type="default" @click="goBack">返回</button>
</view>
</template>
<script setup>
import {
getCurrentInstance,
ref
} from 'vue'
const $instance = ref(getCurrentInstance().proxy) // this
function goBack() {
uni.navigateBack({
delta: 1
})
const eventChannel = $instance.value.getOpenerEventChannel()
// 触发事件, 将detail02的数据传递给Home页面
eventChannel.emit('acceptDataFormDetail02', {
data: '这里是detail02传递给Home页面的数据'
})
}
</script>
<style lang="scss">
</style>
7.3 逆向传递 事件总线
<template>
<view>
<button type="default" @click="goBack">返回</button>
</view>
</template>
<script setup>
function goBack() {
uni.navigateBack({
delta: 1
})
// 触发事件( 通过事件总线 )
uni.$emit('acceptDataFormDetail03', {
data: '这里的数据是从detail03传递到home页面'
})
}
</script>
<style lang="scss">
</style>
8、跨平台兼容