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


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 相关文章推荐
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 Javascript
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
JS事件添加和移出的兼容写法示例
Jun 20 Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 Javascript
angularJs的ng-class切换class
Jun 23 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
浅谈Node.js之异步流控制
Oct 25 Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
解决angular2 获取到的数据无法实时更新的问题
Aug 31 Javascript
jQuery无冲突模式详解
Jan 17 jQuery
vue基础之事件v-onclick="函数"用法示例
Mar 11 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
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
PHP+XML 制作简单的留言本 图文教程
2009/11/02 PHP
php 空格,换行,跳格使用说明
2009/12/18 PHP
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
2009/05/25 Javascript
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
详解jQuery中的元素的属性和相关操作
2015/08/14 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
js仿百度音乐全选操作
2017/01/13 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
使用jquery Ajax实现上传附件功能
2018/10/23 jQuery
layui树形菜单动态遍历的例子
2019/09/23 Javascript
简单使用webpack打包文件的实现
2019/10/29 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
JS实现手写 forEach算法示例
2020/04/29 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
Pycharm运行加载文本出现错误的解决方法
2019/06/27 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
东方红海科技面试题软件测试方面
2012/02/08 面试题
应届毕业生的个人自我鉴定
2013/10/24 职场文书
应届行政管理专业个人自我评价
2013/12/28 职场文书
大学生社会实践自我鉴定
2014/03/24 职场文书
雷锋精神演讲稿
2014/05/13 职场文书
2014年环保工作总结
2014/11/26 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书
推普标语口号大全
2015/12/26 职场文书
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android