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


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解析与序列化json数据(三)json的解析探讨
Feb 01 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 Javascript
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
JS图片轮播与索引变色功能实例详解
Jul 06 Javascript
浅谈Angular路由守卫
Aug 26 Javascript
浅谈Webpack打包优化技巧
Jun 12 Javascript
Vue的双向数据绑定实现原理解析
Feb 17 Javascript
JS实现省市县三级下拉联动
Apr 10 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
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
一步一步学习PHP(2)――PHP类型
2010/02/15 PHP
完善CodeIgniter在IDE中代码提示功能的方法
2014/07/19 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
八大排序算法的Python实现
2021/01/28 Python
用Eclipse写python程序
2018/02/10 Python
详解Python中的动态属性和特性
2018/04/07 Python
python线程中同步锁详解
2018/04/27 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
英国皇室御用百货:福南梅森(Fortnum & Mason)
2017/12/03 全球购物
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
放假通知怎么写
2015/08/18 职场文书
《小乌鸦爱妈妈》教学反思
2016/02/19 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书