微信小程序页面点击按钮传值与取值

最新推荐文章于 2024-06-19 13:27:05 发布
最新推荐文章于 2024-06-19 13:27:05 发布
阅读量661 收藏
点赞数 1
分类专栏： c# 文章标签： c# java
原文链接：https://blog.youkuaiyun.com/qq_45195669/article/details/104600846
版权
微信小程序入门——增删改查+页面跳转+传值取值+布局样式
Dreawer微信小程序联盟
08-04 7192
目标场景 分类管理 技术点 读取分类列表 点击某分类进入编辑页，操作编辑与删除 点击列表页底部按钮，跳转添加，共用编辑页 效果 列表页js var Bmob = require('../../utils/bmob.js');var that;Page({ onLoad: functio
微信小程序精通到入门---07 tabBar和导航跳转
shuixiou1的博客
04-12 913
一、tabBar使用 tabBar就是微信小程序底部的tab框，每个框必须指定一个对应的页面，设置步骤如下。 步骤1、在images文件下创建一个nav目录，并且创建了6个图片（3个tab，每个tab的active和非acitve状态各一张） 步骤2、创建对应的页面，因为我们index页面已经创建好了，只要在创建2个对应的页面nav（用来后面导航演示用途），以及my页面。 步骤3、在app.json进行如下配置 "tabBar": { "list": [ {
微信小程序按钮(button)传参&请求(wx.request)的POST、PUT方法的尝试
m0_55677992的博客
06-06 551
害我找了半天（有水印将就着看吧，我也不会弄）这里后端应该是本来传递的是一个List，但是我给传成了Object，所以出现问题。,所以传递的参数全部都是NULL，BODY中的参数缺失导致报错。以上就是本人在开发中遇到的一点小问题，希望能给大家作为参考。方法向后端传数据，当这里的按钮被触发时，我这里能够获取。事件带过来的数据并且直接把它们放到BODY参数中传递。，然后发现这里传递数据的那两行其实已经把。(2):找不到数据，因为之前没有打印。这里带了两个数据，省的之后再找。多带点数据过来，所以我的。
微信小程序通过按钮传参数
小绵杨
06-22 2668
需求：需要通过删除按钮实现删除云数据库中对应的内容，要删除云数据库中的内容，是以数据的“_id”为依据的。所以我要在js中删除数据，必须获得要删除数据的"_id"。 <button type="primary" size="mini" bindtap="delete" data-id="{{user._id}}">删帖</button> 微信小程序中“ data-*=" " ”可以实现按钮传值。其中‘ * ’号自定义名称，我这里取名为id，然后赋值为user._id。 js中通过按
微信小程序(5)--页面跳转传值（点击item传值）
老邓头
07-07 4043
页面跳转传值
微信小程序点击事件传递自定义参数的方法和跨页面传递数据
05-10 7251
小程序data-用法 data- ：会在事件触发时传递给SERVICE （js文件中的data） 书写方式： 以data-开头，后面接名称，多个单词由连字符-链接，不能有大写(大写会自动转成小写)如data-element-type 最终在 event.currentTarget.dataset 中会将连字符转成驼峰elementType储存。 wxml： <view class="sign-setting-border {{idx==item.Item_id?'selected':''}}" wx
微信小程序页面间值传递的两种方法
10-17
在微信小程序开发中，页面间值传递是一个常见的需求，它涉及到用户数据在不同页面之间的流动。本文将详细介绍两种主要的页面间值传递方法：通过URL带参数传递和使用全局变量。 1. **URL带参数传递** 这种方法类似...
微信小程序分页，检索.zip
03-09
本资料包“微信小程序分页，检索.zip”提供了关于实现这一功能的具体代码示例，包括JS、WXML文件，以及接口取值和传值的方法。 首先，我们要理解微信小程序的架构，它由四部分组成：JSON（配置文件）、WXML（结构...
微信小程序详解
weixin_68658847的博客
03-23 1514
微信小程序详解
微信小程序按钮Button使用详解
代码小疯子
12-03 2万+
微信小程序 按钮 button
微信小程序事件对象传递参数
zss_base的博客
06-19 227
【代码】微信小程序事件对象传递参数。
微信小程序页面间传值方法
m0_65730686的博客
08-12 2512
微信小程序页面间传值方法
微信小程序点击事件如何拿到值
努力搬砖的小码
08-15 1025
微信小程序点击事件
微信小程序通过点击事件传参（data-）
热门推荐
希望看完文章的你能够带着答案离开
06-28 2万+
微信小程序通过点击事件传参（data-）
解决：uni.getMenuButtonBoundingClientRect()；获取到的数据都为零的问题
黑客与画家
09-27 6559
出现场景： 正常进入可以获取得到 但是进入小程序之后，点击右上角，点击重新进入小程序就会出现获取都为0的情况 console.log('oMenuBtn:',oMenuBtn);//打印 width:0,bottom:0,top:0,... 代码是写在App.vue里面，启动后获取状态栏的高度并存到vuex中使用 oMenuBtn = uni.getMenuButtonBoundingClientRect() console.log('oMenuBtn:',oMenuBtn); s
微信小程序点击按钮获取数据（wx：for）
qq_51632935的博客
08-10 5089
微信小程序点击按钮获取响应的数据
微信小程序通过按钮传值和取值问题
fu_jian_ping的博客
10-24 1万+
在wxml文件中进行传值： &lt;button class='cancle_btn' type='default' size='mini' bindtap='cancleCollected' id="{{item.poem_id}}"&gt;取消收藏&lt;/button&gt;   在js文件中进行取值： cancleCollected: function(e) {      con...
微信小程序怎么点击按钮获取button里面的值
信徒博客
01-29 1万+
第一种情况：button里面的值------------数据绑定 wxml代码如下 &lt;view&gt; &lt;button bindtap="getv" name="bu"&gt;{{mess}}&lt;/button&gt; &lt;/view&gt; js代码如下 var meData='中国' Page({   /** * 页面的初始数据 */ data: {...
微信小程序开发，js页面怎么取值
最新发布
03-08
<think>好的，我现在需要帮助用户了解在微信小程序开发中，如何在JS页面取值。首先，我得回忆一下微信小程序的基本结构，它通常由WXML、WXSS、JS和JSON文件组成。JS页面负责处理逻辑，包括数据绑定和事件处理。 用户的问题是关于如何从JS页面获取值，可能包括如何获取页面中的数据，或者从页面元素中获取用户输入的值。常见的场景可能有获取输入框的内容、获取下拉选择的值，或者从数据绑定中读取数据。 首先，我需要考虑数据绑定。在WXML中，可以使用{{}}语法绑定数据，这些数据定义在JS页面的data对象中。例如，在JS中定义data: { message: 'Hello' }，然后在WXML中使用{{message}}显示。用户可能想知道如何在这些情况下获取或更新数据。 接下来，事件处理。当用户与页面交互，比如点击按钮或输入文本时，JS需要通过事件对象来获取值。例如，在输入框的bindinput事件中，可以通过e.detail.value获取输入的值，然后使用setData更新data中的对应字段。 另外，表单组件如input、picker等，它们的值通常通过绑定事件来获取。比如，input组件可以通过bindinput实时获取输入值，而picker组件则通过bindchange事件获取选中的值。 还有，用户可能需要了解如何在不同页面之间传值，比如通过URL参数传递，或者在全局app.js中定义全局变量。或者使用本地存储wx.setStorageSync来存储和获取数据。 需要注意，微信小程序的数据流是单向的，通过setData来更新视图，直接修改data对象是不会触发视图更新的。所以，正确的做法是使用setData方法。 可能还需要提到一些常见的错误，比如在异步回调中直接使用this.setData时，this的指向问题，需要使用箭头函数或者提前保存this。 总结一下，回答的结构应该包括数据绑定、事件处理获取值、表单组件的使用、页面间传值以及注意事项。需要给出具体的代码示例，让用户能够清楚如何操作。</think>在微信小程序的JS页面中，取值主要通过以下方式实现： ### 一、数据绑定取值 ```javascript // page.js Page({ data: { userName: '张三', score: 95 }, showData() { // 直接通过this.data访问 console.log(this.data.userName) // 输出：张三 console.log(this.data.score) // 输出：95 } }) ``` ### 二、表单组件取值（以input为例） ```javascript // WXML <input bindinput="onInput" value="{{inputValue}}" /> // page.js Page({ data: { inputValue: '' }, // 实时获取输入值 onInput(e) { const value = e.detail.value this.setData({ inputValue: value }) console.log('当前输入值：', value) } }) ``` ### 三、页面传值 1. **URL传参**： ```javascript // 跳转页面时 wx.navigateTo({ url: '/pages/detail/detail?id=123&name=test' }) // 接收页面onLoad中获取 onLoad(options) { console.log('接收参数：', options.id) // 123 console.log('接收参数：', options.name) // test } ``` 2. **全局变量**： ```javascript // app.js App({ globalData: { token: 'abcdefg123456' } }) // 任意页面获取 const app = getApp() console.log(app.globalData.token) ``` ### 四、本地存储取值 ```javascript // 存值 wx.setStorageSync('key', 'value') // 取值 const value = wx.getStorageSync('key') console.log('本地存储值：', value) ``` ### 五、注意事项 1. 更新数据必须使用`this.setData()`方法 2. 异步操作中要先保存`this`： ```javascript const that = this wx.request({ success(res) { that.setData({ data: res.data }) } }) ``` 3. 表单组件取值推荐使用`data-*`自定义属性： ```wxml <button data-id="123" bindtap="onTap">按钮</button> <!-- JS --> onTap(e) { const id = e.currentTarget.dataset.id console.log('按钮ID：', id) // 123 } ``` 通过以上方法可以灵活地在JS页面中获取各种数据值，建议根据具体场景选择合适的方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值