实验七 智能手机互联网程序设计(微信程序方向)实验报告

               

  • 请编写一个用户登录界面,提示输入账号和密码进行登录,要求在输入后登陆框显示为绿色;

   

二、实验步骤与结果(给出对应的代码或运行结果截图)

index.wxml

<view class="content">

  <view class="account">

    <view class="title">账号</view> 

    <view class="num"><input bindinput="accountInputplaceholder="用户名/邮箱/手机号placeholder-style="color:#999999;"/></view>

    <view class="hr"></view>

  </view>

  <view class="account">

    <view class="title">密码</view> 

    <view class="num"><input bindblur="pwdBlurplaceholder="请输入密码password placeholder-style="color:#999999;"/></view>

    <view class="see">

      <image src="/images/see.jpgstyle="width:42px;height:30px;"></image>

    </view>

  </view>

  <view class="hr"></view>

  <button class="btndisabled="{{disabled}}" type="{{btnstate}}" bindtap="login">登录</button>

  <view class="operate">

    <view><navigator url="../mobile/mobile">手机快速注册</navigator></view>

    <view><navigator url="../company/company">企业用户注册</navigator></view>

    <view>找回密码</view>

  </view>

</view>

index.wxss

.content{

  margin-top: 40px;/* 设置内容区顶部外边距为40px,用于与上方元素的间隔 */

}

.account{

  display: block;/* 设置.account类的元素为块级元素,这意味着它会占据一整行 */

  padding-left: 20px;/* 设置.account类元素的左内边距为20px */

  padding-top: 20px;/* 设置.account类元素的顶部内边距为20px */

 padding-bottom: 10px; /* 设置.account类元素的底部内边距为10px */

  width: 90%;/* 设置.account类元素的宽度为其父容器宽度的90% */

}

.title{

  float: left;/* .title类的元素向左浮动,使其在水平方向上靠左排列 */

 margin-right: 30px; /* 设置.title类元素右侧的外边距为30px,用于与右侧元素的间隔 */

  font-weight: bold ;/* 设置.title类的文本为粗体 */

}

.hr{

  border: 1px solid #cccccc;/* 设置.hr类的边框为1px宽,实线,颜色为#cccccc */

  opacity: 0.2;/* 设置.hr类的不透明度为0.2,使边框显得更为透明 */

 width: 90%; /* 设置.hr类元素的宽度为其父容器宽度的90% */

  margin: auto;/* 设置.hr类元素的上下外边距为0,左右外边距自动,从而使其水平居中 */

}

.see{

 position: absolute; /* 设置.see类的定位为绝对定位,它将相对于最近的定位非static元素进行定位 */

  margin-right: 20px;/* 设置.see类元素相对于其父元素右侧的距离为20px */

}

.btn{

 width: 90%; /* 设置.btn类的按钮宽度为其父容器宽度的90% */

 margin-top: 40px; /* 设置.btn类的按钮顶部外边距为40px,用于与上方元素的间隔 */

  color: #999999;/* 设置.btn类的按钮文本颜色为#999999,这是一种灰色调 */

}

.operate{

 display: block; /* 设置.operate类的元素为块级元素,这意味着它会占据一整行 */

}

.operate view{

  display: inline-block;/* 设置.operate类中的view元素为内联块级元素,允许它们在一行内并排显示 */

  width: 33%;/* 设置每个view元素的宽度为其父容器宽度的33%,允许三个元素平分一行 */

  text-align: center;/* 设置文本在每个view元素内居中对齐 */

  margin-top: 40px;/* 设置每个view元素顶部的外边距为40px,用于与上方元素的间隔 */

  font-family: 14px;/* 设置字体大小为14px,适合阅读而不显得过大或过小 */

 color: #333333; /* 设置文本颜色为深灰色(#333333),提供良好的可读性 */

}

.login{

 display: block; /* 设置.login类的元素为块级元素,这意味着它会占据一整行 */

  margin-top: 150px;/* 设置.login类元素顶部外边距为150px,用于与上方元素的显著间隔 */

  text-align: center;/* 设置.login类的文本在元素内居中对齐 */

}

.login view{

  display: inline-block/* 设置.login类中的view元素为内联块级元素,允许它们在一行内并排显示 */

}

index.js

Page({

  data: {

    disabled: true, // 初始化登录按钮为禁用状态

    btnstate: "default", // 设置按钮的初始样式为默认

    account: "", // 初始化账户数据为空

    password: "" // 初始化密码数据为空

  },

  //判断输入框里是否有字,有内容则按更改按钮样式

  accountInput(e) {

    var content=e.detail.value;

    // 获取输入框内的值

    console.log(content);

     // 在控制台输出当前输入的内容

      if (content != ''{

        this.setData({disabled:false,btnstate:"primary",account:content});// 如果输入不为空,设置按钮为启用状态,更改按钮样式为"primary",并更新账户数据

      } else {

        this.setData({disabled:true,btnstate:"default"});// 如果输入为空,重置按钮为禁用状态和默认样式

      }

  },

  //失去焦点后获取密码框的值,进行更新

  pwdBlur(e) {

    var password =e.detail.value;// 获取密码输入框内的值

      if (password != ''{

        this.setData({password:password});// 如果密码输入不为空,更新密码数据

      }

  },

  //模拟登录成功界面

  login(){

    console.log("账号:"+this.data.account)//将登陆成功后的账号输出至控制台

    console.log("密码:"+this.data.password)//将登陆成功后的密码输出至控制台

    wx.showToast({

      title: '完成登录', //可视化

    })

  }

})

思路

1.WXML
1.1 定义登录表单视图
页面的主体内容被一个名为“content”的view组件包含,作为容器包括所有子组件,包括账号输入框、密码输入框以及登录按钮。
<view class="content">

1.2 添加账号输入部分
在“content”视图内,首先添加了一个“account”类的view组件,用于用户输入账号信息:

标题:包含一个静态文本“账号”,显示在输入框的左侧。
输入框:使用input组件,提供了输入反馈的绑定事件bindinput="accountInput",并设置了灰色的占位文字。<view class="account">


  <view class="title">账号</view>
  <view class="num"><input bindinput="accountInput" placeholder="用户名/邮箱/手机号" placeholder-style="color:#999999;"/></view>
</view>


1.3 添加分割线
在账号输入框下方添加了一个名为“hr”的view组件,用作视觉上的分割线,增强布局的分区效果。
<view class="hr"></view>


1.4 添加密码输入部分
紧接着,为密码输入设置了一个与账号输入类似的布局:

标题:同样包含一个静态文本“密码”。
输入框:input组件用于密码输入,绑定了失焦事件bindblur="pwdBlur",并设置密码隐藏。
查看密码:通过一个image组件实现,点击后可以查看或隐藏密码。

<view class="account">
  <view class="title">密码</view>
  <view class="num"><input bindblur="pwdBlur" placeholder="请输入密码" password placeholder-style="color:#999999;"/></view>
  <view class="see">
    <image src="/images/see.jpg" style="width:42px;height:30px;"></image>
  </view>
</view>


1.5 再次添加分割线
为了在视觉上区分密码输入和后续的操作按钮,再次插入一个“hr”类的分割线。
<view class="hr"></view>


1.6 添加登录按钮
在表单下方提供了一个登录按钮,其可用状态和类型通过数据绑定实现,响应用户点击事件bindtap="login"。
<button class="btn" disabled="{{disabled}}" type="{{btnstate}}" bindtap="login">登录</button>

1.7 设置附加操作链接
最后,在登录表单下方设置了一个“operate”类的view组件,包含三个视图,每个视图都使用navigator组件,分别指向手机快速注册、企业用户注册和找回密码的页面。
<view class="operate">
  <view><navigator url="../mobile/mobile">手机快速注册</navigator></view>
  <view><navigator url="../company/company">企业用户注册</navigator></view>
  <view>找回密码</view>
</view>


2.WXSS
.content{
  /* 设置内容区顶部外边距为40px,用于与上方元素的间隔 */
}

.account{
  /* 设置.account类的元素为块级元素,这意味着它会占据一整行 */
  /* 设置.account类元素的左内边距为20px */
  /* 设置.account类元素的顶部内边距为20px */
  /* 设置.account类元素的底部内边距为10px */
  /* 设置.account类元素的宽度为其父容器宽度的90% */
}

.title{
  /* 将.title类的元素向左浮动,使其在水平方向上靠左排列 */
  /* 设置.title类元素右侧的外边距为30px,用于与右侧元素的间隔 */
  /* 设置.title类的文本为粗体 */
}

.hr{
  /* 设置.hr类的边框为1px宽,实线,颜色为#cccccc */
  /* 设置.hr类的不透明度为0.2,使边框显得更为透明 */
  /* 设置.hr类元素的宽度为其父容器宽度的90% */
  /* 设置.hr类元素的上下外边距为0,左右外边距自动,从而使其水平居中 */
}

.see{
  /* 设置.see类的定位为绝对定位,它将相对于最近的定位非static元素进行定位 */
  /* 设置.see类元素相对于其父元素右侧的距离为20px */
}

.btn{
  /* 设置.btn类的按钮宽度为其父容器宽度的90% */
  /* 设置.btn类的按钮顶部外边距为40px,用于与上方元素的间隔 */
  /* 设置.btn类的按钮文本颜色为#999999,这是一种灰色调 */
}

.operate{
  /* 设置.operate类的元素为块级元素,这意味着它会占据一整行 */
}

.operate view{
  /* 设置.operate类中的view元素为内联块级元素,允许它们在一行内并排显示 */
  /* 设置每个view元素的宽度为其父容器宽度的33%,允许三个元素平分一行 */
  /* 设置文本在每个view元素内居中对齐 */
  /* 设置每个view元素顶部的外边距为40px,用于与上方元素的间隔 */
  /* 设置字体大小为14px,适合阅读而不显得过大或过小 */
  /* 设置文本颜色为深灰色(#333333),提供良好的可读性 */
}

.login{
  /* 设置.login类的元素为块级元素,这意味着它会占据一整行 */
  /* 设置.login类元素顶部外边距为150px,用于与上方元素的显著间隔 */
  /* 设置.login类的文本在元素内居中对齐 */
}

.login view{
  /* 设置.login类中的view元素为内联块级元素,允许它们在一行内并排显示 */
}


3.JS
Page({
  data: {
    disabled: true, // 初始化登录按钮为禁用状态
    btnstate: "default", // 设置按钮的初始样式为默认
    account: "", // 初始化账户数据为空
    password: "" // 初始化密码数据为空
  },

  //判断输入框里是否有字,有内容则按更改按钮样式
  accountInput(e) {
      // 获取输入框内的值
     // 在控制台输出当前输入的内容
      if (content != '') {
         // 如果输入不为空,设置按钮为启用状态,更改按钮样式为"primary",并更新账户数据
      } else {
         // 如果输入为空,重置按钮为禁用状态和默认样式
      }
  },
  //失去焦点后获取密码框的值,进行更新
  pwdBlur(e) {
      // 获取密码输入框内的值
      if (password != '') {
         // 如果密码输入不为空,更新密码数据
      }
  },
  //模拟登录成功界面
  login(){
   //将登陆成功后的账号输出至控制台
   //将登陆成功后的密码输出至控制台
    wx.showToast({
      title: '完成登录', //可视化
    })
  }
})


 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/2979898.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

概率图模型在机器学习中的应用:贝叶斯网络与马尔可夫随机场

&#x1f9d1; 作者简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟&#xff0c;欢迎关注。提供嵌入式方向…

C++ stl容器list的底层模拟实现

目录 前言&#xff1a; 1.创建节点 2.普通迭代器的封装 3.反向迭代器的封装 为什么要对正向迭代器进行封装&#xff1f; 4.const迭代器 5.构造函数 6.拷贝构造 7.赋值重载 8.insert 9.erase 10.析构 11.头插头删&#xff0c;尾插尾删 12.完整代码简单测试 总结&…

Iterator 迭代器

意图 提供一个方法顺序访问一个聚合对象中的各个元素&#xff0c;且不需要暴漏该对象的内部表示。 结构 Iterator&#xff08;迭代器&#xff09;定义访问和遍历元素的接口。ConcreteIterator&#xff08;具体迭代器&#xff09;实现迭代器接口&#xff1b;对该聚合遍历是跟踪…

爽!极品AI大模型,抓紧收藏!

今天给大家分享一个基于视觉和文本的聊天机器人&#xff0c;使用DeepSeek-VL-7B模型提供文本和图像的自动化生成回复&#xff0c;它允许用户在与机器人交互时提交文本和图像输入。 DeepSeek-VL简介 DeepSeek-VL系列代表了在多模态AI领域的一大突破&#xff0c;提供了两种不同规…

阿赵UE学习笔记——30、HUD简单介绍

阿赵UE学习笔记目录 大家好&#xff0c;我是阿赵。   继续学习虚幻引擎&#xff0c;这次来学习一下HUD的基础使用。 一、 什么是HUD HUD(Head-Up Display)&#xff0c;也就是俗称的抬头显示。很多其他领域里面有用到这个术语&#xff0c;比如开车的朋友可能会接触过&#xf…

Linux驱动开发——(四)内核定时器

一、内核的时间管理 1.1 节拍率 Linux内核中有大量的函数需要时间管理&#xff0c;比如周期性的调度程序、延时程序等等&#xff0c;对于驱动编写者来说最常用的是定时器。 硬件定时器提供时钟源&#xff0c;时钟源的频率可以设置&#xff0c;设置好以后就周期性的产生定时中…

将MySQL数据库查询结果导出为txt文档,并建成实体类

目录 第一章、功能需求和分析1.1&#xff09;具体需求1.2&#xff09;分析需求转为小的问题1、如何获得数据库表的字段&#xff1f;2、如何将数据库查询结果导出&#xff1f;3.将获得的数据库查询结果转为驼峰式4.让AI建个实体类 友情提醒: 先看文章目录&#xff0c;大致了解文…

Python Selenium无法打开Chrome浏览器处理自定义浏览器路径

问题 在使用Python Selenium控制Chrome浏览器操作的过程中&#xff0c;由于安装的Chrome浏览器的版本找不到对应版本的驱动chromedriver.exe文件&#xff0c;下载了小几个版本号的驱动软件。发现运行下面的代码是无法正常使用的&#xff1a; from selenium import webdriver …

2024年【北京市安全员-B证】考试题及北京市安全员-B证考试试卷

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 北京市安全员-B证考试题参考答案及北京市安全员-B证考试试题解析是安全生产模拟考试一点通题库老师及北京市安全员-B证操作证已考过的学员汇总&#xff0c;相对有效帮助北京市安全员-B证考试试卷学员顺利通过考试。 1…

第十六届“华中杯”B 题使用行车轨迹估计交通信号灯周期问题

某电子地图服务商希望获取城市路网中所有交通信号灯的红绿周期,以便为司机提供更好的导航服务。由于许多信号灯未接入网络,无法直接从交通管理部门获取所有信号灯的数据,也不可能在所有路口安排人工读取信号灯周期信息。所以,该公司计划使用大量客户的行车轨迹数据估计交通…

RISC-V CVA6 在 Linux 下相关环境下载与安装

RISC-V CVA6 在 Linux 下相关环境下载与安装 所需环境与源码下载 CVA6 源码下载 首先&#xff0c;我们可以直接从 GitHub 一次性拉取所有源码&#xff1a; git clone --recursive https://github.com/openhwgroup/cva6.git如果这里遇到网络问题&#xff0c;拉取失败&#x…

语音聊天app软件、语音房软件开发

最近我们收到了众多客户咨询,他们都对语音聊天app非常感兴趣! 语音聊天app,在线组CP,一起连麦聊天、唱歌、打游戏,年轻人非常喜欢的语音社交软件,可以语音通话、多人语音房聊天、发布动态、会员充值等功能.大家可以在虚拟世界里快乐社交! 里面还有好玩的互动小游戏,帮助客户增…

MLLM | Mini-Gemini: 挖掘多模态视觉语言大模型的潜力

香港中文、SmartMore 论文标题&#xff1a;Mini-Gemini: Mining the Potential of Multi-modality Vision Language Models Code and models are available at https://github.com/dvlab-research/MiniGemini 一、问题提出 通过更高分辨率的图像增加视觉标记的数量可以丰富…

电磁仿真--基本操作-CST-(2)

目录 1. 回顾基操 2. 操作流程 2.1 创建工程 2.2 修改单位 2.3 创建 Shape 2.4 使用拉伸 Extrude 2.5 修改形状 Modify Locally 2.6 导入材料 2.7 材料解释 2.8 材料分配 2.9 查看已分配的材料 2.10 设置频率、背景和边界 2.11 选择 Edge&#xff0c;设置端口 2.…

npm install 卡在still idealTree buildDeps不动

前言 再使用npm install 安装包依赖时 发现一直卡住 停留在 观察node_cache下的_logs文件 发现一直在拉取包 37 silly idealTree buildDeps 38 silly fetch manifest riophae/vue-treeselect0.4.0尝试解决 尝试设置了taobao镜像源 依然如此 获取已经设置的镜像源 确实是ta…

软文发稿对于企业的重要性

随着社会的发展和科技的进步&#xff0c;软文发稿已成为企业和个人推广和传播信息的一种非常重要的方式。它以隐性的广告形式&#xff0c;通过内容发布&#xff0c;为品牌广告和产品推广铺设了一条隐形高速公路。下面我们就详细解析一下软文发稿的优点和好处。 软文发稿帮助增…

setTimeout回调函数 this指向问题

本文主要介绍setTimeout的回调函数的this指向问题 例子1&#xff1a;回调函数是一个普通函数 setTimeout 的回调函数是一个普通函数&#xff0c;而不是箭头函数&#xff0c;因此它有自己的上下文&#xff0c;this 指向全局对象&#xff08;在浏览器中是 window 对象&#xff…

【linux】匿名管道|进程池

1.进程为什么要通信&#xff1f; 进程也是需要某种协同的&#xff0c;所以如何协同的前提条件(通信) 通信数据的类别&#xff1a; 1.通知就绪的 2.单纯的数据 3.控制相关的信息 2.进程如何通信&#xff1f; 进程间通信&#xff0c;成本会高一点 进程间通信的前提&#xff0c;先…

《html自用使用指南》--基于w3School实践

1.基础标签 文本输入时&#xff0c;在编辑器中的换行&#xff0c;多个空格&#xff0c;都被编辑器看作一个空格 <p> 这个段落 在源代码 中 包含 许多行 但是 浏览器 忽略了 它们。 </p>结果&#xff1a;这个段落 在源代码 中 包含 许多行 但是 浏览器…

java多线程-悲观锁、乐观锁

简介 悲观锁&#xff1a;没有安全感&#xff0c;一上来就直接加锁&#xff0c;每次只能一个线程进入访问&#xff0c;访问完毕之后&#xff0c;再解锁。线程安全&#xff0c;但是性能差。乐观锁&#xff1a;很乐观&#xff0c;一开始不上锁&#xff0c;认为没有问题。等到要出现…