微信小程序表单提交php存储,微信小程序实现form表单本地储存数据
本文实例为大家分享了微信小程序实现form表单本地储存数据的具体代码,供大家参考,具体内容如下
效果图:
主要利用小程序的getStorage来实现异步本地储存。
小程序目录结构如下:
新建项目前,为了简化操作可直接右键新建目录,这样建出来的文件会直接写在app.json中,无需手动添加。
login.wxml代码:
姓名:
密码:
登陆
login.wxss样式:
/* pages/login/login.wxss */
.container{
padding: 1rem;
font-size: 0.9rem;
line-height: 1.5rem;
border-shadow: 1px 1px #0099CC;
}
.row{
display: flex;
align-items: center;
margin-bottom: 0.8rem;
}
.row text{
flex-grow: 1;
text-align: right;
}
.row input{
font-size: 0.7rem;
color: #ccc;
flex-grow: 3;
border: 1px solid #0099CC;
display: inline-block;
border-radius: 0.3rem;
box-shadow: 0 0 0.15rem #aaa;
padding: 0.3rem;
}
.row button{
padding: 0 2rem;
}
重点login.js来了:
// pages/login/login.js
Page({
/**
* 页面的初始数据
*/
data: {
userName:'',
passWord:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
点击登陆时,触发submit函数,如下:
submit:function(e){
console.log(e.detail.value);
//表单数据
var objData = e.detail.value;
if (objData.userName && objData.passWord){
//异步方式储存表单数据
wx.setStorage({
key: 'userName',
data: objData.userName,
})
wx.setStorage({
key: 'passWord',
data: objData.passWord,
})
wx.navigateTo({
url: '../detail/detail',
})
}
},
储存好数据后,下次再打开该页面,先判断是否含有数据,有就填充。
onLoad: function (options) {
var that = this
wx.getStorage({
key: 'userName',
success: function(res) {
that.setData({ userName: res.data })
},
})
wx.getStorage({
key: 'passWord',
success: function (res) {
console.log(res.data)
that.setData({ passWord: res.data })
},
})
},
以上就是完整的表单登陆加储存。
希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
微信小程序表单提交php存储,微信小程序实现form表单本地储存数据相关推荐
- PHP表单提交的方式有哪两种,form表单提交数据的几种方式
一.submit提交 在form标签中添加action(提交的地址)和method(post),且有一个submit按钮()就可以进行数据的提交,每一个input标签都需要有一个name属性,才能进行 ...
- form提交php怎么接收不到,php form表单post提交获取不到数据,而使用get提交能获取到数据 的解决办法...
开发环境:xampp,mac,phpstorm 其实出现这个问题的原因就是在于phpstorm,它默认使用的是自带的内部服务器,这个服务器使用63342端口,而且服务器内部有问题,导致POST方法异常 ...
- 微信小程序开发——form表单
WeChat小程序交流(QQ群:769977169) 效果图 代码示例 1.xxx.wxml <form bindsubmit='submitClick' bindreset='resetCli ...
- php表单登录跳转页面跳转页面,form表单页面跳转方式提交练习
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 //form表单提交练习 /*新建一个form.html网页用来书写前端HTML表单*/ 表单提交练习 姓名: 年龄: 电话: 地址: QQ: 自我评价: ...
- php表单提交邮箱_最全实现dede订单表单提交发送到指定邮箱(附前台设置)
打造销售型网站的订单系统.不是所有销售都有权限登陆网站后台查看订单,特别是外地出差时,用户下了订单后不能及时服务用户,可能会造成订单丢失.但dedecms默认的订单提交后只能在后台看到的,每次都要登陆 ...
- php表单提交serialize,jQuery使用serialize(),serializeArray()方法取得表单数据
原始form表单值获取方式(手动):$.ajax({ type: "POST", url: "ajax.php", data: {'name':'摘取天上星', ...
- 微信小程序中form 表单提交和取值实例详解
2019独角兽企业重金招聘Python工程师标准>>> 我们知道,如果我们直接给 input 添加 bindinput,比如:<input bindinput="on ...
- python表单管理系统_python3开发进阶-Django框架的Form表单系统和基本操作
{% csrf_token %} 用户名 密码 {{ error_msg }}
- form表单、控制器中接收表单提交数据的4种方式
Form表单 这篇文章主要讲的是form表单的提交 之前我们接触过的form表单元素是在Bootstrap框架里面,这次也将用到Bootstrap框架去布局(见图表1)通过Bootstrap框架布局呈 ...
最新文章
- 华人打造二次元老婆生成器!尔康容嬷嬷成萌妹,图像视频都能变 | Demo可玩
- GPT-3开始探索付费使用:每月给个700块,写得比莎士比亚还多
- 安装SQL2K,当创建挂起文件操作之后...
- SRAM BIST技术学习
- 将 改为c语言表达式,基于c语言表达式求解课程设计修改.doc
- 微型计算机的系统组成图,微型计算机系统结构图.doc
- 简易 Vue 构建--篇二
- Introduction to Mathematical Thinking - Week 4
- nginx的配置笔记
- html 悬浮在固定位置,纯CSS实现DIV悬浮(固定位置)
- linux soc 程序崩溃,SOC、FLCK和内存之间的关系,以3900X+X570为例(更新PCIE4.0)
- Git常用指令的使用
- html5中required标签必填项
- html前端的几种加密/解密方式
- python3 selenium web自媒体百家号企鹅号大鱼号acfun站,自动化上传视频以及经验总结分享
- 【Android】实战图像识别:Compose + MLKit + CameraX
- 如何利用诸葛IO做数据分析?
- 百度竞价新人提升赚钱概率的方法
- 滴滴数据科学家分享:数据如何驱动业务增长
- 对高职日语专业未来可持续发展路径的思考