头图
需求是,生成带不同参数的H5二维码去跳转小程序。
传递不同参数,生成不同的二维码,扫不同的二维码进入小程序处理不一样参数下的业务逻辑。
H5二维码去跳转小程序可以查看另一篇文章H5打开跳转小程序的心路历程

小程序存在冷启动和热启动的问题:

  • 冷启动:如果用户首次打开,或小程序销毁后被用户再次打开,此时小程序需要重新加载启动,即冷启动。
  • 热启动:如果用户已经打开过某小程序,然后在一定时间内再次打开该小程序,此时小程序并未被销毁,只是从后台状态进入前台状态,这个过程就是热启动。
  • 什么时候销毁小程序:如果小程序占用的内存过高或者小程序切入后台超过5分钟以上没有操作,那么微信会销毁小程序

冷启动的时候完全没问题,但是在热启动时就是不走onLaunch或者onLoad的代码了,所以就不能实时的获取到项目所需要的参数了。

热启动时:在onShow里调用,这里不管冷启动还是热启动都会执行,可以通过uni.getLaunchOptionsSync()来获取相关参数

    onShow() {
        let target = uni.getLaunchOptionsSync();
        if(!target.query.id){
            // do something...
        }
    }

但是这还有一个问题,就是每次页面展示时,都会调用这个onShow方法,如果业务上不需要这样,那么这样的话会出现一些其它的bug。
这边想了好多方式去解决这个问题,比如在获取到参数之后,把当前页面的参数去掉,或者改一下url,经尝试发现没有办法去掉。所以在vuex里面放了一个状态,在接收到参数之后就改一下状态 ,在下次在调用的时候去过滤一下。

    onShow() {
        let target = uni.getLaunchOptionsSync();
        if(!target.query.id && !this.$store.state.isProcCompleted){
            // do something...
            this.$store.commit('setStateAttr', {
                key: 'isProcCompleted',
                val: true
            })
        }
    }

vuex下的index.js

    const store = new Vuex.Store({
        state:{
            isProcCompleted:false,//处理是否完成,默认是没有
        },
        mutations: {
            //更新state数据
            setStateAttr(state, param){
                if(param instanceof Array){
                    for(let item of param){
                        state[item.key] = item.val;
                    }
                }else{
                    state[param.key] = param.val;
                }
            },
        }
    })

这样的话,还是有问题,用户扫码进来后,可以保证在当时没有问题,但是用户关了小程序在很近的时间,再次扫码进入热启动时,vuex里面的isProcCompleted也是不会改变的,还是true不能满足需求,于是,我们可以在用户右上角退出小程序时把vuex里面的参数恢复到默认值false
监听方法:onHide

    onHide: function() {
        console.log('App Hide')
        this.$store.commit('setStateAttr', {
            key: 'isProcCompleted',
            val: false
        })
    }

闫雪
37 声望9 粉丝