美文网首页
2021-11-25、api：navigateTo和wx.sho

2021-11-25、api：navigateTo和wx.sho

作者: 疋瓞 | 来源:发表于2021-11-29 10:48 被阅读0次

1、案例要求：

要求制作考生登录页面index和考试信息填报页面detail。

2、实现过程

2.1、代码展示

index：

  • wxml
<!--pages/kj/demo111-template/index.wxml-->

<image class="title_im_style" src="{{title_image}}" mode="acceptFill"></image>
<view class="box">
  <view class="title">考场场次选择</view>
  <view class="hr"></view>

  <form bindsubmit="form_submit">

    <view class="all_common">
      <text class="dianZiYouXiang">电子邮箱：</text>
      <input name="youXiang" type="text" class="input_common youXiang" value="{{getYouXiang}}" bindchange="inputEmail" />
    </view>

    <view class="all_common">
      <text class="shuRuMiMa">输入密码：</text>
      <input name="shuRuMiMa" type="password" class="input_common" value="{{getPassWard}}" />
    </view>

    <view class="all_common">
      <text class="quRenMiMa">确认密码：</text>
      <input name="queRenMiMa" type="password" class="input_common" value="{{getPassWard_again}}" />
    </view>

    <button class="button_dengLu" type="primary" form-type="submit">登录</button>
    <view class="baoCuo">
      <view>
        <text hidden="{{msg1_hidden}}">{{showMsg01}}</text>
      </view>
      <view>
        <text hidden="{{msg2_hidden}}">{{showMsg02}}</text>
      </view>
    </view>
  </form>

</view>
  • wxss
/* pages/kj/demo111-template/index.wxss */
page{
    background-color: white;
}
.title_im_style{
    width: 100%;
    height: 150px;
}
.hr{
    height: 2px;
    background-color: rgb(252, 211, 27);
    margin: 5px 0px;
}
.all_common{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: center;
}
.input_common{
    border-bottom: 2px solid blue;
    margin: 10px 0px;
}
.youXiang:hover{
    border-bottom: 2px solid rgb(236, 222, 18);
}
.button_dengLu{
    margin: 10px auto;
    width: 40%;
    height: 50px;
}
.baoCuo{
    background-color: yellow;
    color: red;
    text-align: center;
}
  • js
// pages/kj/demo111-template/index.js
var title_image = "https://img.haomeiwen.com/i14216764/c6ae45f0fb33ebf7.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240";

var getYouXiang = "";
var getPassWard = "";
var getPassWard_again = "";

var msg1_hidden = true;
var msg2_hidden = true;

Page({
  data: {
    title_image : title_image,
    getYouXiang : getYouXiang,
    getPassWard : getPassWard,
    getPassWard_again : getPassWard_again,
    msg1_hidden : msg1_hidden,
    msg2_hidden : msg2_hidden,    
  },
  onLoad: function(options){
    
  },
  form_submit:function(e){
    if(e.detail.value.youXiang.length == 0 || e.detail.value.shuRuMiMa.length == 0){
      msg1_hidden = false;
      this.setData({
        msg1_hidden : msg1_hidden,
        showMsg01:"邮箱或密码不能为空"
      })
    }
    else if(e.detail.value.shuRuMiMa != e.detail.value.queRenMiMa){
      console.log(e.detail.value.shuRuMiMa);
      console.log(e.detail.value.queRenMiMa);
      msg2_hidden = false;
      this.setData({
        msg2_hidden : msg2_hidden,
        showMsg02:"两次输入密码不一致",
        getPassWard : "",
        getPassWard_again : ""
      })
    }
    else{
      wx.navigateTo({
        url: '../detail/detail',
      })
    }
  },
  inputEmail:function(e){
    var email = e.detail.value;
    var checkNum = this.checkEmail(email);
    
  },
  
  checkEmail:function(email){
    let str = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/ //正则表达式
    if(str.test(email)){
      return true
    }else{
      wx.showToast({
        title:"邮箱格式错误",
        icon:"loading"
      })
      this.setData({
        getYouXiang:""
      })
      return false
    }
  }



})

detail：

  • wxml
<!--pages/detail/detail.wxml-->
<view class="box">
  <view class='title'>考试时段选择</view>
  <form bindsubmit="formSubmit" bindreset="formReset">
    <view class="flex">
      <text>姓名：</text>
      <input type="text" auto-focus name="name" value="{{name}}"></input>
    </view>
    <view class="flex">
      <text>学号：</text>
      <input type="number" name="id" value="{{id}}"></input>
    </view>
    <picker bindchange="chooseTime" value="{{index}}" range="{{array}}" name="time">
      请选择考试时段：{{array[index]}}
    </picker>
    <view class="btnLayout">
      <button type='primary' form-type='submit'>确定</button>
      <button type='primary' form-type="reset">取消</button>
    </view>
  </form>
</view>
  • wxss
/* pages/detail/detail.wxss */
page {
    /* 设置页面样式 */
    height: 100%;
    background: gainsboro;
  }
  
  .flex {
    /* 设置text组件和input组件的布局 */
    display: flex;
    margin: 5px 0;
    justify-content: flex-start; /* 设置水平方向左对齐 */
    align-items: center; /* 设置垂直方向居中对齐 */
  }
  
  input {
    /* 设置input组件样式 */
    width: 150px;
    height: 30px;
    border: 2px solid gray; /* 设置input组件边框样式 */
    margin: 5px;
  }
  
  input:hover {
    /* 设置输入时input组件边框样式 */
    border: 2px solid chocolate;
  }
  
  picker {
    /* 设置picker组件样式 */
    margin: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  
  .btnLayout {
    /* 设置button组件布局 */
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 50px 0;
    width: 100%;
  }
  
  button {
    /* 设置button组件样式 */
    width: 80px;
  }
  • js
// pages/detail/detail.js
 
Page({
    data: {
      array: [
          '',
        '第一场15:00', 
        '第二场16:20', 
        '第三场17:40'
      ]
    },
  
    formSubmit: function (e) {
      var name = e.detail.value.name;  //获取姓名输入框内容
      var id = e.detail.value.id; //获取学号输入框内容
      var time=e.detail.value.time; //获取考试场次序号及时间
      wx.showModal({  //显示模态对话框
        title: '确认信息',
        content: e.detail.value.name + "同学，你的学号是："+id+"，你选择的场次是："+this.data.array[time]+",请确认信息！",
        success: function (res) {  //wx.showModal接口调用成功的回调函数
          if (res.confirm) {
            wx.showModal({
              title: '信息确认',
              content: '你的考场信息已经确认！',
            })
            wx.navigateTo({  //页面跳转
              url: '../index/index',
            })
          } else {
            console.log('用户点击取消')
          }
        }
      })
    },
    formReset:function(e){
        this.setData({
            index: 0
          })
    },
    chooseTime: function (e) {
      var index = e.detail.value  //获得picker组件选项下标
      this.setData({
        index: index
      })
    }
  })

2.2、结果展示

结果1.png 结果2.png

3、知识汇总

知识要点.png
正则表达式.png
正则表达式验证邮箱的方法1.png
正则表达式验证邮箱的方法2.png
模态对话框.png
模态对话框属性.png
回调函数success及其属性说明.png
navigateto函数.png
西安工程大学log.jpeg

4、踩坑说明

  • 在表单组件中input组件的属性设置很重要：
    1、name：为了在bindsubmit触发函数中方便知道是哪个input组件传过来的值
    2、type：input组件中要输什么样的值
    3、value：用来更改input组件当中的值，一般是为了清空input组件的输入值，或者提供默认输入值时用的。
    4、切记，单表组件的input基本不需要设置绑定函数往js中传参。
<input name="youXiang" type="number" class="input_common" value="{{getYouXiang}}" />
  • input组件中type的选择
    1、邮箱type：text
    2、密码type：password
  • 选中某个input组件后需要在样式上作出调整的方法不是在input组件属性中添加，而是在wxss当中添加“类名”:hover（悬停选择器）
input:hover{
    border-bottom: 2px solid rgb(236, 222, 18);
}
  • 模态对话框问题中还有个返回函数问题，需要注意返回函数的写法。
  • picker选择器的组件属性设置
<picker bindchange="chooseTime" value="{{index}}" range="{{array}}" name="time">
      请选择考试时段：{{array[index]}}
</picker>

相关文章

网友评论

      本文标题：2021-11-25、api：navigateTo和wx.sho

      本文链接：https://www.haomeiwen.com/subject/kqrotrtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|2021-11-25、api：navigateTo和wx.sho|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！