【小程序】小程序组件-2

目录

一. 滚轮选框

二. 音频组件

---

一. 滚轮选框

说真的，感谢微信开发者工具，让我这种笨比能够轻松学会这种看起来相当复杂的组件

picker组件的mode有几种模式，region啦，date啦，time啦，可以自行尝试

针对想要自己定义滚轮内容的人来说，可以使用range提交滚轮内容的数组。

和上回说到的checkbox，radio一样，触发函数都可以用bindchange，至于究竟想实现什么功能就十分自由了。

这次为了和手上的项目相配合，修改了box的样式，添加了box-shadow，看起来还不错。

<view class="box">
  <view class="layout">
    <text>姓名</text>
    <input type="text" placeholder="请输入姓名" bindblur="setName"/>
  </view>
  <view class="layout">
    <view>
      性别
    </view>
    <picker range="{{gender}}" bindchange="setSex" >
    <view>
      {{sex}}
    </view>
    </picker>
  </view>
</view>
<view class="box">
  <view class="layout">
    <view>
      籍贯
    </view>
    <picker mode="region" bindchange="setPlace">
      {{regions}}
    </picker>
  </view>
  <view class="layout">
    <view>
      生日
    </view>
    <picker mode="date" start="1800-01-01" end="2023-04-13" bindchange="setDate">
      {{dates}}
    </picker>
  </view>
</view>
<button type="default" bindtap="touchOut">提交</button>
<view hidden="{{flag}}">
  <view>请核对信息</view>
  <view>姓名:{{my_name}}</view>
  <view>
    性别:{{sex}}
  </view>
  <view>
    籍贯:{{regions}}
  </view>
  <view>
    生日:{{dates}}
  </view>
</view>

const app=getApp()
var C;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    gender:['男','女'],
    sex:'男',
    my_name:'',
    flag:true,
    regions:'北京市，北京市，东城区',
    dates:'2021-01-01'
  },
  setName:function(e){
    this.setData({
      my_name:e.detail.value
    })
  },
  setSex:function(e){
    this.setData({
      sex:this.data.gender[e.detail.value]
    })
  },
  setPlace:function(e){
    this.setData({
      regions:e.detail.value
    })
  },
  setDate:function(e){
    this.setData({
      dates:e.detail.value
    })
  },
  touchOut:function(e){
    this.setData({
      flag:false
    })
  }
})

二. 音频组件

audio有几个特别的属性：poster，放图片/海报；src，音频来源；name，音频名字；author，作者。

 设置完会如上图所示

代码如下所示。

<view class="box">
  <view class="title">
    音频展示
  </view>
  <audio src="{{src}}" id="myAudio" poster="{{poster}}" name="{{name}}" author="{{author}}" controls="true" loop="false" ></audio>
  <view class="bytlayout">
    <button bindtap="audioplay">播放</button>
    <button bindtap="audiopause">暂停</button>
    <button bindtap="audiojump">跳到第十四秒</button>
    <button bindtap="audioreturn">回到开头</button>
  </view>
</view>

const app=getApp()
var C;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    src:"/ryqq/js/runtime~Page.99a0ad98b11e707c3e7e.js?max_age=2592000",
    poster:"https://y.qq.com/music/photo_new/T002R300x300M000004FKCj71O4Hhz_1.jpg?max_age=2592000",
    name:"在你的身边",
    author:"盛伦"
  },
  onLoad:function(options){
    this.audioCtx=wx.createAudioContext('myAudio')
  },
  audioplay:function(e){
    this.audioCtx.play();
  },
  audiopause:function(e){
    this.audioCtx.pause();
  },
  audiojump:function(e){
    this.audioCtx.seek(14);
  },
  audioreturn:function(e){
    this.audioCtx.seek(0);
  }
})

onLoad之前我们讲过，是页面加载时的渲染函数（其实我还没弄明白究竟有什么用）

三. 结合之前的组件做一个练习

1. 题目

设计一个应用，要求包含两个页面，index页面中，用户可以填写邮箱（按格式），密码和确认密码（要求相同），全部填完后点击提交可跳转到第二个页面。第二个页面中用户需要填写姓名，学号，并从picker选框中选取数值，点击提交后会显示是否确认的信息，点击确认后显示提交成功的提示。

主要样例如下：

index页面主要内容：

 第二个页面如图 

 

 2. 解析与代码

 index页面        

（1）邮箱需要一个正则表达式判断

var str=/^.   $/

str.test(my_email)

（2）确认密码bindblur判断是否和输入的密码相同，否则清空

（3）如果之前很不幸在app文件中设置了tarbar，这个页面将不能被用于navigateTo，真的很鸡肋。。

<image src="../image/banner.png" mode="aspectFill" style="height: 100px;" />
<view class="box">
  <view class="title">
    考生登录
  </view>
  <view class="hr"></view>
  <form bindsubmit="">
    <view class="bytlayout">
      <text>输入邮箱</text>
      <input type="text" value="{{email}}" bindblur="emailblur"/>
    </view>
    <view hidden="{{flagemail}}" style="color: red;text-align: center;">无效邮箱！</view>
    <view class="bytlayout">
      <text>输入密码</text>
      <input type="password" value="{{psd}}" bindblur="psdblur" />
    </view>
    <view class="bytlayout">
      <text>确认密码</text>
      <input type="password" value="{{newpsd}}" bindblur="newpsdblur"/>
    </view>
    <view hidden="{{flagpsd}}" style="color: red;text-align: center;">
      密码不一致！
    </view>
    <button type="primary" form-type="submit" bindtap="tosubmit">登录</button>
  </form>
</view>

const app=getApp()
var C;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    email:'',
    psd:'',
    newpsd:'',
    flagemail:true,
    flagpsd:true,
  },
  emailblur:function(e){
    this.setData({
      email:e.detail.value
    })
    this.testemail(this.data.email);
  },
  testemail:function(email){
    var tst=/^[a-zA-Z0-9]+@[a-zA-Z0-9]+(\.[a-zA-Z0-9]+)*\.[a-zA-Z0-9]{2,6}$/
    if(tst.test(email)){
      this.setData({
        flagemail:true
      })
    }
    else{
      this.setData({
        email:'',
        flagemail:false
      })
    }
  },
  psdblur:function(e){
    this.setData({
      psd:e.detail.value
    })
  },
  newpsdblur:function(e){
    this.setData({
      newpsd:e.detail.value
    })
    var ifsame=this.tstpsd(this.data.psd,this.data.newpsd)
    if(ifsame){
      this.setData({
        flagpsd:true
      })
    }
    else{
      this.setData({
        newpsd:'',
        flagpsd:false
      })
    }
  },
  tstpsd:function(psd,newpsd){
    if(psd.length!=newpsd.length){
      return false;
    }
    for(var i=0;i<psd.length;i++){
      if(psd[i]!=newpsd[i]){
        return false;
      }
    }
    return true;
  },
  tosubmit:function(e){
    if(this.data.email==''||this.data.psd==''||this.data.newpsd==''){
      wx.showToast({
        title: '信息不完整',
        icon:'error',
        duration:2000
      });
    }
    else{
      wx.navigateTo({
        url: '../use/use',
      })
    }
  },
})

第二个页面

showModule显示框 vs showToast提示框

<!--pages/use/use.wxml-->
<view class="box">
  <view class="title">
    考试时间段选择
  </view>
  <form bindsubmit="showinfo">
    <view class="layout">
      <text>姓名</text>
      <input type="text" value="{{my_name}}" bindblur="addname"/>
    </view>
    <view class="layout">
      <text>学号</text>
      <input type="text" value="{{my_num}}" bindblur="addnum"/>
    </view>
    <view class="layout">
      <text>选择时间段</text>
      <picker range="{{time_line}}" bindchange="addtime" value="{{index}}" style="border: solid 1px black;">  
        {{my_time}}
      </picker>
    </view>
    <button form-type="submit">提交</button>
  </form>
</view>

// pages/use/use.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    time_line:["第一场：15:30","第二场：16:00","第三场：17:30"],
    my_name:'',
    my_num:'',
    my_time:'第一场：15:30',
  },
  addname:function(e){
    this.setData({
      my_name:e.detail.value
    })
  },
  addnum:function(e){
    this.setData({
      my_num:e.detail.value
    })
  },
  addtime:function(e){
    this.setData({
      my_time:this.data.time_line[e.detail.value]
    })
  },
  showinfo:function(e){
    wx.showModal({
      title: '信息确认',
      content: this.data.my_num+this.data.my_name+"的考试信息为"+this.data.my_time,
      complete: (res) => {
        if (res.cancel) {
          
        }
    
        if (res.confirm) {
          wx.showToast({
            title: '已确认',
            duration:2000
          })       
        }
      }
    })
  }
})