目录

一. 滚轮选框

二. 音频组件

一. 滚轮选框

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

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})       }}})}
})