[小程序]微信小程序获取input并发送网络请求
1. 获取输入框数据
wxml中的input上增加bindinput属性,和方法值
在js部分定义与之对应的方法,只要在输入的时候,数据就会绑定调用到该方法,存入data属性变量中
2. 调用get请求发起网络请求
调用wx.request发起网络请求
3.调用微信Toast接口展示结果
4.按钮绑定bindtap属性,当按钮点击的时候会调用对应的方法
index.wxml部分
<view class="indexInput">
<input maxlength="100" bindinput="getEmail" placeholder="邮箱地址" />
</view>
<view class="indexInput">
<input password maxlength="30" bindinput="getPasswd" placeholder="密码" />
</view>
<view class="indexButton">
<button type="primary" bindtap="checkLogin" loading="{{loading}}"> 登录 </button>
</view>
index.js部分
//index.js
//获取应用实例
const app = getApp() Page({
data: {
email:"",
passwd:"",
}, onLoad: function () { },
//获取输入框数据
getEmail:function(e){
this.setData({
email: e.detail.value
})
},
//获取输入框数据
getPasswd: function (e) {
this.setData({
passwd: e.detail.value
})
},
/*
* 验证用户名密码是否正确
*/
checkLogin:function(){
var email=this.data.email;
var passwd = this.data.passwd;
var data={
loginfrom:"app",
email: email,
psw: passwd,
output: "json"
};
var url = "https://api.sopans.com/third/login.php";
wx.request({
url: url,
method: 'GET',
data: data,
header: {
'Content-Type': 'application/json'
},
success(res) {
if(res.data.code=200){
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
}
}
});
}
})
[小程序]微信小程序获取input并发送网络请求的更多相关文章
- 全栈项目|小书架|微信小程序-登录回调及获取点赞列表功能
效果图 这一节介绍,登录回调 以及 喜欢列表 的实现. 登录回调:这里是指在获取登录完成之后,再进行下一步的操作. 比如效果图中我的页面,默认是未登录状态,积分和喜欢列表的数量都没有获取到. 而登录成 ...
- 小程序——微信小程序初学踩过的坑
微信小程序初学踩过的坑 一.前言 最近因为某些需要和个人兴趣打算开发一下微信小程序,经过在官方网站上的基本了解,我大体知道了微信小程序开发的大致过程,其实最本质的就是MVVM,借用了很多模式上 ...
- [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息,wx.getLocation,腾讯地图小程序api,微信小程序经纬度逆解析地理信息
因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...
- 小程序登录时如何获取input框中的内容
最近写小程序项目遇到一些问题,今天整理下这些问题的解决方法,希望对用户有帮助.下面是登录页,点击登录时获取input框中的值, 效果如下: wxml布局如下: <view > <in ...
- [小程序]微信小程序登陆并获取用户信息
1.小程序js端调用框架登陆API,获取到一个临时code,拿着这个code去调用自己的服务端接口 2.在自己的服务器端,使用app_id app_secrect code可以获取到用户的openid ...
- [微信小程序] 微信小程序富文本-wxParse的使用
最近小程序蛮火的,公司要做于是学了一点点小程序 不知道你们有没有遇到过这种问题: 从公司服务器获取的文章内容是有HTML标签格式的一段内容,但是微信是不支持这些标签的,怎么办呢? 1.一般网站后台的文 ...
- 全栈项目|小书架|微信小程序-登录及token鉴权
小程序登录 之前也写过微信小程序登录的相关文章: 微信小程序~新版授权用户登录例子 微信小程序-携带Token无感知登录的网络请求方案 微信小程序开通云开发并利用云函数获取Openid 也可以通过官方 ...
- 全栈项目|小书架|微信小程序-点赞功能实现
微信小程序端的点赞功能其实没什么好介绍的,无非就是调用接口改变点赞状态和点赞数量.需要注意的是取消点赞时的处理,我这里为了减少服务器接口的调用,直接本地存一个变量,修改这里的变量值即可. 由于源码都相 ...
- 全栈项目|小书架|微信小程序-首页水平轮播实现
首页效果 首页功能主要有 搜索(下篇文章介绍) 图书列表 图书列表 分析一波: 列表是水平滑动 点击列表会有按压效果:布局整体缩小 每个布局的信息从上到下排列分别是:图片.书名.作者.出版社 每个布局 ...
随机推荐
- [PHP] 安装PHP报错“Primary script unknown”的解决方法
当安装完最新版的nginx和最新版的PHP以后,使用niginx默认配置文件中的PHP配置会有错误访问指定目录下的php文件时,显示File not found.错误.查看nginx的错误日志显示 9 ...
- (办公)vue下载excel,后台用post方法
后台方法的参数必须是@RequestBody修饰的. 前台关键代码: axios ( { method : 'post', url : api.exportPlayTime , // 请求地址 dat ...
- RC4 对称加密
public class RC4 { byte[] s = new byte[256]; byte[] key; byte keylen;// 4 ~ 16 int pi = 0; int pj = ...
- pdfium ppm demo
#include "fpdfview.h" #include <iostream> #include <string> #include <strin ...
- SpringCloud学习笔记(四、SpringCloud Netflix Ribbon)
目录: Ribbon简介 Ribbon的应用 RestTemplate简介 Ribbon负载均衡源码分析 Ribbon简介: 1.负载均衡是什么 负载均衡,根据其字面意思来说就是让集群服务具有共同完成 ...
- Loadrunner|录制脚本时出现乱码的解决方式
1.进入options 2. 保存后,再录制到脚本就不会有乱码了!
- Linux 操作MySQL常用命令行
1.连接数据库 mysql -uroot -p Enter password: ** Mysql> 出现mysql>说明成功连接到数据 2.显示数据库 mysql> show dat ...
- 对比3种接口测试的工具:jmeter+ant;postman;python的requests+unittest或requests+excel
这篇随笔主要是对比下笔者接触过的3种接口测试工具,从实际使用的角度来分析下3种工具各自的特点 分别为:jmeter.postman.python的requests+unittest或requests+ ...
- 【2019.8.12 慈溪模拟赛 T2】汪哥图(wang)(前缀和)
森林 考虑到题目中给出条件两点间至多只有一条路径. 就可以发现,这是一个森林. 而森林有一个很有用的性质. 考虑对于一棵树,点数-边数=\(1\). 因此对于一个森林,点数-边数=连通块个数. 所以, ...
- 数据仓库009 - SQL命令实战 - where GROUP BY join 部门综合案例
一.where条件 WHERE 子句中主要的运算符,可以在 WHERE 子句中使用,如下表: 运算符 描述 = 等于 <> 不等于.注释:在 SQL 的一些版本中,该操作符可被写成 != ...