小程序实现新用户判断并跳转激活的方法


Posted in Javascript onMay 20, 2019

前言

上周接了一个小项目赚点外快,原以为很简单结果被卡在一个小坑爬了好半天

它是一个供电力局使用的报修小程序,需要特定用户在第一次使用时进行激活操作,通俗的说就是当某用户打开时,判断此用户是否激活过,若未激活则进入激活页面,若已经激活则直接进入首页面。

逻辑上很简单,但是在实现上碰到坑了。

小程序实现新用户判断并跳转激活的方法

小程序实现新用户判断并跳转激活的方法

上图为已激活用户或不需要激活的用户打开小程序后进入的第一个页面,下图为未激活用户打开小程序后进入的第一个页面。

思考过程

"pages": [ "pages/index/index", "pages/active/active", "pages/index/add", "pages/my/my", "pages/mylist/mylist", "pages/home/home", "pages/rating/rating", "pages/login/mylogin", "pages/login/login", "pages/detail/detail", "pages/mylist/list", "pages/mylist/mydetail" ],

而在app.json中必须引入全部的页面,且第一个引入的页面为首页面。

但是判断逻辑必须要在用户一打开小程序后就进行,但事实是必须先打开index页面(即上图),所以按照微信小程序的生命周期,我首先想到的办法是将判断逻辑写在index页的onload函数中。

在加载过程中进行判断,从而跳转。

var currentUser = Bmob.User.current();
var currentUserId = currentUser.id;
var User = Bmob.Object.extend("_User");
var queryUser = new Bmob.Query(User);
  queryUser.get(currentUserId, {
   success: function (result) {
    console.log(result)
var status = result.attributes.status;
var usertype = result.attributes.usertype;
if (status==null&& usertype == 1) {
     wx.navigateTo({
      url: '/pages/active/active?lineid=' + lineid
})
}
},
   error: function (object, error) {
}
});

以上代码就是我写入onload中的判断逻辑,先获取当前用户的id,从而进入数据库查询,获取此用户的status状态和userType类型,只有status为false且userType为1时,才进行跳转激活。

但是实际在测试时发现一个始料未及被忽视的问题。

wx.login({
success: function (res) {
 user.loginWithWeapp(res.code).then(function (user) {
var openid = user.get("authData").weapp.openid;
  console.log(user, 'user', user.id, res);
if (user.get("nickName")) {
// 第二次访问
   console.log(user.get("nickName"), 'res.get("nickName")');
var currentUser = Bmob.User.current();
var currentUserId = currentUser.id;
var User = Bmob.Object.extend("_User");
var queryUser = new Bmob.Query(User);
   queryUser.get(currentUserId, {
    success: function (result) {
var status = result.attributes.status;
var usertype = result.attributes.usertype;
     console.log(status);
},
    error: function (object, error) {
     console.log(result);
}
});
} else {
   wx.setStorageSync('status', false),
   wx.setStorageSync('usertype', 1),
//保存用户其他信息
   wx.getUserInfo({
    success: function (result) {
var userInfo = result.userInfo;
var nickName = userInfo.nickName;
var avatarUrl = userInfo.avatarUrl;
var u = Bmob.Object.extend("_User");
var query = new Bmob.Query(u);
// 这个 id 是要修改条目的 id,你在生成这个存储并成功时可以获取到,请看前面的文档
     query.get(user.id, {
      success: function (result) {
// 自动绑定之前的账号
       result.set('nickName', nickName);
       result.set("userPic", avatarUrl);
       result.set("openid", openid);
       result.set("isbind", 0);
       result.set("status", false);
       result.set("usertype", 1);
       result.save();
}
});
     wx.setStorageSync('openid', openid)
     wx.setStorageSync('username', user.get("username"))
     wx.setStorageSync('userpic', avatarUrl)
     wx.setStorageSync('nickname', nickName)
}
});
}

}, function (err) {
  console.log(err, 'errr');
});
}
});

因为我在app.js中进行了微信登录,即获取到了用户授权信息后,将用户的微信名、头像以及初始化的userType和status写入数据库中。以上为此逻辑的代码。

故在用户授权前,数据库中此用户的userType和status是空的,而这时候按照微信小程序的生命周期,第一个首页面已经加载完毕并显示,即onload在判断时,此用户的userType和status状态为空,则认为此用户无需激活。而用户点完授权后,即使存入正确的userType和status已经于事无补。

用户第一次打开小程序,可见此时页面已经加载完毕,但是用户还未授权微信登录

小程序实现新用户判断并跳转激活的方法

而这时候的用户数据均为空

小程序实现新用户判断并跳转激活的方法

用户点击确定授权后才会写入数据,但这时候页面的onload早已执行完毕

小程序实现新用户判断并跳转激活的方法

只能再寻找其它的解决办法。

解决过程

总结了一下刚才失败的原因,是因为在执行onload时,逻辑判断语句并没有取到正确的参数。所以要想办法在onload函数执行前,就传入正确的参数。

于是尝试另外一种方法,使用本地缓存进行传值判断。

即用户在一打开小程序加载app.js时,先在本地缓存中将用户的userType和status值存入,然后在index页面的onLoad函数中使用判断,这样就不存在微信登录授权的时间差。

于是需要在用户第一次使用时进行初始化参数并存入缓存以供onload函数判断,而用户如果不是第一次使用,则直接从数据库中查找到此用户并将此用户的userType和status取出存入本地缓存,供onLoad函数判断。

于是首先在app.js中加入以下两行代码进行新用户初始化缓存存入

wx.setStorageSync('status', false),
wx.setStorageSync('usertype', 1),

加入以下两行代码进行老用户获取参数进行缓存存入

queryUser.get(currentUserId, {
  success: function (result) {
var status = result.attributes.status;
var usertype = result.attributes.usertype;
   wx.setStorageSync('status', status)
   wx.setStorageSync('usertype', usertype)
   console.log(status);
},
  error: function (object, error) {
   console.log(result);
}
});

然后在index的onload函数中写入以下逻辑,进行判断。

var status = wx.getStorageSync('status')
var usertype = wx.getStorageSync('usertype')
// console.log(usertype)
if (!status &&!usertype) {
  wx.navigateTo({
   url: '/pages/active/active?lineid=' + lineid
})
} else if (status ==false && usertype == 1) {
  wx.navigateTo({
   url: '/pages/active/active?lineid=' + lineid
})
}

这里要注意,因为考虑到了缓存溢出的情况,多加了判断status和userType非空的操作。

于是至此这个坑被完美的填了,从入坑到找坑到爬坑耗时两小时。

总结

还是像上一篇文章说的,这是一个填坑的过程,第一个吃螃蟹的人不光要被夹,还得告诉后人怎么撬开螃蟹壳。

以上所述是小编给大家介绍的小程序实现新用户判断并跳转激活的方法详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript下数值型比较难点说明
Jun 07 Javascript
Textarea与懒惰渲染实现代码
Jan 04 Javascript
JavaScript栏目列表隐藏/显示简单实现
Apr 03 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
Nov 11 Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
Dec 16 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
Feb 27 Javascript
jQuery Plupload上传插件的使用
Apr 19 jQuery
详细分析单线程JS执行问题
Nov 22 Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
node实现socket链接与GPRS进行通信的方法
May 20 #Javascript
JS求1到任意数之间的所有质数的方法详解
May 20 #Javascript
react 中父组件与子组件双向绑定问题
May 20 #Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 #Javascript
一文搞懂ES6中的Map和Set
May 20 #Javascript
详解vue 在移动端体验上的优化解决方案
May 20 #Javascript
vue-i18n结合Element-ui的配置方法
May 20 #Javascript
You might like
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
PHP实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
JavaScript URL参数读取改进版
2009/01/16 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
JS立即执行的匿名函数用法分析
2019/11/04 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
JavaScript异步操作的几种常见处理方法实例总结
2020/05/11 Javascript
js实现轮播图特效
2020/05/28 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
深入学习python多线程与GIL
2019/08/26 Python
解析python实现Lasso回归
2019/09/11 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
药学专业大学生个人的自我评价
2013/11/04 职场文书
工商管理毕业生推荐信
2013/12/24 职场文书
30年同学聚会感言
2014/01/30 职场文书
规划编制实施方案
2014/03/15 职场文书
敬老模范事迹
2014/05/21 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python
Oracle用户管理及赋权
2022/04/24 Oracle