备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

微信小程序的动态表单，实现房屋租赁的多租客录入（二）

2023-07-18 134
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 微信小程序的动态表单，实现房屋租赁的多租客录入

3.2 编写一个子表单

子表单的界面如下图所示，包括租赁人的姓名、电话、身份证和人脸信息。

简单分析一下界面，第一行是一个静态文本，即 请登记从租客 N 的信息，和一个删除按钮，这个直接使用循环编译语法读取下标即可。

代码如下所示。

<view class="weui-cells__title tishi">
    请登记从租客 N 的信息：
    <button type="warn" size="mini" class='buttomm' bindtap="deleteCongItem">删除</button>
</view>

第二行是姓名表单，普普通通的一个输入框即可。

<view class="weui-cell weui-cell_active hang">
    <view class="weui-cell__hd"><label class="weui-label">姓名</label></view>
    <view class="weui-cell__bd">
        <input class="weui-input" placeholder="从租客姓名" bindblur="lesseeName2" value="张三" placeholder-class="weui-input__placeholder" />
    </view>
</view>

第三行是电话表单，也是普普通通的一个输入框即可。

<view class="weui-cell weui-cell_active hang">
    <view class="weui-cell__hd"><label class="weui-label">电话</label></view>
    <view class="weui-cell__bd">
        <input class="weui-input" placeholder="从租客电话" bindblur="lesseeMobile2" value="17800000001" placeholder-class="weui-input__placeholder" />
    </view>
</view>

第四行是身份证表单，更是普普通通的一个输入框即可。

<view class="weui-cell weui-cell_active hang">
    <view class="weui-cell__hd"><label class="weui-label">身份证</label></view>
    <view class="weui-cell__bd">
        <input class="weui-input" placeholder="从租客身份证" bindblur="lesseeCard2" value="330200200001010000" placeholder-class="weui-input__placeholder" />
    </view>
</view>

前面三个输入型表单，都需要将用户输入的值绑定到某个变量，这时就需要用到一个变化监听事件。

如身份证的 input 表单中，有 bindblur="lesseeCard2" 的属性复制，也就是当这个输入框的数据发生变化时，会执行 lesseeCard2 事件。

lesseeCard2: function (e) {
        this.setData({
            lesseeCard2: e.detail.value
        })
    },

这样就可以间接实现数据的双向绑定。

第五行是人脸上传，这是一个文件上传，可以分为上传按钮和上传图片的预览框，界面代码如下图所示。

<view class='upload_img'>
    <view class='upload_img_btn'>
        <view class='title'>
            <view class='shu'></view>
            <text>人脸</text>
        </view>
        <button type="primary" bindtap="chooseImageItem" data-itemid="{{idx}}" class='btn'>添加</button>
    </view>
    <view wx:if="{{item.photo != ''}}" class='img_box' id='imgs' style='display:flex;justify-content: space-between;padding-top:10px;'>
            <view class="q-image-wrap imgs">
                <image class="q-image" src="{{item.photo}}" mode="aspectFit" data-idx="{{item.photo}}" bindtap="handleImagePreviewItem"></image>
                <view class="q-image-remover delete" data-idx="{{idx}}" bindtap="removeImageItem">删除</view>
            </view>
    </view>
</view>

上传后的预览效果如下图所示。

在用户点击 添加 按钮时，触发 chooseImageItem 方法，调用系统的相册选择，代码如下图所示。

chooseImageItem: function (e) {
    var that = this;
    var itemId = e.currentTarget.dataset.itemid;
    wx.chooseImage({
        sizeType: ['compressed'], //可选择原图或压缩后的图片
        sourceType: ['camera'],
        // sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
        success: res => {
            console.log(res.tempFilePaths);
            console.log(res.tempFilePaths[0]);
            that.uploadImageItem(res.tempFilePaths[0], itemId);
        }
    })
},

其中 uploadImageItem 是自己实现的上传图片方法，即将用户上传到微信的临时性图片持久化存储到自己的业务系统，最终返回一个图片网址（即字符串，回写到图片数组中）。

uploadImageItem(e, itemId) {
    var that = this;
    wx.uploadFile({
        url: app.data.appUrl + '/upload/uploadAppletImages?g=api&m=banana&a=upload_info',
        filePath: e,
        method: 'GET',
        name: 'file',
        header: {
            "Content-Type": "application/x-www-form-urlencoded",
            'accessToken': app.data.token
        },
        success: function (res) {
            console.log(JSON.parse(res.data));
            var imageUrl = JSON.parse(res.data).result;
            if(imageUrl == undefined) {
                imageUrl = res.data.result;
            }
            var list = that.data.congList;
            list[itemId].photo = imageUrl;
            console.log(list);
            that.setData({
                congList: list
            })
        },
        fail: function (res) {
            console.log(res);
        },
    })
},

3.3 使用 wx:for 语法实现循环渲染

在 Vue 中可以使用 v-for 实现循环渲染，在微信小程序中也一样可以。

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。

比如有一个租客数组 leaveList，其中姓名字段为 name，就可以这么去表示。

<view wx:for="{{leaveList}}">
  租客{{index}}: {{item.name}}
</view>

我们可以用 wx:for-item 可以指定租赁数组当前元素的别名，下面的代码执行效果等同于上面。

<view wx:for="{{leaveList}}" wx:for-item="myItem">
  租客{{index}}: {{myItem.name}}
</view>

我们可以用 wx:for-index 可以指定数组当前下标的变量名，下面的代码执行效果等同于上面。

<view wx:for="{{leaveList}}" wx:for-index="myIndex">
  租客{{myIndex}}: {{item.name}}
</view>

另外在循环渲染时还需要提供一个 wx:key，文档说明如下。

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略

所以我们需要改造成这样：

<view wx:for="{{leaveList}}" wx:key="index">
  租客{{index}}: {{item.name}}
</view>

我们最终的目标是实现从租客的循环渲染，所以只需要在第二步的代码上套一层循环，代码如下所示。

<view class="box" wx:for="{{congList}}" wx:for-item="item" wx:for-index="idx" wx:key="idx">
    <view class="weui-cells__title tishi">
        请登记从租客{{idx + 1}}的信息：
        <button type="warn" size="mini" class='buttomm' bindtap="deleteCongItem" data-idx="{{idx}}">删除</button>
    </view>
    <!-- 开始 -->
    <view class="weui-cell weui-cell_active hang">
        <view class="weui-cell__hd"><label class="weui-label">姓名</label></view>
        <view class="weui-cell__bd">
            <input class="weui-input" placeholder="从租客姓名" data-itemid="{{idx}}" bindblur="lesseeName2" value="{{item.lesseeName}}" placeholder-class="weui-input__placeholder" />
        </view>
    </view>
    <!-- 结尾 -->
    <!-- 开始 -->
    <view class="weui-cell weui-cell_active hang">
        <view class="weui-cell__hd"><label class="weui-label">电话</label></view>
        <view class="weui-cell__bd">
            <input class="weui-input" placeholder="从租客电话" data-itemid="{{idx}}" bindblur="lesseeMobile2" value="{{item.lesseeMobile}}" placeholder-class="weui-input__placeholder" />
        </view>
    </view>
    <!-- 结尾 -->
    <!-- 开始 -->
    <view class="weui-cell weui-cell_active hang">
        <view class="weui-cell__hd"><label class="weui-label">身份证</label></view>
        <view class="weui-cell__bd">
            <input class="weui-input" placeholder="从租客身份证" data-itemid="{{idx}}" bindblur="lesseeCard2" value="{{item.lesseeCard}}" placeholder-class="weui-input__placeholder" />
        </view>
    </view>
    <!-- 结尾 -->
    <view class='upload_img'>
        <view class='upload_img_btn'>
            <view class='title'>
                <view class='shu'></view>
                <text>人脸</text>
            </view>
            <button type="primary" bindtap="chooseImageItem" data-itemid="{{idx}}" class='btn'>添加</button>
        </view>
        <view wx:if="{{item.photo != ''}}" class='img_box' id='imgs' style='display:flex;justify-content: space-between;padding-top:10px;'>
                <view class="q-image-wrap imgs">
                    <image class="q-image" src="{{item.photo}}" mode="aspectFit" data-idx="{{item.photo}}" bindtap="handleImagePreviewItem"></image>
                    <view class="q-image-remover delete" data-idx="{{idx}}" bindtap="removeImageItem">删除</view>
                </view>
        </view>
    </view>
</view>

对于数据的双向绑定，以姓名为例，代码如下所示。

<view class="weui-cell weui-cell_active hang">
    <view class="weui-cell__hd"><label class="weui-label">姓名</label></view>
    <view class="weui-cell__bd">
        <input class="weui-input" placeholder="从租客姓名" data-itemid="{{idx}}" bindblur="lesseeName2" value="{{item.lesseeName}}" placeholder-class="weui-input__placeholder" />
    </view>
</view>

使用 data-itemid="{{idx}}" 语法，可以将当前下标值作为 itemid 参数，传到 lesseeName2 事件中，事件的代码如下所示。

lesseeName2: function (e) {
    console.log(e);
    var itemId = e.currentTarget.dataset.itemid;
    var list = this.data.congList;
    list[itemId].lesseeName = e.detail.value;
    this.setData({
        congList: list
    })
},

首先根据下标读取到当前子表单的数据，然后赋值，最后再会写，完成双向数据绑定操作。

3.4 表单提交

当表单的数据全部输入完成，也绑定到相应的变量后，就可以对表单数据进行提交，由后端持久化到数据库。

对于提交按钮，只是一个普普通通的按钮，一行代码即可。

<button type="primary" bindtap="addTenant" loading="{{submitLoading}}" disabled="{{submitLoading}}" class='weui-btn weui-btn_primary'>提交</button>

用户点击提交按钮后，首先需要对数据进行判空，如果没问题了直接传到 API 接口，继续下步的业务逻辑，相关代码如下所示。

addTenant: function () {
    var that = this;
    if (that.data.lesseeName == '') {
        wx.showToast({
            title: '租赁人姓名为空',
            icon: "none"
        })
    } else if (that.data.lesseeMobile == '') {
        wx.showToast({
            title: '租赁人电话为空',
            icon: "none"
        })
    } else if (that.data.lesseeCard == '') {
        wx.showToast({
            title: '租赁人身份证为空',
            icon: "none"
        })
    }
    else if (that.data.images2.length < 1) {
        wx.showToast({
            title: '请上传租客人脸',
            icon: "none"
        })
    } else {
        that.setData({
            submitLoading: true
        })
        wx.showLoading({});
        var form = {};
        form.lesseeName = that.data.lesseeName;
        form.lesseeMobile = that.data.lesseeMobile;
        form.lesseeSex = that.data.sexList[that.data.sexIndex];
        form.mainFlag = that.data.mainList[that.data.mainIndex];
        form.lesseeCard = that.data.lesseeCard;
        form.province = that.data.province;
        form.city = that.data.city;
        form.county = that.data.county;
        form.lesseeAddress = that.data.lesseeAddress;
        form.workUnit = that.data.workUnit;
        form.address = that.data.address;
        form.roomId = that.data.roomId;
        form.registerDate = that.data.registerDate;
        form.outDate = that.data.outDate;
        form.photo = that.data.images2[0];
        form.leaseContract = that.data.images[0];
        form.remark = that.data.remark;
        form.roomId = that.data.roomId;
        form.auditMessage = JSON.stringify(this.data.congList);
        wx.request({
            url: app.data.appUrl + '/leaseRecord/insertOnApp',
            method: 'POST',
            data: form,
            header: {
                "Content-Type": "application/x-www-form-urlencoded",
                'accessToken': app.data.token
            },
            success(res) {
                console.log(res);
                if (res.data.success) {
                    that.setData({
                        errMsg: ""
                    })
                    wx.showModal({
                        title: "登记成功",
                        content: "租客登记成功，请等待审核！是否返回房间页面？",
                        success() {
                            if (res.confirm) {
                            } else {
                                wx.navigateBack({
                                    delta: 1,
                                })
                            }
                        }
                    })
                } else {
                    that.setData({
                        errMsg: res.data.message
                    })
                    wx.showToast({
                        title: "添加失败",
                        icon: "error"
                    })
                }
            },
            complete: function () {
                wx.hideLoading();
                that.setData({
                    submitLoading: false
                })
            }
        })
    }
},

4 总结

本文将介绍如何使用微信小程序编写动态表单，最终实现房屋租赁系统中多租客录入的业务。

业务驱动式学习是一种高效的学习方法，希望同学们不要只埋头于技术上，多多关注一些业务场景，因为业务和技术同等重要！

文章标签：
JavaScript
API
数据库
存储
小程序
关键词：
微信表单
微信小程序表单
微信小程序租赁
微信小程序房屋租赁
微信小程序表单租赁租客
Designer小郑
目录
相关文章
我是夜阑的狗
|
1月前
|
存储 小程序 JavaScript
【微信小程序】-- 表单组件 - picker 实现日期选择器（五十三）
【微信小程序】-- 表单组件 - picker 实现日期选择器（五十三）
我是夜阑的狗
72 1
小蜗牛耶
|
3月前
|
小程序 JavaScript Java
基于微信小程序的房屋租赁系统设计与实现(源码+lw+部署文档+讲解等)
基于微信小程序的房屋租赁系统设计与实现(源码+lw+部署文档+讲解等)
小蜗牛耶
155 0
基于微信小程序的房屋租赁系统设计与实现(源码+lw+部署文档+讲解等)
码农日常
|
4月前
|
小程序 JavaScript
小程序表单组件——button
小程序表单组件——button
码农日常
30 0
祈澈菇凉
|
5月前
|
小程序 前端开发 JavaScript
小程序提交form表单
微信小程序提交form表单内容
祈澈菇凉
54 0
程序员三木
|
7月前
|
小程序
微信小程序表单获取神器
微信小程序表单获取神器
程序员三木
44 0
微信小程序表单获取神器
sysdzw
|
7月前
|
移动开发
微信h5扫码接口范例：使用localStorage防止扫码后表单其他内容丢失
微信h5扫码接口范例：使用localStorage防止扫码后表单其他内容丢失
sysdzw
73 0
迪_迦
|
8月前
|
小程序 数据安全/隐私保护
小程序封装form表单
本文主要介绍了如何封装一个表单组件，在封装表单组件时，我们需要定义组件属性和方法、组件模板和组件样式，以确保组件能够在页面中正常使用。通过本文的介绍，希望能够更好地帮助大家理解表单组件的封装方式，并在实际项目中应用。
迪_迦
139 0
漏刻有时
|
9月前
|
移动开发 小程序 开发者
微信小程序学习实录1(wxml文档、引入weui、双向数据绑定、提交表单到后端)
微信小程序学习实录1(wxml文档、引入weui、双向数据绑定、提交表单到后端)
漏刻有时
144 0
桃李春风一杯酒
|
18天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录，强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端（网络、页面跳转、用户输入、逻辑异常）和后端（数据库、API、业务逻辑）方面；日志记录则关注关键操作和异常情况的追踪。实践中，前端可利用try-catch处理异常，后端借助日志框架记录异常，同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作，以优化异常处理与日志记录流程。
桃李春风一杯酒
33 0
桃李春风一杯酒
|
18天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录，而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中，开发者可利用微信登录获取用户信息，集成第三方登录，以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性，以保障小程序的安全运行和良好体验。通过这些方法，开发者能有效掌握小程序全栈开发技术。
桃李春风一杯酒
40 0

热门文章

最新文章

  • 1
    微信团队分享：来看看微信十年前的IM消息收发架构，你做到了吗
  • 2
    开学已经一个月了，老师把最近考试成绩发到了微信群里，我用 ChatGPT 简单分析一下
  • 3
    调用第三方接口微信登录接口
  • 4
    【Python+微信】【企业微信开发入坑指北】4. 企业微信接入GPT，只需一个URL，自动获取文章总结
  • 5
    小程序全栈开发中的跨域问题及其解决方案
  • 6
    小程序全栈开发中的多端适配与响应式布局
  • 7
    小程序全栈开发中的RESTful API设计
  • 8
    小程序全栈开发：前端与后端的完美结合
  • 9
    H5和小程序有什么区别
  • 10
    微信小程序全栈开发之性能优化策略
  • 1
    【微信小程序】-- 表单组件 - picker 实现日期选择器（五十三）
    72
  • 2
    【微信小程序】TypeError: Cannot read property ‘get‘ of undefined & Error: MiniProgramError
    90
  • 3
    【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果（五十二）
    46
  • 4
    【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果（五十一）
    49
  • 5
    【微信小程序】-- 使用 Git 管理项目（五十）
    36
  • 6
    【微信小程序】-- uni-app 项目创建 & 目录结构讲解（四十九）
    57
  • 7
    【微信小程序】-- 配置uni-app的开发环境（四十八）
    37
  • 8
    【微信小程序】-- npm包总结 --- 基础篇完结（四十七）
    40
  • 9
    【微信小程序】-- 案例 - 自定义 tabBar（四十六）
    54
  • 10
    【微信小程序】-- 分包 - 独立分包 & 分包预下载（四十五）
    42

    • 相关课程

    更多
  • IoT小程序框架课程
  • 实时数据应用：实现淘宝母婴订单实时查询和可视化

    • 相关电子书

    更多
  • 微信PaxosStore简介
  • 微信移动客户端-数据存储优化实践
  • 微信广告引擎与播放节奏算法实践

    • 相关实验场景

    更多
  • 1分钟SAE部署PHP商城小程序
  • 实现淘宝母婴订单实时查询和实时大屏
  • 收银台的场景化界面实践
  • 阿里云IoT小程序应用开发和组件实践
  • 搭建IoT小程序开发环境，创建一个应用
  • EMAS Serverless搭建《私人云相册》小程序
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考