首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >微信小程序弹框提示绑定手环实例

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

原创
作者头像
王小婷
修改于 2020-11-30 10:14:08
修改于 2020-11-30 10:14:08
90200
代码可运行
举报
文章被收录于专栏:编程微刊编程微刊
运行总次数:0
代码可运行

图片.png

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//获取应用实例
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: {
      }
    });
  }
})

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
微信小程序入门教程之四:API 使用
上一篇教程介绍了,小程序页面如何使用 JavaScript 脚本。有了脚本以后,就可以调用微信提供的各种能力(即微信 API),从而做出千变万化的页面。本篇就介绍怎么使用 API。
ruanyf
2020/11/04
3.4K0
微信小程序入门教程之四:API 使用
微信小程序之富文本编辑组件editor结合RichText进行显示
image 核心代码 var that; Page({ data: { content: '', content_html: '', placeholder: '开始输入...', isReadOnly: false, nodes: [{ name: 'div', attrs: { class: 'div_class', style: 'line-height: 60px; color: red;'
专注APP开发
2019/11/07
2.2K0
微信小程序之富文本编辑组件editor结合RichText进行显示
微信小程序之onLaunch与onload异步问题
   前端时间开发了一个微信小程序商城项目,因为这个项目我们的需求是进入小程序就通过wx.login({}) 这个api进行用户登录,获取系统后台的用户基本信息。再此之前,一直以为微信小程序中的App.js 中onLaunch (小程序初始化完成执行该方法)方法比其他页面的的 onload 方法要先执行。那么问题就来了,我每次进入小程序首页的时候有时候会先执行onlaunch方法,有时又会先执行首页的onload的方法,最后经过确定,在微信小程序中这两个方法并没有执行先后的顺序,因为他们都是异步执行的。当然开发过微信小程序的开发者都知道微信请求数据都是异步执行的,如在同一个onload写两个请求数据的方法,它不一定会按照先后顺序去执行,这就是传说中的异步地狱了。
追逐时光者
2019/08/28
2.9K0
微信小程序开发心得第二章:千里传音(模板消息)
今天分享一篇关于消息模板的简易教程。 老规矩先把官方的定义再讲一下,消息模板是基于微信的通知渠道,为我们开发者提供了触发模板消息的能力,以便实现服务的闭环和更好的用户体验。 发起消息模板是有限制条件的,必须用户本人在微信体系与小程序页面有交互行为后才能触发,只有两种情况允许。 第一种是用户在小程序完成支付的行为,可允许开发者向用户在7天内推送有限的模板消息,一次支付可发一条。 第二种是通过提交表单行为且表单需要声明为要发模板消息的,可以允许开发者向用户在7天内推送有限条数的模板消息,一次提交表单可发一条。
极乐君
2018/02/05
9331
微信小程序开发心得第二章:千里传音(模板消息)
微信小程序接口请求token过期用户无感应获取token重新调用接口
封装接口请求,我们的业务需要在header上加token和openid,可以根据自己的业务逻辑进行项目改变。 const baseUrl = "xxx"; const http = ({ url = '', param = {}, type = 'json', callback = '', ...other } = {}) => { wx.showLoading({ title:'请求中...', }) let timeStart = Date.now();
安德玛
2022/03/08
2K0
微信小程序版博客——用户中心页面设计问题汇总
最近浏览还是利用的小程序的10M本地缓存来实现,当用户浏览文章时,将文章的一些关键信息保存至缓存中。
Bug生活2048
2018/08/31
9700
微信小程序版博客——用户中心页面设计问题汇总
微信小程序登陆封装(自用版)欢迎指正
https://static.4ce.cn/gh/uxiaohan/GitImgTypecho@master/usr/uploads/2022/07/2623010086.mp4
骤雨重山
2022/06/27
8580
微信小程序之富文本编辑组件editor的简单使用
https://developers.weixin.qq.com/miniprogram/dev/component/editor.html
专注APP开发
2019/11/07
2.7K0
微信小程序之富文本编辑组件editor的简单使用
小程序云开发常用语句宝库
查询语句,返回的是 res.data[] 数组 调用云函数返回的是res.result get 数据获取返回的是 res.data{} 对象 1.调用云函数 this.DB = wx.cloud.database() wx.cloud.init({ env: 'mm-4t7rg' }) wx.cloud.callFunction({ name: "login", data: {}, success(res) { console.log('个人信息-------------',res.
IT工作者
2022/02/16
3770
小程序Request的封装
更新说明:对文章排版以及内容格式做了调整。 更新时间:2022-05-04 最近做了两个小程序,业务相对比较简单,关于公益方面的,收获颇多,其中感觉在开发中明显提升开发效率以及减少代码量的就是request的封装,下面稍稍做个总结。 通用封装 在utils文件夹下新建两个文件,config.js以及request.js,代码分别如下。 <!-- config.js--> module.exports = { appid: "wxcXXXXXXXXXXXXXX349f", API_B
六个周
2022/10/28
5750
小程序(3):授权登录
判断是否授权,如果没有,则显示授权按钮。注意上面的open-type="getUserInfo",这个会自动调起授权框。看一下js
小尘哥
2018/08/15
2.2K0
小程序的数据管理与云数据库应用
在微信小程序开发中,数据管理是核心环节之一。数据的存储、读取、更新和删除操作决定了应用的性能和用户体验。 本篇文章将详细讲解小程序的数据管理方式,并重点介绍云数据库(Cloud Database)的应用,通过具体示例帮助理解其使用场景和优化方法。
LucianaiB
2025/01/29
4890
【小程序探索】:深入理解小程序中的数据
刚开始撸小程序的时候,觉得看看文档就可以了,导致写了很多垃圾代码坑人坑己,相信大部分初学者也不会去仔细研究文档,更别说啰里啰嗦的指南了,在通读小程序官方指南后,很有必要总结一番。清楚了生命周期和数据通信,就能对整个程序有一定的把控能力,定位问题和解决问题的能力将大幅提高。
极乐君
2019/12/16
1.3K0
【小程序探索】:深入理解小程序中的数据
微信小程序和Django服务端通信
我在这里详细表述一遍:微信小程序和具有权限认证、CSRF机制的Django服务端通信的一个可行的例子。。
benny
2020/04/23
1.7K0
小程序同步异步
最近一段时间写微信小程序大家或许注意到了有些时候在登录的时候莫名其妙的报错了,然后就开始一路找bug之路,每次console.log都没问题都有数据啊,但是就是报错,这时候用断点调试法发现,上一步的函数体还没有执行完毕呢,下一个函数就开始执行了,但是呢下一步的函数还必须需要上一步返回的参数不可,百度了一下才知道那是因为微信小程序是异步执行的,两个函数同时执行谁也不等谁,这里如果有兄弟不明白同步和异步的话可以百度一下就知道了,这时候必须要使用javascript的函数Promise,但是呢微信小程序增加ES6的promise特性支,微信小程序新版本中移除了promise的支持,需要自己使用第三方库来自行实现ES6的promise特性,网上有第三方自己造的轮子,但是我用了以后我就后悔了,真的是一脸懵懂啊,想了想算了,快算了自己想个办法吧
江一铭
2022/06/16
6930
微信小程序消息通知-打卡考勤
标题图 微信小程序消息通知-打卡考勤 效果: 在这里插入图片描述 稍微改一下js就行,有不必要的错误,我就不改了,哈哈! index.js //index.js const app = getApp() // 填写微信小程序appid var appid = ''; // 填写微信小程序secret var secret = ''; Page({ // 页面数据 data: { access_token: '', openid: '', }, // 表单请求
达达前端
2019/07/04
2.4K0
微信小程序获取用户信息
在微信小程序中,如果想获取用户的昵称等信息可以不用另外写后台,如果需要获取用户的unionId,则需要后台来提供获取sessionKey和解码encryptedData。
OECOM
2020/07/01
3.5K0
微信小程序授权获取用户详细信息openid
Incorrect string value: ‘\xF0\x9F\x98\x83 <…’ for column ‘summary’ at row 1
李才哥
2019/07/10
5.9K0
微信小程序授权获取用户详细信息openid
小程序开发(授权登陆)
5.用wx.getstoragesync获取3rdSessionId如果存在,就已经登陆,不存在就未登陆(检验登陆态)
IT工作者
2022/02/17
8610
小程序安全设置-弹出框输入获取值
小程序安全设置 Page({ /** * 页面的初始数据 */ data: { anquan: '', detailanquan: '', hiddenmodalput: true, //可以通过hidden是否掩藏弹出框的属性,来指定那个弹出框 idCard: '', password: '', phone: '', email: '', wxUnionid: '', // 修改密码 psd: "
达达前端
2022/04/29
1.3K0
相关推荐
微信小程序入门教程之四:API 使用
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档