打開小程序之門，「拉勾」之約

時間  2019-12-05
標籤 打開 程序 之門 拉勾 简体版
原文   原文鏈接

先放個程序員的老婆

圖片描述

諸君，拔劍吧html

言歸正傳

接觸了小程序，發現仍是挺有意思的，學習過程當中也寫寫項目，那此次呢就寫了一個拉勾小程序，
來聊一聊踩到的坑，以及如何跳出坑，說不定對你有些幫助，來看看前端

準備工做

編輯器 : visual studio code 和 微信開發者公工具
數據來源 : 那固然是用easy-mock隨便瞎編的數據啦

那就來聊聊寫了些什麼吧

首先看看界面吧

圖片描述

來一塊兒爬坑和實現某些功能吧

  • 界面的坑
  • 如何跳轉詳情頁
  • 搜索
  • 歷史搜索記錄數據的保存
  • 歷史記錄搜索
  • 猜你喜歡

1. 界面的坑

這個坑真是不踩不知道，點擊搜索框跳轉進搜索界面，那麼點擊取消返回直接使用navigateTo 跳轉界面? no no no ,navigate不能跳 轉到tabbar界面,這裏我使用的是navigateBackjava

wx.navigateBack({
  delta:1
})
delta返回的頁面數，若是 delta 大於現有頁面數，則返回到首頁。

固然還有switchTab等方法，詳細能夠參考小程序開發指南git

小提示：其次界面上除非特定的位置，不然儘可能避免使用position進行定位，畢竟段落或長或短，
使用position可能就會出現文字覆蓋文字的狀況

2. 再來講說如何跳轉詳情頁

先來看看效果圖（電腦反應有點遲鈍，有些界面須要等待才加載完，哭唧唧）程序員

圖片描述

那麼是怎麼實現的呢？首先來看看代碼吧 ，畢竟是靈魂github

index.wxml

<view class="post-recommend-list" wx:for="{{job}}" wx:key="index" bindtap="navigateTap" data-index="{{index}}">
    <image mode="aspectFill" class="recommend-detail_image" src="{{item.image}}"></image>                  
    <text class="list_job">{{item.job}}</text>
    <text class="list_money">{{item.money}}</text>
    <text class="list_company">{{item.company}}</text>
    <text class="list_address">{{item.address}}</text>
    <text class="list_exp">{{item.exp}}</text>
    <text class="list_education">{{item.education}}</text>
    <text class="list_date">{{item.date}}</text>
</view>

index.js
首先請求easymock中的假數據
onReady:function(){
wx.request({
  url:'https://www.easy-mock.com/mock/5b15fb5b9ab69517fa2acb43/lagou/lagou#!method=get',
  success:(res)=>{
    this.setData({
      job:res.data.data.jobs
    });
    
  }
})
},

實現跳轉詳情頁代碼
navigateTap:function(e){
var index=e.currentTarget.dataset.index;
var detail=this.data.job[index];
app.globalData.detail=detail;
console.log(app.globalData.detail)
this.setData({
  detail:detail
})
// console.log(de)
wx.navigateTo({
  url: '../detail/detail',
})
}

那麼就來解讀下吧
設計原理是將每一個index上的view設定一個bindtap事件，當點擊view時觸發，同時獲取觸發事件，將事件發生
時獲取到的信息存儲到app.js中。
首先在index.js中引入app.js ,
const app = getApp()
在app.js中設置一個空數組detail:[],用detail:[]來存儲所獲取到的信息小程序

globalData: {
  detail:[],
  details:[],
  userInfo: null
  }

接下來講說這觸發時發生了什麼api

var index=e.currentTarget.dataset.index;
  <view class="post-recommend-list" wx:for="{{job}}" wx:key="index" bindtap="navigateTap"     
  data-index="{{index}}">

設定data-index="{{index}"就是去獲取currentTarget的下標，獲取到下標以後將獲取到的信息存儲在某個數組中數組

var detail=this.data.job[index];

app的detail:[]再去獲取觸發事件時獲得的數組緩存

app.globalData.detail=detail;

而後後setData一下，
最後detail.js文件下獲取下數據就OK了
onReady: function () {

this.setData({
  jobb:app.globalData.detail
})
},

3. 搜索

先來看看效果圖
圖片描述
實現了搜索工做種類、工做地點、公司名稱、在無輸入下進行提示、搜索不到信息的提示
那就再來先看看代碼吧

search.wxml


 <view class="search-top-input">
 <input type="text" placeholder="搜索公司/職位" auto-focus="true" value="{{inputsearch}}" 
      bindconfirm="search"
      bindinput="inputSearchTap"
      data-index="{{index}}"/>
</view>

search.js

data: {

inputsearch:'',
job:[],
newSearch:[],
},
 
 inputSearchTap:function(e){
  let inputsearch =e.detail.value;
  this.setData({
    inputsearch
  })
  },

search:function(e){
var sear =this.data.inputsearch;
var jobs=this.data.job;
var input = new RegExp(sear);
var temp = [];
if(sear == ''){
  wx.showToast({
    title: '請輸入要搜索信息',
    icon:"none",
    duration: 1000
  });
 return false;
}
  for(let i =0;i<jobs.length;i++){
 if(input.test(jobs[i].job) || input.test(jobs[i].company) || input.test(jobs[i].address){
      
      temp.push(jobs[i]);
    var detail=temp;
    app.globalData.details=detail;
    }

  } 
  if(temp ==''){
     wx.showToast({
    title: '暫無此信息',
    icon:"none",
    duration: 1000
  });
  }else if(temp){
    wx.navigateTo({
      url:'../about/about'
    })
  }
}
this.setData({
  newSearch:temp,
})

}

定義一個sear去獲取input輸入框中的值，

var sear =this.data.inputsearch;

再使用正則去匹配輸入的值,詳情請看RegExp

var input = new RegExp(sear);

定義空數組temp

var temp = [];

若是輸入的是空，彈窗提示

if(sear == ''){
  wx.showToast({
    title: '請輸入要搜索信息',
    icon:"none",
    duration: 1000
  });
 return false;
}

若是輸入了值，則進行匹配，將匹配到的信息存放在app.js中的details[]中

for(let i =0;i<jobs.length;i++){
 if(input.test(jobs[i].job) || input.test(jobs[i].company) || input.test(jobs[i].address){
      
      temp.push(jobs[i]);
    var detail=temp;
    app.globalData.details=detail;
    }

  }

若是沒查詢到則提示

if(temp ==''){
         wx.showToast({
        title: '暫無此信息',
        icon:"none",
        duration: 1000
      });

查詢到則跳轉

else if(temp){
    wx.navigateTo({
      url:'../about/about'
    })
  }

這樣就實現了搜索功能了，bindconfirm在input組件中可實現手機軟鍵盤中的回車事件，詳情看小程序開發指南小程序開發指南

4. 再說說歷史搜索

歷史搜索是個很方便用戶的體驗，在須要用到搜索的地方必不可少了，因此怎麼去實現呢？
代碼部分

search.wxml
    
      <view class="search-history" wx:if="{{status}}">
        <view class="search-history-title">
              <text>歷史搜索</text>
              <image src="../../images/delete.png" bindtap="deleteHistory"></image>
        </view>
        <view class="search-history-detail" >
              <view class="history-detail" wx:for="{{history}}" wx:key="{{item}}" 
              bindtap="historySearch" data-index="{{index}}">
                    <text class="detail" >{{item}}</text>
              </view>
        </view>
  </view>
  
  search.js
      
      
   search:function(e){
var that =this;
var sear =this.data.inputsearch;
var jobs=this.data.job;
var input = new RegExp(sear);
var temp = [];
if(sear == ''){
  wx.showToast({
    title: '請輸入要搜索信息',
    icon:"none",
    duration: 1000
  });
 return false;
}else{
   this.data.history.unshift(sear);
wx.setStorage({
  key: 'history',
  data: that.data.history,
  success: function(res){
    // success
    that.setData({
      history:that.data.history,
      status:true
    })
    console.log(res.data);
  },
})
  for(let i =0;i<jobs.length;i++){

    if(input.test(jobs[i].job) || input.test(jobs[i].company) || input.test(jobs[i].address)){
      
      temp.push(jobs[i]);
    var detail=temp;
    app.globalData.details=detail;
    }

  } 
  if(temp ==''){
     wx.showToast({
    title: '暫無此信息',
    icon:"none",
    duration: 1000
  });
  }else if(temp){
    wx.navigateTo({
      url:'../about/about'
    })
  }
}
this.setData({

  newSearch:temp,
})

},
那麼怎麼將搜索記錄保存在本地呢？
這裏使用了小程序的本地保存數Storage，這樣每次登錄就能夠保存有上次登錄搜索過的歷史記錄了
小程序開發手冊中的介紹小程序指南中的Storage,
看了指南如何用setStorage去存儲數據，可是發現每次存儲以後會將上一次的key值的數據覆蓋掉，那麼怎麼辦呢？
有了，能夠去定義一個空數組去存儲setStorage中的值嗎？
好的，那麼怎麼去獲取呢？再定義一個空數組去獲取嗎？最後再將第二個數組push進去嗎？
顯然不行，當定義了兩個數組時你會發現屢次搜索後存儲在key中的值就會是這樣的

Array(2)
    0:{
        0:"前端"，
        1:"java"
        }
    1:"深圳"
    length:2

後續搜索的歷史記錄都存到Array[0]中了
而實際上歷史記錄上須要展現的搜索記錄數組的存儲是這樣的

Array(2)
        0:"前端"，
        1:"java"  
        2:"深圳"
        length:3

那麼怎麼在setStorage和getStorage中去實現不被覆蓋而又能不存儲到Array[0]中？
首先去獲取storage中key:"history"的數據，將獲取到的值直接返回給history，而不是返回給另一個數組,這樣history就獲取到了本地緩存的數據

onLoad: function (options) {
var that =this;
wx.getStorage({
  key: 'history',
  success: function(res){
    // success
    that.setData({
      history:res.data,
      // sear_his:res.data
    })
    if(that.data.history.length==0){
      that.setData({
        status:false
       
      });
    }else{
      that.setData({
        status:true
      })
     }
  },
  fail: function(res) {
    // fail
    console.log(res+'aaaaa')
  }
});

},
使用setStorage api放到search中，將key值設置爲history，當sear輸入時進行判斷，若是爲空值則不進行存儲，不是空值則使用unshift將輸入的搜索值添加到history數組中的第一項,這樣就不會被覆蓋了，解決了value被覆蓋的問題

if(sear == ''){
  wx.showToast({
    title: '請輸入要搜索信息',
    icon:"none",
    duration: 1000
  });
 return false;
}else{
   this.data.history.unshift(sear);
wx.setStorage({
  key: 'history',
  data: that.data.history,
  success: function(res){
    // success
    that.setData({
      history:that.data.history,
      status:true
    })
    console.log(res.data);
  },

歷史記錄的刪除

圖片描述

固然是將本地緩存刪除啦

實現代碼

  deleteHistory(){
var that=this;
const status=this.data.status;
wx.showModal({
 
  content:'肯定刪除所有搜索歷史？',
  confirmText:'所有刪除',
  success:function(res){
    if(res.confirm){ 
      wx.removeStorage({
        key: 'history',
        success: function(r){
          that.setData({
            status:false,

            history:[]
          })
        },
      })
    console.log(status);
    }else if(res.cancel)
    {
      that.setData({
      
          status:true
      })
    } 
  }
})
},

猜你喜歡

圖片描述
實現代碼

likeSearch(e){
var index=e.currentTarget.dataset.index;
var detail=this.data.like[index];
var input = new RegExp(detail);
console.log(detail);
var temp = [];
var jobs=this.data.job;
for(let i =0;i<jobs.length;i++){
if(input.test(jobs[i].job) || input.test(jobs[i].company) || input.test(jobs[i].address)){
  temp.push(jobs[i]);
    var details=temp;
    app.globalData.details=details;
  }
}

if(temp ==''){
  wx.showToast({
 title: '暫無此信息',
 icon:"none",
 duration: 1000
   });
   }else if(temp){
 wx.navigateTo({
   url:'../about/about'
 })
}

},

最後

感謝看完文章，小程序之路是一條坎坷的路，雖然路上有許多磕絆，但最後是有所斬獲的。
成功是多麼美妙的一件事。
互聯網突飛猛進，須要你我共同努力，相互分享，
若是你以爲文章還OK
那麼請點個贊吧

博客地址使勁點這
獲取源碼請點擊github
謝謝你的Star

湖人總冠軍

圖片描述

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程