需求是,生成带不同参数的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
})
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。