• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
图片.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: {
      }
    });
  }
})

原文作者:祈澈姑娘
技术博客:https://www.jianshu.com/u/05f416aefbe1

90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家加入群聊,一起探讨交流。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
MpVue致力打造H5与小程序的代码共用发布时间:2022-07-18
下一篇:
小程序利用画布动态画圆发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap