uniapp

Posted on Edited on

路由栈缓存与登录返回

通过getCurrentPages获取 VNode,遍历后得到其中的 route.通过uni.navigateBack()跳转回之前页面.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
backPage() {
    let pages = getCurrentPages()
    let routerList = pages.map(item => {
      return item.route;
    });
    let delta = 0
    //查找数组中有多少登录页
    routerList.forEach(url => {
      if (url == 'pages/workbench/login/index') {
        delta++
      }
    })
    //如果路由中全是登录页,则跳转到首页
    if (delta == routerList.length) {
      this.$u.route({
        url: 'pages/index/index',
        type: 'tab'
      })
    } else {
      //否则就返回相应的页面
      uni.navigateBack({
        delta,
      });
    }
},

生命周期

应用生命周期

只在App.vue中.
onlaunch 之类

页面生命周期

onload 之类

组件生命周期

created 之类

Page 页面生命周期函数执行顺序

beforeCreate => onLoad => onShow => created => beforeMount => onReady => mounted

刷新数据后

beforeUpdate => updated

监听实体按键后退

页面生命周期中的onBackPress.
注意: 由于 uni.navigateBack() 同样会触发 onBackPress 函数。因此在 onBackPress 中直接调用 uni.navigateBack() 并始终返回 true 会引发死循环。
此时，需要根据 onBackPress 的回调对象中的 from 值来做处理，当来源是 ‘navigateBack’ 时，返回 false。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<template>
    <view>
    </view>
</template>

<script>
    export default {
        data() {
            return {};
        },
        onBackPress(options) {
            if (options.from === 'navigateBack') {
                return false;
            }
            this.back();
            return true;
        },
        methods: {
            back() {
                uni.navigateBack({
                    delta: 2
                });
            }
        },
    }
</script>

<style>

</style>

封装中断请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//在请求类中设置requestTask,uiapp存在中止方法requestTask.abort()
//将所有请求放置到请求数组中,当某一项请求完成则清除,

let requestTask = null;
		return new Promise((resolve, reject) => {
			options.complete = (response) => {

				Vue.prototype.requestArray = Vue.prototype.requestArray.filter(item => {
					return item.id !== requestTask.id
				});
        //...
      requestTask = uni.request(options);
			requestTask.id = guid(); //使用随机数
			Vue.prototype.requestArray = [...Vue.prototype.requestArray,requestTask]

		})

    //调用
    clearTask(){
      this.requestArray.map(item => {
        item && item.abort()
      })
    },

      //调用时添加到对应发请求处,如果该请求需要终止,就可以终止

uniapp 中 eCharts 在 h5 端导致 tooltip 不显示问题

因为会在 h5 端先判断环境,直接为 wx 环境导致,所以应将 wx 设置为undefined或{}.

1
2
3
4
5
6
7
8
9
//main.ts
window.wx  = {}
//如果是ts,全部变量声明也要写
//xx.d.ts
declare global {
  interface Window {
    wx?: any;
  }
}