注冊

微信小程序仿攜程系統(tǒng)開發(fā)

2018-06-21
導(dǎo)讀:一場說走就走的旅行開始啦 隨著 小程序 的大熱,作為一個程序猿,我也開始接觸并且大概了解了一個制作小程序的一些過程,為了提高自己的動手能力,于是乎,我開始來仿寫攜程的...

旅行小程序的盛行,讓許多開發(fā)商開始重視旅行出行小程序的發(fā)展,這里為大家介紹仿寫攜程小程序的案例,來實(shí)現(xiàn)一些基本功能。

微信小程序仿攜程系統(tǒng)開發(fā)

為了更好的開發(fā),我們需要準(zhǔn)備我們需要的工具:

  • Vscode:這里主要用來具體代碼的編寫
  • 微信開發(fā)者工具:通過這個看效果圖
  • EasyMock: 通過這個網(wǎng)站可以偽造一些數(shù)據(jù)來供我們使用,非常方便。

具體實(shí)現(xiàn)

功能效果如下

微信小程序仿攜程系統(tǒng)開發(fā)

查詢功能的實(shí)現(xiàn)

1.首先需要在查詢之前獲取輸入的所在城市以及到的城市,以及時間的選擇,通過這些條件去篩選,所以需要在點(diǎn)擊查詢按鈕的時候綁定一個時間,需要攜帶參數(shù)去進(jìn)行查詢

<navigator class="search"  url="/pages/trainBuyContent/trainBuyContent?from={{from}}&to={{to}}&trainTime={{startDate}}">查詢</navigator>

2.需要到跳轉(zhuǎn)的頁面接收參數(shù)通過onload事件的options獲取

    var from = options.from;
    var to = options.to;
    var trainTime = options.trainTime;

3.最重要的是篩選出相關(guān)數(shù)據(jù),這里需要一個for循環(huán)的判斷語句,在請求數(shù)據(jù)地址URL的時候,通過for循環(huán)和if語句找出相對應(yīng)的數(shù)據(jù)文件里面所對應(yīng)的json數(shù)據(jù)。

wx.request({
      url: API_BASE,
      success: (res) => {
        for(var i=0;i<res.data.data.trainList.length;i++){
          if (from == res.data.data.trainList[i].from && to == res.data.data.trainList[i].to && trainTime == res.data.data.trainList[i].trainTime){
            temp.push(res.data.data.trainList[i]);
          }
        }
        this.setData({
          searchedList:temp
        })
      }
    })

4.這時候再在頁面通過for循環(huán)輸出就可以了

wx:for="{{searchedList}}"
wx:key="{{item.id}}"
temp.push(res.data.data.trainList[i]);
this.setData({
          searchedList:temp
        })

*小程序頁面?zhèn)髦档姆绞剑?.url傳值2.本地儲存3.全局的app對象

訂單查詢的實(shí)現(xiàn)

這里我采用了全局的app對象保存

1.先獲取全局對象,然后在點(diǎn)擊確定購買的success回調(diào)函數(shù)的時,去獲取所有的信息,以一個json格式去獲取

const app = getApp();
var trainedList = app.globalData.trainedList;
var trainItem = {
          from: this.data.from, 
          to: this.data.to,  
          trainNum: this.data.trainNum,
          trainTime: this.data.trainTime,
          totalPrice: this.data.totalPrice
        };
trainedList.push(trainItem);

2.然后在相應(yīng)的頁面去獲取這個全局的數(shù)組

onLoad: function (options) {
    this.setData({
      trainedList: app.globalData.trainedList
    })
    
  },

3.通過一個for循環(huán)讓其輸出在頁面

其他功能

還有一部分功能未能展示或者未完善,請大家見諒。

源碼地址

GitHub地址:github.com/yrq1429/yrq…

 


重磅推薦:小程序開店目錄

第一部分:小商店是什么

第二部分:如何開通一個小商店

第三部分:如何登錄小商店

第四部分:開店任務(wù)常見問題

第五部分:小商店可以賣什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開發(fā)