实训作业：微信小程序的搜索页面

搜索页面

最近遇到一个很可怕的问题，写好的文本副本一旦呗删除里面写好的文件都没了，我fo了，所以把源码放在这里，以防又被清空

search.js

// pages/search/search.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },


  doSearch:function(e1){
  wx.navigateTo({
    url: '../searchResult/searchResult'
  })
  },

  goPlayer:function(e2){
    wx.navigateTo({
      url: '../play/play',
    })
  }
})

search.json

{
  "usingComponents": {}
}

search.wxml

<!--pages/search/search.wxml-->
<!--顶部导航-->
<view class="top">
  <text>搜索</text>
</view>

<!--搜索框-->
<view class="search">
  <view>
    <image src="../../image/tabbar/5.png"></image>
    <input class="input"  placeholder="艺人、歌曲、歌词以及更多内容" value="{{searchValue}}" bindconfirm="doSearch"/>
  </view>
</view>

<!--搜索歌词-->
<view class="lyric">
  <view>
    <text>Apple Music新功能</text>
    <text>搜索歌词</text>
    <text>键入歌词查找歌曲</text>
    <view class="confirm">
      <text>好</text>
    </view>
  </view>
</view>

<!--最近搜索-->
<view class="recent">
  <view>
    <view>
    <text>最近搜索</text>
    </view>

    <view>
      <text>清除</text>
    </view>
  </view>
</view>

<!--搜索记录-->
<view class="record">
  <view>
    <text>无发之辈</text>
    <text>洗头用霸王</text>
    <text>My Hair</text>
  </view>
</view>

<!--热门搜索-->
<view class="hot">
  <view>
    <view>
    <text>热门搜索</text>
    </view>
  </view>
</view>

<view class="recommendation">
  <view>
    <text>我是不是你最疼爱的人</text>
    <text>I hate myself for loving you</text>
    <text>I don't want you anymore</text>
  </view>
</view>

<!--固定的播放条不能弹出-->
<view class="playBar" bindtap="goPlayer">
  <view>
    <image src="../../image/default-photo.png"></image>
      <view class="info">
        <text class="name">我的乖儿子</text>
        <text class="singer">你爸爸</text>
      </view>
  </view>
</view>
<!--
<view class="search-hi" wx:if="{{showSearchPanel == 2}}">
    <block wx:if="{{historySearchs.length > 0}}">
      <view class="search-hi-item" wx:for="{{historySearchs}}" wx:key="unique">
        <view class="hi-icon"></view>
        <text class="hi-text" data-key="{{item}}" bindtap="historysearchTap">{{item}}</text>
        <view class="hi-close" data-index="{{index}}" bindtap="delHistoryItem"></view>
      </view>
     <view class="clear-serach" bindtap="clearHistorySearchs">清除搜索记录</view>
    </block>
</view>
-->

search.wss

/* pages/search/search.wxss */
/*导航标签*/
.top text{
  font-size:50rpx;
  font-weight:550;
  margin-left:40rpx;
}

/*搜索框*/
.search{
  width: 100%;
  height: 80rpx;
  background-color:white;
  display: flex;
  justify-content: center;
  align-items:center;
  margin-top:10rpx;
}
.search view{
  background-color:rgba(119, 179, 114, 0.096);
  width: 90%;
  height: 80%;
  border-radius: 20rpx;
  display: flex;
  justify-content:space-between;
  align-items: center;
}

.search view image{
  height:40rpx;
  width:80rpx;
  margin-left:20rpx;
}

.search view .input{
  width: 1200rpx;
  color:darkgray;
  font-size:30rpx;
  margin-right:50rpx;
  margin-left: 10rpx;
}

/*搜索歌词*/
.lyric{
  width: 100%;
  height: 340rpx;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -10rpx;
}
.lyric view{
  background-color: rgba(119, 179, 114, 0.096);
  width: 90%;
  height: 80%;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.lyric view text:nth-of-type(1){
  font-size: 20rpx;
  color: red;
  margin-top: 20rpx;
}
.lyric view text:nth-of-type(2){
  margin-top: 10rpx;
  font-size: 40rpx;
  font-weight: 400;
}
.lyric view text:nth-of-type(3){
  margin-top: 0rpx;
  font-size: 30rpx;
  font-weight: 200;
  color: rgb(124, 124, 124);
}
.lyric view .confirm{
  background-color: yellowgreen;
  width: 40%;
  height: 20%;
  position: relative;
  margin-top: 20rpx;
}
.lyric view .confirm text{
  font-size: 30rpx;
  margin-bottom: 20rpx;
  color: whitesmoke;
}



/*最近搜索*/
.recent{
    height: 90rpx;
    display: flex;
    justify-content: space-between;
    align-items:center;
    margin-top: 0rpx;
}

.recent view{
  width: 100%;
  height: 70rpx;
  display: flex;
  justify-content:space-between;
  align-items: center;
}

.recent view:nth-child(1) text{
  font-size: 35rpx;
  font-weight:550;
  margin-left:40rpx;
}
.recent view:nth-child(2) text{
  font-size: 30rpx;
  font-weight:220;
  color:rgba(236, 16, 53, 0.993);
  margin-left:250rpx;
}
/*最近搜索记录*/
.record{
  width: 100%;
  height: 250rpx;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  
}
.record view{
  width: 90%;
  height: 90%;
  display: flex;
  flex-direction: column;
}
.record view text{
  color: rgb(50, 122, 59);
  font-weight: 300;
  font-size: 40rpx;
  border-bottom: solid 0.05px silver;
}

/*可爱的固定播放条*/
.playBar{
  width: 100%;
  height: 150rpx;
  background-color: rgba(198, 228, 203, 0.932);
  position: fixed;
  bottom:0px;
}
.playBar view{
  display: flex;
  justify-content: start;
  align-items: center;
}
.playBar view image{
  width: 60px;
  height: 60px;
  margin-top: 15rpx;
  margin-left: 20rpx;
}
.playBar .info text{
  color: rgb(116, 114, 114);
  text-shadow: 0.5px 0.5px 0.5px grey;
  
}
.playBar .info text:nth-of-type(1){
  margin-left: 40rpx;
  margin-bottom: 30rpx;
  font-weight: 550;
}
.playBar .info text:nth-of-type(2){
  margin-left: -160rpx;
  margin-top: 70rpx;
  font-size: 25rpx;
  font-weight: 400;
}

/*热门搜索*/
.hot{
  position: relative;
  margin-top: 100rpx;
}

.hot view text{
  font-size: 35rpx;
  font-weight:550;
  margin-left:40rpx;
}
/*热门搜索的推荐内容*/
.recommendation{
  width: 100%;
  height: 250rpx;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;  
}


.recommendation view{
  width: 90%;
  height: 90%;
  display: flex;
  flex-direction: column;
}

.recommendation view text{
  color: rgb(51, 124, 153);
  font-weight: 300;
  font-size: 40rpx;
  border-bottom: solid 0.05px silver;
}

app.json

{
  "pages": [
    "pages/search/search",
    "pages/jumppage/jumppage",
    "pages/play/play",
    
    "pages/searchResult/searchResult",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar":{
    "color":"#929292",
    "selectedcolor":"#EB445A",
    "list":[
      {
        "pagePath":"pages/logs/logs",
        "text":"Databank",
        "iconPath":"image/tabBar/1.png",
        "selectedIconPath":"image/tabBar/1-hl.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "Recommend",
        "iconPath": "image/tabBar/2.png",
        "selectedIconPath": "image/tabBar/2-hl.png"
      },
      {
        "pagePath": "pages/jumppage/jumppage",
        "text": "Browse",
        "iconPath": "image/tabBar/3.png",
        "selectedIconPath": "image/tabBar/3-hl.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "Broadcast",
        "iconPath": "image/tabBar/4.png",
        "selectedIconPath": "image/tabBar/4-hl.png"
      },
      {
        "pagePath": "pages/search/search",
        "text": "Search",
        "iconPath": "image/tabBar/5.png",
        "selectedIconPath": "image/tabBar/5-hl.png"
      }
    ]
  },
  
  "sitemapLocation": "sitemap.json"
}