专栏首页编程微刊微信小程序弹框提示绑定手环实例

微信小程序弹框提示绑定手环实例

图片.png

今天想聊一聊小程序里面存在的一些逻辑问题,拿手上的这个小程序来说,(这个小程序是开发出来玩的,每个人手上有一个手环,带着手环时候的心率,运动步数,血压数据都会展现在这个小程序里面,一目了然)用户第一次登陆的时候,是没有绑定手环ID的,这个时候就需要弹出提示框,提示确定跳转到绑定手环id的页面,绑定成功之后,就会跳转到首页,首页显示手环的电量,手环拥有者的心率运动血压等具体的数据。

js逻辑原理很简单:以下代码仅供参考

//获取应用实例
const app = getApp()

Page({
  data: {
    
  },
  onLoad: function () {
    var that = this;
    app.getOpenid().then(function (res) {
      if (res.status == 200) {
        //查询数据
        that.getData(wx.getStorageSync('openid'));

      }
    });
  },

  onShow: function () {
    var that = this;
    //查询数据
    that.getData(wx.getStorageSync('openid'));
  },

  getData: function (openid) {
    var that = this;
    wx.request({
      url: "https://pig.intmote.com/bison_xc/wx/" + openid + ".do",
      method: 'GET',
      header: {
        'Content-type': 'application/json'
      },
      success: function (res) {
        //wx.showToast({title: res.data+''})
        if (res.data == '') {
          wx.setStorageSync('deviceId', '');//清空deviceId
          wx.setStorageSync('flag', false);//修改状态
          wx.setStorageSync('battery', "");//清空数据
          that.setData({ hr: "" });
          that.setData({ battery: "" });
          that.setData({ calorie: "" });
          that.setData({ steps: "" });
          that.setData({ kilo: "" });
          that.setData({ blood: "" });
          wx.showModal({
            title: '手环绑定',
            content: '小主,快去绑定手环吧',
            success: function (res) {
              if (res.confirm) {
                wx.redirectTo({
                  url: '/pages/bind/bind'
                })
              }
            }
          })
        } else {
          wx.setStorageSync('flag', true);//设置状态
          wx.setStorageSync('deviceId', res.data.deviceId);//存储deviceId
          if (res.data.hr == null) return;
          //赋值显示
          that.setData({ hr: res.data.hr + "/min" });
          that.setData({ battery: res.data.battery + "%" });
          that.setData({ calorie: res.data.calorie + "卡" });
          that.setData({ steps: res.data.steps + "步" });
          that.setData({ kilo: res.data.steps / 2 + "米" });
          that.setData({ blood: res.data.spb + "/" + res.data.dpb });
          wx.setStorageSync('battery', res.data.battery + "%");//存储电量
        }
      },
      fail: {
      }
    });
  }
})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序云开发教程三:创建第一个界面

    前面说到:微信小程序云开发 初学者入门教程一(云开发环境搭建)https://www.jianshu.com/p/5df4d51125e3,开通环境,部署环境之...

    王小婷
  • Bootstrap+jQuery实现卡片标签样式的分页

    很多人问我为什么要写这么多的博客,其实回想起从前,刚刚工作的那会,我也是什么都不会,每天遇到难题的时候只能打开百度,搜索关键词,看看网上的前辈有没有遇到和我一样...

    王小婷
  • Ant Design pro删除模块笔记(二)

    前面说到如何使用Ant Design Pro,并且添加自己需要的模块,但是如果添加了一个自己不太需要的模块,要怎么去删除?以下空白页面现在已经不需要了,删除步骤...

    王小婷
  • 小程序的页面生成图片分享朋友圈

    1.网络图片要下载到本地,就是getimginfo和promise,具体技术细节我也不晓得。然后就是本地图片的地址和网络图片的地址不同。本地的要加../../i...

    hotqin888
  • 小程序入门,看这一篇就够了!

    ? 文章为实战中踩坑经历,以及解决方案。同时是自己的一个项目回顾,在这里分享给大家,希望能帮助到大家。文章内代码需要左右滑动噢~ 登录授权 授权(基本信息,手...

    腾讯NEXT学位
  • 微信小程序版博客——列表页相关问题汇总

    首先是分页加载列表,从网上例子和文档来看有两种实现方式,一种是根据Page()上的 onReachBottom属性:页面上拉触底事件的处理函数,另一种就是通过s...

    Bug生活2048
  • 视频更新|斯坦福CS231n深度学习与计算机视觉课时22-卷积神经网络工程实践技巧与注意点(上)

    大数据文摘
  • ROS控制Turtlebot3移动机器人

    https://www.ncnynl.com/category/turtlebot3-tutorial/

    小黑鸭
  • Leetcode: Word Break

    题目: Given a string s and a dictionary of words dict, determine if s can be se...

    卡尔曼和玻尔兹曼谁曼
  • android:运行时权限工具类的封装

    众所周知,Android 从 6.0开始引入运行时权限机制,将权限分为了普通权限和危险权限 ,对于危险权限我们必须在使用的时候动态的去申请。

    CnPeng

扫码关注云+社区

领取腾讯云代金券