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

今天想聊一聊小程序里面存在的一些逻辑问题,拿手上的这个小程序来说,(这个小程序是开发出来玩的,每个人手上有一个手环,带着手环时候的心率,运动步数,血压数据都会展现在这个小程序里面,一目了然)用户第一次登陆的时候,是没有绑定手环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:指定光 ...
- 微信小程序,超能装的实例教程
序言 开始开发应用号之前,先看看官方公布的「小程序」教程吧!(以下内容来自微信官方公布的「小程序」开发指南) 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序 ...
随机推荐
- 【LeetCode】3Sum Closest 解题报告
[题目] Given an array S of n integers, find three integers in S such that the sum is closest to a give ...
- RenderScript on LLVM笔记
Android 为何引入 Render Script: 3D 可移植 ( 直接用 opengl 也能够移植呀?) 性能 易用性 ( 让 opengl 难入门的人,用 Render Script ?) ...
- linux 下的select函数
函数原型 /* According to POSIX.1-2001 */ #include <sys/select.h> //头文件 /* According to earlier st ...
- 流水线技术原理和Verilog HDL实现
所谓流水线处理,如同生产装配线一样,将操作执行工作量分成若干个时间上均衡的操作段,从流水线的起点连续地输入,流水线的各操作段以重叠方式执行.这使得操作执行速度只与流水线输入的速度有关,而与处理所需的时 ...
- IIS Modules Overview
Introduction The IIS 7 and above Web server feature set is componentized into more than thirty indep ...
- vmware-images
https://virtualboxes.org/images/centos/ https://www.osboxes.org/vmware-images/
- Command "python setup.py egg_info" failed with error code 1 in /tmp/pip-build-qvc66dfs/supervisor/
# 安装supervisor 出错 pip3 install supervisor # 解决 sudo pip3 install supervisor
- NOIP 模拟赛
NOIP 模拟赛 思路:求 n , m 的 gcd,然后用 n , m 分别除以 gcd:若 n 或 m 为偶数,则输出 1/2. 特别的,当 n = m = 1 时,应输出 1/1 #include ...
- HDU 4975 A simple Gaussian elimination problem.
A simple Gaussian elimination problem. Time Limit: 1000ms Memory Limit: 65536KB This problem will be ...
- Vim操作的四种模式
Vim的四种模式一.启动Vim1.双击桌面的图标,就可以启动Vim(是图形界面的)2.在开始菜单---点--运行 接着输入 vim 或者gvim,就可以启动Vim或Gvim了.二.Vim的模式1.Vi ...