Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >微信小程序_04 数据绑定

微信小程序_04 数据绑定

作者头像
酷走天涯
发布于 2018-09-14 07:03:53
发布于 2018-09-14 07:03:53
1.8K00
代码可运行
举报
运行总次数:0
代码可运行

本节内容

理解微信小程序的数据交互

在上一篇文章(控件与布局)主要介绍的页面的控件的展示和布局,如下图

83F07AE4-6917-4630-B53F-56D9C7CE4C8D.png

本篇就来演示一下数据是怎么交互的

我们的需求是在输入框输入内容后,点击提交按钮,在上面的标签上进行显示

  • 第一步 在xxx.wxml 绑定两个事件 一个是监听输入框的值,一个是提交按钮的点击事件,代码如下
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  <view class = "container">
    <view  class = "text-section">
        <text > {{name}}</text>
    </view>
    <view class ="input-section" >
          // 输入事件 bindinput  绑定到函数inputName 上
         <input placeholder="请输入您的姓名" bindinput="inputName"/>
    </view>
    <view class = "submit_section">
        //  bindtap 代表单击事件  绑定到方法tapSubmit 上
        <button class = "submit" bindtap="tapSubmit">提交</button>
    </view>
  </view>
  • 第二步 在js 文件中这两个方法
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Page({
  data:{
    name:"这里会显示你输入的名字",
    input_text:'' // 存放用户输入的值
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  
  // 用户通过键盘输入值时,就会触发这个函数
  inputNamefunction(input){
    var that = this;
    console.log(input);
    // 缓存用户输入的值,注意这里一次只能修改一个值
    that.setData({
     input_text:input.detail.value
    });
  }
   // 当用户点击提交按钮 会 触发这个函数
   bindButtonTap:function(){
   var that = this;
   // 我们将输入框的值 直接赋值给name 因为name 和text 标签进行了绑定所以直接会显示出来 不需要刷新
   that.setData({
     name:that.data.input_text
   })
  },
  })

最终效果

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017.01.12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
微信小程序官方组件展示之表单组件textarea源码
以下将展示微信小程序之表单组件textarea源码官方组件能力,组件样式仅供参考,开发者可根据自身需求定义组件样式,具体属性参数详见小程序开发文档。
软件事业部
2022/09/26
1.3K0
微信小程序_02创建一个简单的工程
这个时候运行一些 应该会报错,因为在myPage.js 里面没有写任何东西,程序找不到执行的函数
酷走天涯
2018/09/14
6240
微信小程序_02创建一个简单的工程
微信小程序【事件绑定】入门一篇就搞定
上述代码就四行,首先是一个 input 输入框,目的是用来输入一些值,同时下面标签就会显示,接着是两个 button 用来分别执行 +1 或者 -1 的操作,最后一个 view 标签就是为了 进行数据输入或变化的回显
BWH_Steven
2020/09/10
2.3K0
微信小程序【事件绑定】入门一篇就搞定
微信小程序-如何获取用户表单控件中的值
在小程序开发中,经常有用到表单,我们往往需要在小程序端获取用户表单输入框中的值(通常用户输入的有:switch,input,checkbox,slider,radio,picker)等,通过触发事件,然后提交给后端处理
itclanCoder
2020/10/28
7.9K0
微信小程序-如何获取用户表单控件中的值
零基础微信小程序开发——WXML 模板语法之事件绑定(保姆级教程+超详细)
在小程序开发中,事件是渲染层(Webview)到逻辑层(JsCore)的通讯方式。简单来说,当用户与小程序界面进行交互时(如点击按钮、滑动页面等),这些交互行为会被捕获并转化为特定的事件。这些事件随后被发送给逻辑层,逻辑层接收到事件后,会根据预定义的回调函数来处理这些事件,并执行相应的业务逻辑。
小白的大数据之旅
2025/05/16
1560
零基础微信小程序开发——WXML 模板语法之事件绑定(保姆级教程+超详细)
微信小程序入门《三》实例:简易form、本地存储
实例内容 登陆界面 处理登陆表单数据 处理登陆表单数据(异步) 清除本地数据 实例一: 登陆界面 在app.json中添加登陆页面pages/login/login,并设置为入口。 保存后,自动生成相
极乐君
2018/02/05
1.7K0
微信小程序入门《三》实例:简易form、本地存储
微信小程序开发实战(9):单行输入和多行输入组件
input组件用于录入单行文本,尽管input的基本功能是文本录入,但该组件的属性还是比较多的,也比较复杂。下面是input属性的属性及其含义。
蒙娜丽宁
2020/07/16
3.3K0
微信小程序开发实战(9):单行输入和多行输入组件
微信小程序开发笔记
  因为前段时间一直在做关于微信小程序方面的项目,作为一名后端的攻城狮而言做一些简单的前端页面数据操作和管理还是比较容易快上手的,当然前提是要理解微信小程序的基本语法和请求原理。该篇博客主要记录的是在编写微信小程序时使用比较频繁,实用的一些方法和一些基本原理的概括。个人觉得把这些方法掌握好了,开发一个小型的微信小程序那是绰绰有余的啦。当然我这里并没有深入的对一些语言进行详细的概述,纯属个人总结,假如需要详细的微信小程序语法文档请移驾到:[https://developers.weixin.qq.com/miniprogram/dev/]
追逐时光者
2019/08/28
2.1K0
微信小程序开发笔记
微信小程序零基础入门--->绑定事件
一、demo1.wxml <!-- 1、bindinput为绑定事件,给input表单进行时间的绑定 2、hadnInput为事件名称,事件在js中填写 3、bindtap点击事件 -->
用户5899361
2020/12/07
8380
微信小程序零基础入门--->绑定事件
全栈开发工程师微信小程序-上(下)
nodes 文本节点:type = text,全局支持class和style属性,不支持id属性。
达达前端
2019/07/03
1.6K0
全栈开发工程师微信小程序-上(下)
如何使用小程序表单组件
上一篇文章中,我们给大家介绍了小程序的视图容器及基础内容组件,该组件主要应用是输出内容。接下来这篇文章中,我们将继续介绍小程序最常用的表单组件,该组件主要应用是获取输入内容。表单组件分为11个组件,我们将对这11个组件使用做详细的介绍。
此昵称已隐藏_
2018/11/06
5.6K0
小程序弹出框详解
标题图 小程序弹出框详解 qjlx: function() { var itemList = ['病假', '事假']; wx.showActionSheet({ itemList: itemList, success: function(res) { console.log(res); console.log(itemList[res.tapIndex]); }, fail: function(res) {
达达前端
2019/07/04
3.9K0
微信小程序的动态表单,实现房屋租赁的多租客录入
本文将介绍如何使用微信小程序编写动态表单,最终实现房屋租赁系统中多租客录入的业务。
Designer 小郑
2023/08/01
4660
微信小程序的动态表单,实现房屋租赁的多租客录入
开发一个微信小程序(4):查询天气-获取某个城市的实时天气
从这一篇开始介绍如何实现一个查询天气小程序 准备工作: 1、申请和风天气开发者账号,并创建一个 Web API 类型的应用 (要调用和风天气 api 获取天气,关于如何使用和风天气api需要自行查阅文档,传送门:和风天气开发平台
冰霜
2023/02/24
3.7K0
开发一个微信小程序(4):查询天气-获取某个城市的实时天气
微信小程序添加视频组件
video组件 一、示例: wxml <View>1.播放网络视频</View> <view > <video style="width: 100%;height=400px;margin:1px;
江一铭
2022/06/16
3.1K0
微信小程序添加视频组件
轻应用小程序有哪些平台
小程序(Mini Program)是微信,支付宝、京东、抖音、等国内比较流行国民应用上的轻量级应用程序,可以通过应用内置的框架进行开发,无需下载和安装,可以直接基于在应用本身中使用。下面是一个简单的微信小程序开发示例,通过小程序获取用户输入并输出到页面上。
成都众联思索科技有限公司
2023/06/30
7100
轻应用小程序有哪些平台
小程序留言板块引入emoji表情
最近准备给博客小程序添加一个留言板功能,考虑到如果只是纯文本留言有点过于简陋了,所以准备按照仿微信风格,在评论时可以添加emoji表情发送,实际上为了简化开发,原本找到了github一个插件WxEmojiView,可以快速引入项目实现emoji表情的渲染,但是由于几个缺点放弃了使用这个插件,首先这个插件实际上是用户选择emoji表情时转换成一串对应的字符串拼接到文本中,这样输入文本的显示效果我觉得不是很理想,第二点是插件坐着没有继续维护,所以担心某一天出问题不好处理,所以最终决定自己实现文本插入emoji表情的效果。我们可以先简单看下本篇文章最终要实现的效果:
创译科技
2019/11/24
4K0
手把手教你微信小程序如何设置密码输入框
源代码 .josn 弹出框用了vant小程序的ui,需要下载。也可以不用,抽取关键代码即可。 vant-weapp:https://vant-contrib.gitee.io/vant-weapp/#/quickstart
江一铭
2022/06/17
2.8K0
手把手教你微信小程序如何设置密码输入框
[小程序]微信小程序获取input并发送网络请求
1. 获取输入框数据 wxml中的input上增加bindinput属性,和方法值 在js部分定义与之对应的方法,只要在输入的时候,数据就会绑定调用到该方法,存入data属性变量中
唯一Chat
2019/09/10
1.1K0
[小程序]微信小程序获取input并发送网络请求
小程序请假效果
var dateTimePicker = require('../../utils/dateTimePicker.js'); Page({ // 页面的初始数据 data: { date: '', winWidth: 0, winHeight: 0, // tab切换 currentTab: 0, }, //获取当前滑块的index bindchange: function(e) { const that = this; that.
达达前端
2022/04/29
4200
推荐阅读
相关推荐
微信小程序官方组件展示之表单组件textarea源码
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档