美文网首页让前端飞微信小程序开发Web前端之路
微信小程序弹框提示绑定手环实例

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

作者: 祈澈菇凉 | 来源:发表于2018-07-12 16:39 被阅读198次
    图片.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: {
          }
        });
      }
    })
    

    相关文章

      网友评论

      • 小伙eryayayayaya:你好可以问你个问题么,我n'p'm run dev 时就卡在那里了,一直不动 ,这个你遇见过么.我用的是mpvue的
      • 程序员手札:不错不错,辛苦辛苦

      本文标题:微信小程序弹框提示绑定手环实例

      本文链接:https://www.haomeiwen.com/subject/cmsrpftx.html