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

今天想聊一聊小程序里面存在的一些逻辑问题,拿手上的这个小程序来说,(这个小程序是开发出来玩的,每个人手上有一个手环,带着手环时候的心率,运动步数,血压数据都会展现在这个小程序里面,一目了然)用户第一次登陆的时候,是没有绑定手环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”,拉你进程序员技术讨论群.
微信小程序弹框提示绑定手环实例的更多相关文章
- 微信小程序弹框wx.showModal如何修改样式
由于官方API提供的显示模态弹窗,只能简单地显示文字内容,不能对对话框内容进行自定义,欠缺灵活性,所以自己从模态弹窗的原理角度来实现了自定义的模态对话框. wx.showModal修改样式后的效果,如 ...
- 微信小程序弹出操作菜单
微信小程序弹出操作菜单 比如在页面上放一个按钮,点击按钮弹出操作菜单,那么在按钮的 bindtap 事件里,执行下面的代码即可: wx.showActionSheet({ itemList: ['A' ...
- 微信小程序中的事件绑定
前言: 微信小程序中的事件绑定和Vue中的事件绑定其实有很多的相似之处,所以如果有过Vue相关的经验,学起来的话还是比较容易的. js代码: // 页面级的js文件必须调用Page函数来注册页面, / ...
- 微信小程序 —搜索框
wxSearch优雅的微信小程序搜索框 一.功能 支持自定义热门key 支持搜索历史 支持搜索建议 支持搜索历史(记录)缓存 二.使用 1.将wxSearch文件夹整个拷贝到根目录下 2.引入 // ...
- 微信小程序----搜索框input回车搜索事件
在微信小程序里的搜索框,按软键盘回车键触发搜索事件. <input type="text" placeholder="搜索" value="{ ...
- 【微信小程序常识】如何绑定微信小程序体验者
转自:https://blog.csdn.net/futruejet/article/details/53223826 一.操作步骤 (1)打开微信小程序公众平台->点击右边菜单[用户身份]-& ...
- 微信小程序弹出层点击穿透问题
问题描述:使用小程序的modal组件实现遮罩层效果时,会出现滚动穿透的问题,即遮罩层后面的页面依旧可以滚动. 解决方案: 给底层页面动态添加 position:fixed; 代码: wxml: < ...
- 微信小程序 - 弹出键盘遮挡住输入框
在开发微信小程序的时候遇到,输入用户名或者手机号以及地址,手机键盘调起来,会把输入框遮挡. 如图: 以上两张图是自己工作中遇到的,此处不要着急,一个属性帮你搞定. cursor-spacing:指定光 ...
- 微信小程序,超能装的实例教程
序言 开始开发应用号之前,先看看官方公布的「小程序」教程吧!(以下内容来自微信官方公布的「小程序」开发指南) 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序 ...
随机推荐
- Codeforces Round #337 (Div. 2) 610C Harmony Analysis(脑洞)
C. Harmony Analysis time limit per test 3 seconds memory limit per test 256 megabytes input standard ...
- php实现模拟登陆
在不考虑验证码的情况一下,php实现模拟登陆,网上给的办法通常是採用curl来模拟实现,可是curl实现的是server端与server端建立了会话,仅仅能模拟登陆之后获取登陆之后的数据.无法将coo ...
- 《机器学习系统设计》之应用scikit-learn做文本分类(上)
前言: 本系列是在作者学习<机器学习系统设计>([美] WilliRichert)过程中的思考与实践,全书通过Python从数据处理.到特征project,再到模型选择,把机器学习解决这个 ...
- Sqoop Import原理和详细流程讲解
Sqoop Import原理 Sqoop Import详细流程讲解 Sqoop在import时,需要指定split-by参数.Sqoop根据不同的split-by参数值来进行切分,然后将切分出来的区域 ...
- SQLServer2008端口及防火墙设置
一,Microsoft SQL Server 2008R2数据库设置 1. 开始=>程序=>Microsoft SQL Server 2008R2=>配置工具=>S ...
- ivms4200 远程桌面访问测试过程及问题汇总
17.11.4 测试存储服务器配置后能否自动录像确认 10:34 4200客户端关闭 10:40 打开4200客户端软件 10:51 关机 10:56 开机,有提示出现,“防火墙阻止... ...
- 在JAVA中怎样跳出当前的多重嵌套循环?
在JAVA中怎样跳出当前的多重嵌套循环? 这道题是考察大家对于break语句的应用.同一时候也是对你多重嵌套循环的使用进行考察.在java中,要想跳出多重循环,能够在外循环语句前面定义 ...
- jquery20--animate() : 运动的方法
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- 3.Maven之(三)Maven插件
转自:https://yq.aliyun.com/ziliao/312162 Maven本质上是一个插件框架,它的核心并不执行任何具体的构建任务,所有这些任务都交给插件来完成,像编译是通过maven- ...
- 1.Maven之(一)Maven是什么
转自:https://blog.csdn.net/xhxmister/article/details/79409208 首先,Maven的正确发音是[ˈmevən],而不是“马瘟”以及其他什么瘟.Ma ...