wepy开发小程序

以input为例,微信小程序没有数据双向绑定,input要显示绑定的数据即value等于一个绑定的量

<input type="text" value="{{inputdata}}"/>
data = {
  inputdata: '数据'
}

当在input中改变内容后,inputdata并不会变化,需要绑定事件,通过编写程序来改变inputdata。

但开发过程中如果input等表单控件很多的话,这些事件一个一个写就会感到很麻烦,所以编写一个程序来实现数据的绑定是大家都想实现的。

我实现的方法如下:

<input type="text" bindinput="inputeidt" data-obj="obj" data-item="item" value="{{obj.item}}"/>
inputeidt: function (e) {
let dataset = e.currentTarget.dataset
this[dataset.obj][dataset.item] = e.detail.value
}

这样当input中输入内容时,数据也会发生改变。

这时虽然能实现数据随着视图变化,但对于数据的结构过于局限,只能是obj:{item: ‘’} 这样的,如果是这样的:

moreinfo: {
title: '详细信息',
get: 'findDetailsByUserId',
save: 'saveDetails',
item: {
name: {
name: 'name',
title: '姓名',
type: 'input',
value: '',
placeholder: '请填写',
required: true
},
sex: {
name: 'sex',
title: '性别',
type: 'picker',
value: '',
placeholder: '请选择',
required: true,
range: [
{
id: 1,
name: '男'
},
{
id: 2,
name: '女'
}
]
}
}
}
绑定moreinfo.item.name.value就不行了, 我在解决时用了ES6的代理(写在onLoad中)
let self = this
self.saveinfo = new Proxy({}, {
  set: function (target, key, value, receiver) {
// 给saveinfo中属性赋值前,可以令程序执行其他功能
self.
moreinfo.item[key].value = value
    return Reflect.set(target, key, value, receiver)
}
})

项目中input是遍历出来的,遍历moreinfo.item

<input type="text"  wx:if="{{item.type === 'input'}}" bindinput="inputeidt" data-obj="saveinfo" data-item="{{item.name}}" value="{{item.value}}"/>

这样就实现了。上面的js要写在onLoad中,如果在data中写的话,会发生问题,当页面第二次打开时,saveinfo便不再是代理,而变成了{},结果便不能正常改变数据的值。

使用bindinput而不用bindblur是因为点击其他元素后,input失去焦点,是会先触发点击事件,才触发失去焦点事件。这样点击保存按钮,就会先保存,后更改数据,使得数据没有更改,所以使用bindinput,但使用bindinput可能性能不好。

使用bindblur的话,点击保存按钮保存数据的事件中一定要写一个延时来解决,setTimeout(() => {//上传保存逻辑}, 100)

具体行为可以查看我写的小程序:约会宝的个人信息填写页面

微信小程序实现部分双向数据绑定(为input、picker、textarea编写统一的更新数据逻辑)的更多相关文章

  1. 微信小程序学习笔记二 数据绑定 + 事件绑定

    微信小程序学习笔记二 1. 小程序特点概述 没有DOM 组件化开发: 具备特定功能效果的代码集合 体积小, 单个压缩包体积不能大于2M, 否则无法上线 小程序的四个重要的文件 *js *.wxml - ...

  2. 微信小程序开发之页面数据绑定

    js:Page( { data:{ parmer:"",             //字符串参数 userinfo:{      userphone:"",   ...

  3. 微信小程序--问题汇总及详解之picker 增、删

    <block wx:for="{{salesList}}" wx:for-index="index" wx:key="id" wx:f ...

  4. 解决微信小程序开发者工具输入框焦点问题

    Windows10笔记本上运行微信小程序开发者工具,输入框(input,textarea)没有焦点,只能在真机调试,效率太低.后来发现是Window10对笔记本高分屏支持不好,要DPI缩放,导致兼容性 ...

  5. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  6. 微信小程序 教程及示例

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有,转载请联系作者获得授权.微信小程序正式公测, ...

  7. 微信小程序资料集合

    一:官方地址集合: 1:官方工具:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1476434678461 2: ...

  8. 微信小程序源码推荐

    wx-gesture-lock  微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...

  9. (二)校园信息通微信小程序从后台获取首页的数据笔记

    在从后台获取数据之前,需要先搭建好本地服务器的环境. 确保Apache,MySql处于开启状态.下图为Apache,MySql处于开启时状态 然后进入后台管理平台进行字段和列表的定义 然后在后台添加数 ...

随机推荐

  1. wamp 进入到项目中找不到localhost

    重点在 www 目录的 index.php 里面,把里面没有第一句没有被注释的话: $suppress_localhost = true; 改成 $suppress_localhost = false ...

  2. 布局fixed和sticky

    sticky非常非常非常好用怎么用看代码: 这里为什么没有设置高度呢,因为这个高度应该是浏览器高度,浏览器高度在时刻变化怎么办? js处理: 此JS里面会有执行方法一步一步看 这个里面有JS方法 这个 ...

  3. 初试kotlin:用Kotlin开发桌面/CommandLine 工具

    既然kotlin是google和jetbrain联合搞的,开发环境不用说了肯定是Intellij Idea了. 先创建一个kotlin项目. 先来一个HelloWorld package com.xi ...

  4. MVEAN_day05 Nexus私服对的搭建

    序言:为什么要搭建私服 因为在公司中我们是以团队进行开发的,不在是在自己的本地仓库中进行,我们需要连接公司远程仓库进行jar依赖.在公司的局域网中搭建的私服,然后开发人员连接这台计算机,进行团队开发. ...

  5. java八大数据类型

    基本数据类型以值传递的方式进行传递,String以值传递的方式传递,其他的以地址的方式进行传递 分别是:byte  short  int  long  float  double char boole ...

  6. python练习题-day8

    1.有如下文件,a1.txt,里面的内容为: 老男孩是最好的培训机构, 全心全意为学生服务, 只为学生未来,不为牟利. 我说的都是真的.哈哈 分别完成以下的功能: a,将原文件全部读出来并打印. wi ...

  7. 家庭记账本之微信小程序(三)

    继上篇注册阶段后,经过查阅资料学习后,以下介绍开发阶段 1.登录微信公众平台就能在菜单“开发”---“基本配置”中看到小程序的AppID了. 小程序的 AppID 相当于小程序平台的一个身份证,后续你 ...

  8. Docker:使用自定义redis.conf运行redis容器(7)

    演示环境:win7+docker toolbox 1.自定义配置文件 首先在Windows环境下准备好配置文件redis 然后打开Quickstart终端输入命令: cp -rf ~/Desktop/ ...

  9. git基本操作及上传代码到gitHub

    1.基本配置: 配置用户名:git config --global user.name" "; 配置邮箱:git config --global user.email " ...

  10. [ Python ] KMP Algorithms

    def pmt(s): """ :param s: the string to get its partial match table :return: partial ...