摘要:前言為了更好的開發,我們需要準備我們需要的工具這里主要用來具體代碼的編寫微信開發者工具通過這個看效果圖通過這個網站可以偽造一些數據來供我們使用,非常方便。
一場說走就走的旅行開始啦
隨著小程序的大熱,作為一個程序猿,我也開始接觸并且大概了解了一個制作小程序的一些過程,為了提高自己的動手能力,于是乎,我開始來仿寫攜程的小程序,來實現一些基本功能,在仿寫的過程中,也遇到了一些難題,也有了一點收獲,希望可以通過這篇文章與大家共同交流,共同進步。
前言為了更好的開發,我們需要準備我們需要的工具:
Vscode:這里主要用來具體代碼的編寫
微信開發者工具:通過這個看效果圖
EasyMock: 通過這個網站可以偽造一些數據來供我們使用,非常方便。這個是我的數據接口
具體實現 功能效果如下 查詢功能的實現1.首先需要在查詢之前獲取輸入的所在城市以及到的城市,以及時間的選擇,通過這些條件去篩選,所以需要在點擊查詢按鈕的時候綁定一個時間,需要攜帶參數去進行查詢
查詢
2.需要到跳轉的頁面接收參數通過onload事件的options獲取
var from = options.from; var to = options.to; var trainTime = options.trainTime;
3.最重要的是篩選出相關數據,這里需要一個for循環的判斷語句,在請求數據地址URL的時候,通過for循環和if語句找出相對應的數據文件里面所對應的json數據。
wx.request({ url: API_BASE, success: (res) => { for(var i=0;i4.這時候再在頁面通過for循環輸出就可以了
wx:for="{{searchedList}}" wx:key="{{item.id}}" temp.push(res.data.data.trainList[i]); this.setData({ searchedList:temp })`
訂單查詢的實現
*小程序頁面傳值的方式:1.url傳值2.本地儲存3.全局的app對象
`這里我采用了全局的app對象保存
1.先獲取全局對象,然后在點擊確定購買的success回調函數的時,去獲取所有的信息,以一個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.然后在相應的頁面去獲取這個全局的數組
onLoad: function (options) { this.setData({ trainedList: app.globalData.trainedList }) },3.通過一個for循環讓其輸出在頁面
其他功能還有一部分功能未能展示或者未完善,請大家見諒。
源碼地址GitHub地址:https://github.com/yrq1429/yrq_js_fullstack/tree/master/wxapp/Ctrip
小總結第一次發表文章有點小慌張,寫的不好希望大家諒解,說實話,在我看來,這次所寫的東西確實有點"糙",但還是很開心自己能堅持寫下來,功能方面以后會繼續完善,希望能得到各位大佬們的意見和建議,沒啥說的,繼續努力吧,路漫漫其修遠兮,Just do it!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/113485.html
摘要:準備工作開發工具下載地址竟然隱藏在一個超鏈接里,真的很不醒目啊文檔地址初次體驗新建項目的時候,可以選擇是小程序小游戲,這次我體驗的是小程序的開發。可以配置小程序邊界的,如頂部的導航欄的一些樣式。 很早前就想體驗一把小程序的開發了,如果熟悉三大框架的話,小程序的開發還是很容易上手的,所以只要跟著做一個小應用,加上官方的文檔就十分好學了。加上官方提供的開發工具也比較簡潔好用,初次體驗的我覺...
閱讀 1747·2021-10-13 09:39
閱讀 1316·2019-08-30 13:58
閱讀 1411·2019-08-29 16:42
閱讀 3561·2019-08-29 15:41
閱讀 2990·2019-08-29 15:11
閱讀 2469·2019-08-29 14:10
閱讀 3405·2019-08-29 13:29
閱讀 2086·2019-08-26 13:27