微信小程序——picker组件使用对象字段显示object问题

最新推荐文章于 2024-07-26 10:15:33 发布
原创 最新推荐文章于 2024-07-26 10:15:33 发布 · 1.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序 #js

本文揭示了在使用数据对象时，如何通过在range-key字段添加单引号来解决官方文档未明说的问题。一个实用技巧帮助开发者避免object类型困扰。
  • 官方文档说使用数据为对象时加range-key属性指明字段值
    我这边指定后还是object
    在这里插入图片描述
    后面找到方法，在range-key里面字段的身上加个单引号即可解决
    在这里插入图片描述
微信小程序—picker组件（range 是一个 Object Array）
ChibiMarukoChan的博客
06-06 2926
主要记录：当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 此处就以二级联动为例： <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChan...
微信小程序picker联动
gsl371的专栏
06-11 1343
文章目录前言一、picker二、前端代码wxmljs二、后端代码数据样式如下代码总结 前言 一、picker 官方和网上的示例给出的picker用起来不是那么方便，调整联动内容需要修改前端，目前没有发现好的方法；自己写一个，做个记录，方便使用。 二、前端代码 wxml <view class="container"> <view class="section"> <view class="section__title" wx:for="{{firstList}}"
微信小程序 picker选择器出现object
qq_42897782的博客
04-27 7451
js 先简单定义两个数组 // pages/home/home.js const app = getApp(); Page({ data: { lesson: ['美国', '中国', '巴西', '日本'], index: 0, }, /*** 生命周期函数--监听页面加载*/ onLoad: function (options) { var tha...
小程序picker组件下拉显示[object object],而前台能够显示出来
hcy62621822的博客
03-06 1691
@小程序picker组件下拉显示[object object],而前台能够显示出来 1.1前端错误展示 1.2 错误代码 <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}" > <view class="picker"> 自提点选择：{{array[index].shop_address}} </view> </picker>
picker选择器出现object解决办法
08-08 1446
背景：没错，这次也是做项目遇到的问题，简单的记一下，我之前在做人脉小程序的时候也遇到了，不过那个时候水平太低没能解决，今天解决了我就记录一下。前端写的假数据是这样的。可以看到，多了一层嵌套。前端wxml 加一个。......
微信小程序+Vant组件使用van-picker 显示[Object Object]
lryh_的博客
05-01 642
wxml: van-picker 中加上 value-key="name" 解决。
微信小程序城市选择器picker
子钦加油的博客
11-07 3072
picker 基础库 1.0.0 开始支持，低版本需做兼容处理。 从底部弹起的滚动选择器。 属性类型默认值必填说明最低版本 mode string selector 否 选择器类型 1.0.0 disabled boolean false 否 是否禁用 1.0.0 bindcancel eventhandle 否 取消选择时触发 1.9.90 mode 的...
基于微信小程序 + colorUI 做的form表单封装——picker
m0_37890809的博客
02-26 2007
基于微信小程序 + colorUI 做的form表单封装 一、input篇 文章目录 系列文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工.
微信小程序之组件Picker[五类选择器[【默认】普通选择器，多列选择器，时间选择器，日期选择器，省市选择器]]
无名
11-14 3062
Picker 从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。 普通选择器：mode = selector 属性名 类型 默认值 说明 最低版本 range Array / Object Array [] mode为 selector 或 multiSelector 时，range 有...
【微信小程序】开发与配置
领头羊的博客
07-26 2568
准备学习一下怎么开发微信小程序，主要是跟着微信官方文档进行学习，在这里记录一下。
09.08 小程序picker组件出现object
mzh_96的博客
09-08 465
1.1前端错误展示 1.2错误代码 1.3如何改正 在中加入range-key=“name”，就可以正常显示 range就是数组名，value是元素自带的下标，range-key是在二维数组中具体某列的某个值
微信小程序选择框问题 小程序picker点击显示object range-key="这里写要显示的字段"
沉睡的博客
03-15 218
微信小程序选择框问题 小程序picker点击显示object range-key="这里写要显示的字段" <picker bindchange=“bindClassChange” name=“class_name” value=“{{index}}” range=“{{classlist}}” range-key=“class_name”> <view cl...
wx小程序picker 数据为数组对象
黄彪博客
11-05 965
文章目录文章参考案例 文章参考 picker 组件 案例 <picker value="{{placesIndex}}" bindchange="placesPickerChange" range="{{places}}" range-key="regionName"> <view class="picker"> {{places[placesIndex]['re...
2021-01-11 工作记录--Wechat applet-＜van-picker＞得到的是[Object Object]
weixin_48850734的博客
01-11 1405
Wechat applet-<van-picker>得到的是[Object Object]
小程序的picker事件，当数据源不是一维数组而是object的时候获取数据
zxh7770的博客
04-23 1051
小程序picker使用 注意： 小程序的picker，更好的处理的select事件以及应对深层次的多级联动，对于单选的picker，最简单的就是选择数据和要展示的一 一对象，这样我们可以直接使用数据。 展示的数据picker的数据图如下： 使用流程代码如下 1，wxml代码 <picker name="idCard" class="selectPicker" bindchange=...
微信小程序的对象Object
热门推荐
Mr_Tony的专栏
03-28 1万+
从事Java开发的工作者常常会用到Map这个数据结构，但是在微信小程序的数据结构中目前只有以下几种数据结构： number ： 数值 string ：字符串 boolean：布尔值 object：对象 function：函数 array : 数组 date：日期 regexp：正则 里面并没有Map这个数据结构。不过object提供了键值对功能。 可以在一定程度上替代Java里面的Map对象。...
微信小程序 data对象赋值和取值
liuduke1的博客
08-18 5096
微信小程序 data对象赋值和取值 显示静态数据 往data赋值 Page({ data: { motto: 'Hello World' } }) 在***.wxml这样子取data对象的属性 <view "{{motto}}"></view> 显示响应的动态数据 在js中这样子写 function setData(){ var _this= this; that.setData({ message: '新消息' }) } 我就
微信小程序picker组件实现多列选择器
qq_40727842的博客
09-09 8214
【微信小程序】picker组件多列选择器的使用 功能需求 用微信小程序的多列选择器实现对一个树状结构图中的末节点的选择，要求选择器的第一列改变时，后面列的选项会联动改变。树状结构图的部分数据如下图; 图1 数据的树状结构图 效果预览 图2 多列选择器默认图 当选择“卡丘厂”后，后面的选项会联动改变: 图3 首列改变后的联动图 实现过程 1. WXML 使用 的mode = multiSelector时的多列选择器完成。 官方文档针对多列选择器的介绍是这样的： 图4 微信官方文档
小程序picker 多列选择详解
Hero_rong的博客
01-13 1527
需求：选择左边的选项，右边会显示对应的数据。 如果你的数据和官方文档一样，数组套数组的形式，那直接复制复制就行了，这篇文章主要讲，数据是数组里面套对象的这种情况 我的数据结构如下，这就用用到range-key 属性， 首先，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容，如果不加，则页面上显示的都是【object Object】 然后，下面展示的数据里面也要添加name属性，要是不加，页面也是显示的【object Object】 最后，其他的选择...
微信小程序picker选择器时间数据如何存入mysql
最新发布
08-10
<think>根据用户需求，用户希望将微信小程序中picker选择器获取的时间数据存储到MySQL数据库。结合提供的引用内容，我们可以分步骤实现： 1. 在小程序前端，使用picker组件选择时间，并获取选择的时间值。 2. 将时间值通过小程序请求发送到后端（假设后端使用Java，数据库为MySQL）。 3. 后端接收时间数据，并存储到MySQL数据库中。 注意：MySQL数据库中的时间字段通常使用`DATETIME`或`TIMESTAMP`类型。小程序picker选择器返回的时间可能是字符串格式（如"2024-05-30 12:00"），需要转换为后端能够接受的格式。 步骤详解： 1. **微信小程序前端：** - 使用`picker`组件，设置`mode`为`time`（选择时间）或`date`（选择日期）或`datetime`（选择日期和时间）。 - 绑定`bindchange`事件，在事件处理函数中获取选择的时间值。 - 通过`wx.request`将时间数据发送到后端接口。 2. **后端接口（Java）：** - 接收前端发送的时间字符串。 - 将时间字符串转换为`java.util.Date`或`java.time.LocalDateTime`等类型（可以使用SimpleDateFormat或DateTimeFormatter进行转换）。 - 使用MyBatis-Plus将时间数据存入MySQL数据库。 3. **数据库表设计：** - 确保数据库表中有一个字段用于存储时间，类型为`DATETIME`或`TIMESTAMP`。 示例代码： **小程序前端（WXML）：** ```html <picker mode="datetime" value="{{currentTime}}" start="2020-01-01" end="2030-12-31" bindchange="datetimeChange"> <view>当前选择时间：{{currentTime}}</view> </picker> <button bindtap="submit">提交</button> ``` **小程序前端（JS）：** ```javascript Page({ data: { currentTime: '2024-05-30 12:00', // 默认时间 selectedTime: null // 存储选择的时间 }, // picker选择时间事件 datetimeChange: function(e) { this.setData({ currentTime: e.detail.value, selectedTime: e.detail.value }); }, // 提交时间到后端 submit: function() { const that = this; if (!that.data.selectedTime) { wx.showToast({ title: '请选择时间', icon: 'none' }); return; } wx.request({ url: 'https://your-backend-domain.com/api/saveTime', // 替换为实际后端接口 method: 'POST', data: { time: that.data.selectedTime }, success(res) { if (res.data.code === 200) { wx.showToast({ title: '保存成功' }); } else { wx.showToast({ title: '保存失败', icon: 'none' }); } } }); } }) ``` **后端Java代码（Spring Boot + MyBatis-Plus）：** 1. 实体类（Entity）： ```java import com.baomidou.mybatisplus.annotation.TableField; import com.baomidou.mybatisplus.annotation.TableName; import java.util.Date; @TableName("time_record") public class TimeRecord { private Long id; @TableField("record_time") private Date recordTime; // 省略getter和setter } ``` 2. 控制器（Controller）： ```java import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RestController; import java.text.SimpleDateFormat; import java.util.Date; import java.util.Map; @RestController public class TimeController { @PostMapping("/api/saveTime") public String saveTime(@RequestBody Map<String, Object> data) { String timeStr = (String) data.get("time"); SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm"); try { Date date = sdf.parse(timeStr); // 创建TimeRecord对象并设置recordTime为转换后的Date TimeRecord record = new TimeRecord(); record.setRecordTime(date); // 调用MyBatis-Plus的mapper插入数据库 // timeRecordMapper.insert(record); return "success"; } catch (Exception e) { e.printStackTrace(); return "error"; } } } ``` 3. Mapper接口（使用MyBatis-Plus）： ```java import com.baomidou.mybatisplus.core.mapper.BaseMapper; public interface TimeRecordMapper extends BaseMapper<TimeRecord> { } ``` 注意：在实际项目中，需要处理异常、添加事务、返回统一的响应格式等。 **数据库表：** ```sql CREATE TABLE time_record ( id BIGINT PRIMARY KEY AUTO_INCREMENT, record_time DATETIME ); ``` 这样，当用户在小程序中选择时间并点击提交后，时间数据就会被发送到后端，后端将其转换为`Date`类型并存储到MySQL数据库的`record_time`字段中。 相关问题： 1. 微信小程序picker组件如何选择日期和时间？ 2. 如何将前端发送的时间字符串转换为Java中的Date对象？ 3. MySQL数据库中的时间字段应该选择什么类型？</think>### 微信小程序 picker 选择器时间数据存入 MySQL 数据库的方法 #### 1. **小程序前端处理时间数据** 使用 `picker` 组件获取时间值，并通过请求将数据发送到后端： ```javascript // WXML <picker mode="date" value="{{date}}" bindchange="bindDateChange"> <view>选择日期：{{date}}</view> </picker> <picker mode="time" value="{{time}}" bindchange="bindTimeChange"> <view>选择时间：{{time}}</view> </picker> <button bindtap="submit">提交</button> // JS Page({ data: { date: '2023-01-01', time: '12:00' }, bindDateChange(e) { this.setData({ date: e.detail.value }) // 格式: "2023-05-30" }, bindTimeChange(e) { this.setData({ time: e.detail.value }) // 格式: "14:30" }, submit() { const fullTime = `${this.data.date} ${this.data.time}:00`; // 组合成 "2023-05-30 14:30:00" wx.request({ url: 'https://your-domain.com/api/saveTime', method: 'POST', data: { timestamp: fullTime }, success: (res) => { /* 处理响应 */ } }); } }) ``` #### 2. **后端接口处理（Java + MyBatis-Plus）** 接收时间数据并存入 MySQL： ```java // Controller @RestController @RequestMapping("/api") public class TimeController { @Autowired private TimeRecordService timeRecordService; @PostMapping("/saveTime") public ResponseEntity<String> saveTime(@RequestBody Map<String, String> data) { String timestamp = data.get("timestamp"); // 直接存入数据库（MySQL会自动转换字符串为DATETIME） timeRecordService.saveRecord(timestamp); return ResponseEntity.ok("保存成功"); } } // Service @Service public class TimeRecordServiceImpl implements TimeRecordService { @Autowired private TimeRecordMapper timeRecordMapper; public void saveRecord(String timestamp) { TimeRecord record = new TimeRecord(); record.setEventTime(timestamp); // 直接使用字符串 timeRecordMapper.insert(record); } } // Entity @Data @TableName("time_records") // 对应MySQL表名 public class TimeRecord { @TableId(type = IdType.AUTO) private Long id; private String eventTime; // 对应数据库DATETIME字段 } ``` #### 3. **MySQL 数据库配置** - 表结构建议： ```sql CREATE TABLE time_records ( id BIGINT AUTO_INCREMENT PRIMARY KEY, event_time DATETIME NOT NULL -- 存储格式: "YYYY-MM-DD HH:MM:SS" ); ``` - **注意**：MySQL 的 `DATETIME` 类型可直接接收前端传来的 `"2023-05-30 14:30:00"` 格式字符串，无需额外转换[^1]。 #### 4. **关键注意事项** 1. **时区问题**： - 确保小程序、后端服务器、MySQL数据库使用相同时区（推荐 UTC+8） - 可在 MySQL 连接字符串添加参数：`jdbc:mysql://host/db?serverTimezone=Asia/Shanghai` 2. **数据校验**： ```java // 后端增加格式校验 if (!timestamp.matches("\\d{4}-\\d{2}-\\d{2} \\d{2}:\\d{2}:\\d{2}")) { throw new IllegalArgumentException("时间格式错误"); } ``` 3. **安全防护**： - 使用 HTTPS 传输防止数据截获 - 添加用户身份验证（如微信 openid 绑定） #### 5. **替代方案：时间戳传输** 若需避免时区问题，可使用时间戳（毫秒数）： ```javascript // 小程序端 submit() { const timeMs = new Date(`${this.data.date} ${this.data.time}`).getTime(); wx.request({ data: { timestamp: timeMs } }) } ``` ```java // 后端转换 LocalDateTime dateTime = Instant.ofEpochMilli(timestamp) .atZone(ZoneId.of("Asia/Shanghai")) .toLocalDateTime(); record.setEventTime(dateTime); ``` --- ### 相关问题 1. 如何在小程序中实现多级联动选择器（如省市区）？ 2. MySQL 的 `DATETIME` 和 `TIMESTAMP` 类型有什么区别？ 3. 微信小程序如何防止用户频繁提交重复数据？ 4. MyBatis-Plus 如何自动填充创建时间/更新时间字段？ [^1]: MySQL 官方文档说明：字符串到 DATETIME 的隐式转换支持标准格式 `YYYY-MM-DD HH:MM:SS`。 [^2]: 微信小程序 picker 组件文档中明确返回值为字符串格式。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值