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

前言

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

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

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

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

思考过程

"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非空的操作。

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

总结

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

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

(0)

相关推荐

  • 微信小程序之页面跳转和参数传递的实现

    微信小程序之页面跳转和参数传递的实现 前言: 在微信小程序里面的跳转其实和html里的超链接a差不多,我们实现跳转可以通过标签实现,也可以通过js实现,下面一一演示给大家看一下. 在展示demo前,我们需要先简单的建好项目文件夹做好准备.如下: 标签实现 小程序里面有一个类似于a标签的navigator标签,用来做跳转处理. index页面: <navigator url="../navigator/navigator?title=我是navi">跳转到新的页面</n

  • 微信小程序 跳转页面的两种方法详解

    微信小程序 跳转页面 小程序页面有2种跳转,可以在wxml页面或者js中: 1,在wxml页面中: <navigator url="../index/index">跳转到新页面</navigator> <navigator url="../index/index" open-type="redirect">在当前页打开</navigator> <navigator url="../i

  • 微信小程序开发之好友列表字母列表跳转对应位置

    微信小程序开发之好友列表字母列表跳转对应位置 前言: 在小程序里实现微信好友列表点击右侧字母列表跳转对应位置效果.写了个demo,核心部分很简单,所以没多少注释,如果遇到问题就加群问我吧. 核心技术点: 1.小程序scroll-view组件的scroll-into-view, scroll-with-animation. scroll-y属性. 2.小程序的touch事件的应用. 3.Js定时器的应用. view页面代码: index.wxml class="container" sc

  • 微信小程序实现页面跳转传值以及获取值的方法分析

    本文实例讲述了微信小程序实现页面跳转传值以及获取值的方法.分享给大家供大家参考,具体如下: 在安卓中页面跳转传值都是通过bundle,现在研究一下小程序的列表跳转及页面传值. my.wxml <view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" sr

  • 微信小程序出现wx.navigateTo页面不跳转问题的解决方法

    本文实例讲述了微信小程序出现wx.navigateTo页面不跳转问题的解决方法.分享给大家供大家参考,具体如下: 今天在做微信小程序的时候,做的商品购买流程.流程是这样的: 商品展示-->商品详情-->下单页面-->下单详情页面-->支付结果页面-->跳转订单详情页面. 但是在支付成功之后,点击按钮跳转,发现怎么也跳转不了到订单详情页面,前后log都能打印出来,证明已经执行了wx.navigateTo方法,但是跳转不成功,而且,坑爹的是也不报错. 翻看微信小程序开发文档,参考

  • 微信小程序实现点击文字页面跳转功能【附源码下载】

    本文实例讲述了微信小程序实现点击文字页面跳转功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.js文件 Page({ data:{ // text:"这是一个页面" }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面

  • 微信小程序 页面跳转和数据传递实例详解

    微信小程序 页面跳转和数据传递 1.先导 在Android中,我们Activity和Fragment都有栈的概念在里面,微信小程序页面也有栈的概念在里面.微信小程序页面跳转有四种方式: 1.wx.navigateTo(OBJECT): 2.wx.redirectTo(OBJECT): 3.wx.switchTab(OBJECT): 4.wx.navigateBack(OBJECT) 5.使用实现对应的跳转功能: 分析: 其中navigateTo是将原来的页面保存在页面栈中,在跳入到下一个页面的时

  • 微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法

    本文实例讲述了微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法.分享给大家供大家参考,具体如下: 很多项目都会有消息记录页,即列表页,紧接着就是点击列表的某一项进入到消息的详情页,这里承接上一篇文章,继续分享如何从列表的item项跳转到下一个页面. 一.效果图 从左边的列表页调到右边的详情页 二.页面之间的跳转 首先要看的是页面的跳转,微信小程序有三种跳转方式可供选择: 1.保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.navi

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

    前言 上周接了一个小项目赚点外快,原以为很简单结果被卡在一个小坑爬了好半天 它是一个供电力局使用的报修小程序,需要特定用户在第一次使用时进行激活操作,通俗的说就是当某用户打开时,判断此用户是否激活过,若未激活则进入激活页面,若已经激活则直接进入首页面. 逻辑上很简单,但是在实现上碰到坑了. 上图为已激活用户或不需要激活的用户打开小程序后进入的第一个页面,下图为未激活用户打开小程序后进入的第一个页面. 思考过程 "pages": [ "pages/index/index&quo

  • 微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)

    一.函数节流(throttle) **函数节流:一个函数执行一次后,只有大于设定的执行周期后才会执行第二次**.有个需要频繁触发函数,出于优化性能角度,在规定时间内,只让函数触发的第一次生效,后面不生效. ### 1.如何实现 其原理是用时间戳来判断是否已到回调该执行时间,记录上次执行的时间戳,然后每次触发 scroll 事件执行回调,回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段,如果是,则执行,并更新上次执行的时间戳,如此循环: function throttle(fn

  • 微信小程序getPhoneNumber获取用户手机号

     微信小程序getPhoneNumber获取用户手机号 小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等, 有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPhoneNumber这个组件通过button来实现(别的标签无效).将button中的open-type="getPhoneNumber",并且绑定bindgetphonenumber事件获取回调. <button open-type="getPhoneNumber"

  • 微信小程序页面传多个参数跳转页面的实现方法

    这里举例跳转两个参数 传递多少个也可以 这里传参数 我写作 data-item data-id 来绑定 同事加了点击事件bindtap 在index.js 在 data 里我写的是假数据 在跳转页面的函数里传e 后面定义的东西根据e来确定 可以在console打印 console.log(e) 这样我们就拿到了 传递的数据 然后进行定义等 这里跳转详情页的函数 wx.navigateTo 这是一种跳转的方法 tabBar页面要用wx.switchTab 路径后面加上 jsonStr 等 在跳转的

  • 微信小程序防止多次点击跳转(函数节流)

    场景 在使用小程序的时候会出现这样一种情况:当网络条件差或卡顿的情况下,使用者会认为点击无效而进行多次点击,最后出现多次跳转页面的情况,就像下图(快速点击了两次): 解决办法 然后从 轻松理解JS函数节流和函数防抖 中找到了解决办法,就是函数节流(throttle):函数在一段时间内多次触发只会执行第一次,在这段时间结束前,不管触发多少次也不会执行函数. /utils/util.js: function throttle(fn, gapTime) { if (gapTime == null ||

  • 微信小程序如何通过用户授权获取手机号(getPhoneNumber)

    这篇文章主要介绍了微信小程序如何通过用户授权获取手机号(getPhoneNumber),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 小程序有一个获取用户很便捷的api,就是通过getPhoneNumber获取用户的已经绑定微信的手机号码.有一点要大家注意,现在微信和注重用户体验,有些方法都是需要用户主动去触发才能调用的,比如getPhoneNumber. 官方文档:https://developers.weixin.qq.com/minipr

  • 微信小程序实现限制用户转发功能的实例代码

    在上篇文章给大家提到微信小程序实现禁止分享代码实例,感兴趣的朋友可以点击查阅.今天继续给大家分享微信小程序实现限制用户转发功能,一起看看吧! 在小程序的开发过程,你是不是也经常遇到这么一个需求,用户希望某个页面只能自己转发分享,不希望被别人再次分享出去,接下来我们聊聊如何实现这个功能. 限制用户转发需要解决两个问题: 关闭系统右上角菜单栏中的转发功能 隐藏群聊会话中长按转发分享的功能 1.关闭系统右上角菜单栏中的转发功能 通过调用微信 API:wx.hideShareMenu({ }) 关闭当前

  • 微信小程序实现获取用户信息替换用户名和头像到首页

    目录 一.形成空白文件 二.小程序页面路径配置 三.修改小程序页面 四.与WXML玩耍 1.插入文字 2.插入图片 3.分割代码 五.与wxss玩耍 1.处理图片 2.处理文字 3.调整布局 4.长度单位rpx(responsive pixel): 六.获取用户资料 1.完善wxml 2.结果输出到界面 3.优化程序 一.形成空白文件 1.点击打开目录 2.删除除了project.config.json(项目配置文件)以外所有文件. 3.新建“app.json” 4.接下来我们在app.js

  • 微信小程序后台解密用户数据实例详解

     微信小程序后台解密用户数据实例详解 微信小程序API文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html openId : 用户在当前小程序的唯一标识 因为最近根据API调用https://api.weixin.qq.com/sns/jscode2session所以需要配置以下服务,但是官方是不赞成这种做法的, 而且最近把在服务器配置的方法给关闭了.也就是说要获取用户openid,地区等信息只能在后台获取. 一下是官方的

随机推荐