2021-04-17

uniapp记录

uniapp路由的两种跳转

1.@tap事件跳转

methods: {
            openinfo(e) {
                console.log(e)
                var newsid = e.currentTarget.dataset.newsid ;    
                uni.navigateTo({
                    url: '../info/info?newsid='+newsid,
                    success: res => {},
                    fail: () => {},
                    complete: () => {}
                });
            }
        }

2.navigator 标签

<navigator url="../hello/hello" open-type="navigate">
     <view class="struct">
         I am {{student.age}} yeas old </br>
         I have skills such as {{student.skill[0]}},{{student.skill[1]}}
     </view>
</navigator>

uniapp路由跳转问题

uni.reLaunch({object})

关闭所有页面，打开到应用内的某个页面

Url 必填项 需要跳转的应用内页面路径，可以携带参数，如果跳转的是tabBar页面则不可以带参数

Success 成功回调方法

Fail 失败回调方法

Complete 接口调用结束后的回调方法

举例

触发跳转方法
uni.reLaunch({
url:'test?id=1',
success:(res)=>{
},
fail:(res)=>{},
complete:(res)=>{}
})
跳转到test页面接收参数
onLoad:function(msg){
console.log(msg.id)
}

在App.vue 里面
onLaunch:function(option){
console.log(option)
}

uni.navigateTo 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。 页面之间来回跳转回最多存储10次就跳转不动了

uni.redirectTo 关闭当前页面，跳转到应用内的某个页面。 用于频繁的来回跳转页面

uni.reLaunch关闭所有页面，打开到应用内的某个页面

uni.switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

uni.navigateBack 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

生命周期

应用的生命周期

onLaunch 主要用于获取小程序是通过什么方式进入的

在App.vue 里面
onLaunch:function(option){
console.log(option)
}

onShow 进入小程序

onHide离开小程序

页面的生命周期

onLoad执行一次

onShow执行多次

onReady 执行一次

onHide执行多次

组件的生命周期

beforeCreate

create

beforeMount 常用挂载之前

`mounted 常用 挂载完成可以在这发送ajax请求

beforeDestory

destoryed

路由与页面跳转

uni.navigateTo 保留当前页面，跳转到应用内的某个页面，使用 uni.navigateBack可以返回到原页面。 页面之间来回跳转回最多存储10次就跳转不动了 uni.redirectTo 关闭当前页面，跳转到应用内的某个页面。 用于频繁的来回跳转页面

uni.reLaunch关闭所有页面，打开到应用内的某个页面

uni.switchTab 跳转到 tabBar 页面， 并关闭其他所有非 tabBar 页面。

uni.navigateBack 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。