新手入门微信小程序简单项目实战二

您所在的位置:网站首页 webpack微信小程序 新手入门微信小程序简单项目实战二

新手入门微信小程序简单项目实战二

2023-04-08 23:12| 来源: 网络整理| 查看: 265

医疗急救卡 介绍

该小程序实现了form表单的写入以及对数据的增加,修改,删除,查询的功能。将写入的数据存入小程序的本地缓存Storage中,对缓存数据进行操作,同时对一些表单数据进行了表单验证功能。

要求

image.png

image.png

image.png

示例

form.gif

导读指导 1. 什么是本地缓存?

每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage/wx.setStorageSync、 wx.getStorage/wx.getStorageSync、 wx.clearStorage/wx.clearStorageSync wx.removeStorage/wx.removeStorageSync

对本地缓存进行读写和清理。上面的set和get都有对应的Sync方法,带Sync的方法为同步方法、不带Sync的方法为异步方法。

缓存可以保存数组、数值、字符串、对象。

不懂可以继续看一看官方文档 微信开放文档

2.什么是form表单?

表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。

当点击 form 表单中 form-type 为 submit 的 button 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。

先看一下部分代码

在代码 我采取了动态绑定函数。在上一个音乐播放器中也是这样, 因为这样写可以省略许多的代码,使代码格式简洁。 因为创建表单信息和修改表单信息,都是通过对整个form进行操作。 当点击完成创建按钮时,表单会调用onSubmit函数,同时拿到整个表单中的值。 写入的值可以通过 e.detail.value 拿取。 完成创建 重置医疗急救卡 打电话给紧急联系人 编辑医疗急救卡 删除医疗急救卡 删除所有医疗急救卡 复制代码 wxml 出生日期 {{date}} 医疗状况 医疗笔记 过敏反应 用药 血型 {{selector}} 器官捐赠者 身高 厘米 体重 千克 紧急联系人号码 完成创建 重置医疗急救卡 打电话给紧急联系人 编辑医疗急救卡 删除医疗急救卡 删除所有医疗急救卡 复制代码 正式开启小程序实战 时间选择器-picker

image.png

wxml // End 是picker 自带的api 可以对时间选择器进行范围控制 // 我采取了动态绑定 实现了 当前选择器不能选择超过当前日子的时间 // fields有效值 year,month,day,表示选择器的粒度 出生日期 {{date}} 复制代码 // 获取当前时间 并转换格式 year-month-day let month = Number(new Date().getMonth() + 1) < 10 ? '0' + Number(new Date().getMonth() + 1) : Number(new Date().getMonth() + 1) let day = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate() var Time = new Date().getFullYear() + '-' + month + '-' + day // 确保时间 是动态 的数据 onLoad(options) { this.setData({ Time: Time }) }, // 动态改变选择器的值 dateChange: function (e) { let value = e.detail.value; this.setData({ date: value }) }, 复制代码 textarea文本输入框

文本输入框只能有一行显示,并且带有滚动效果。

image.png

wxml 利用scroll-y 实现滚动效果 不过要设置一个固定的高度。 医疗状况 复制代码 单列选择器-血型-picker

注意这里的selector通过表单拿到的数据为blood的一个下标

因为 blood: ['未知', 'A型', 'B型', 'C型', 'AB型', 'O型']

image.png

wxml 血型 {{selector}} 复制代码 js // 动态改变选择器的值 // 将拿到的i进行重新获取 血型再继续赋值 selectorChange: function (e) { let i = e.detail.value; let value = this.data.blood[i]; this.setData({ selector: value }) }, 复制代码 switch选择器

注意事项,就是在管理页面显示的时候我们是以 是,否 显示,所以要创建一个键值对对象包含该值 而创建页中,我们只是单纯以switch 开关显示。

image.png

wxml 创建页 器官捐赠者


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3