今天想聊一聊小程序里面存在的一些逻辑问题,拿手上的这个小程序来说,(这个小程序是开发出来玩的,每个人手上有一个手环,带着手环时候的心率,运动步数,血压数据都会展现在这个小程序里面,一目了然)用户第一次登陆的时候,是没有绑定手环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后前端妹子,爱编程,爱运营,爱折腾。

坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源300G干货大全。

公众号回复“1”,拉你进程序员技术讨论群.

微信小程序弹框提示绑定手环实例的更多相关文章

  1. 微信小程序弹框wx.showModal如何修改样式

    由于官方API提供的显示模态弹窗,只能简单地显示文字内容,不能对对话框内容进行自定义,欠缺灵活性,所以自己从模态弹窗的原理角度来实现了自定义的模态对话框. wx.showModal修改样式后的效果,如 ...

  2. 微信小程序弹出操作菜单

    微信小程序弹出操作菜单 比如在页面上放一个按钮,点击按钮弹出操作菜单,那么在按钮的 bindtap 事件里,执行下面的代码即可: wx.showActionSheet({ itemList: ['A' ...

  3. 微信小程序中的事件绑定

    前言: 微信小程序中的事件绑定和Vue中的事件绑定其实有很多的相似之处,所以如果有过Vue相关的经验,学起来的话还是比较容易的. js代码: // 页面级的js文件必须调用Page函数来注册页面, / ...

  4. 微信小程序 —搜索框

    wxSearch优雅的微信小程序搜索框 一.功能 支持自定义热门key 支持搜索历史 支持搜索建议 支持搜索历史(记录)缓存 二.使用 1.将wxSearch文件夹整个拷贝到根目录下 2.引入 // ...

  5. 微信小程序----搜索框input回车搜索事件

    在微信小程序里的搜索框,按软键盘回车键触发搜索事件. <input type="text"  placeholder="搜索" value="{ ...

  6. 【微信小程序常识】如何绑定微信小程序体验者

    转自:https://blog.csdn.net/futruejet/article/details/53223826 一.操作步骤 (1)打开微信小程序公众平台->点击右边菜单[用户身份]-& ...

  7. 微信小程序弹出层点击穿透问题

    问题描述:使用小程序的modal组件实现遮罩层效果时,会出现滚动穿透的问题,即遮罩层后面的页面依旧可以滚动. 解决方案: 给底层页面动态添加 position:fixed; 代码: wxml: < ...

  8. 微信小程序 - 弹出键盘遮挡住输入框

    在开发微信小程序的时候遇到,输入用户名或者手机号以及地址,手机键盘调起来,会把输入框遮挡. 如图: 以上两张图是自己工作中遇到的,此处不要着急,一个属性帮你搞定. cursor-spacing:指定光 ...

  9. 微信小程序,超能装的实例教程

    序言 开始开发应用号之前,先看看官方公布的「小程序」教程吧!(以下内容来自微信官方公布的「小程序」开发指南) 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序 ...

随机推荐

  1. 英语影视台词---二、Inception

    英语影视台词---二.Inception 一.总结 一句话总结:盗梦空间 1.You're waiting for a train..A train that will take you far aw ...

  2. CentOS下安装C/C++开发工具包的最佳方式

    如果你使用的是 Fedora, Red Hat, CentOS, 或者 Scientific Linux 系统,使用下面的命令安装GNU的C/C++开发包和编译器. # yum groupinstal ...

  3. RedHat Linux 多媒体学习指南 (共 36 部原创视频)

    1.为sco unix 添加第二块网卡 [url]http://you.video.sina.com.cn/b/11695632-1443650204.html[/url]   2.为sco unix ...

  4. n阶幻方问题

    转载自:http://blog.csdn.net/fengchaokobe/article/details/7437767 目录        第一节 n阶幻方问题       第二节 由n阶幻方引发 ...

  5. Java读取txt文件和覆盖写入txt文件和追加写入txt

    //创建文件 public static void createFile(File filename) { try { if(!filename.exists()) { filename.create ...

  6. Callback<> and Bind()

    Callback<> and Bind() Introduction The templated base::Callback<> class is a generalized ...

  7. UTC时间 GMT时间 本地时间 北京时间 时区 夏令时简要说明

    1.UTC时间 与 GMT时间 整个地球分为二十四时区,每个时区都有自己的本地时间.为了统一起见,使用一个统一的时间,称为通用协调时(UTC, Universal Time Coordinated). ...

  8. 昼猫笔记 JavaScript -- 闭包

      本次主要内容是 闭包 阅读时间: 约 3分钟 记得点个赞支持支持我哦 初步了解 先看下代码,输出结果是多少? function fn1 () { var a = 2 function fn2 () ...

  9. BZOJ2690: 字符串游戏(平衡树动态维护Dfs序)

    Description 给定N个仅有a~z组成的字符串ai,每个字符串都有一个权值vi,有M次操作,操作分三种: Cv x v':把第x个字符串的权值修改为v' Cs x a':把第x个字符串修改成a ...

  10. 【MySQL主从复制原理及搭建全过程】

    目录 准备工作 主从复制原理 开始搭建主从复制 本文将使用mariaDB数据库实现主从复制,其步骤与MySQL数据库无差异. MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护, ...