小程序雲開發之踩到狗尾巴

時間 2019-11-17

標籤程序開發尾巴简体版

原文原文鏈接

前言

前段時間用了下快狗打車，感受賊方便，師傅響應速度和服務態度都特別好，搬個家再也沒有之前那麼痛苦了，女票也是給了大大的贊。正好最近畢業設計選題跟這個相似，參考了雲開發文檔，真心感受雲函數，雲數據庫，快且好用，立馬開寫，快快搞定畢設，好好工做（歡迎hr小姐姐樓層回覆撩我）。不料，快速雲開發之快狗畢設項目，猶如踩上了狗尾巴，坑坑真多，給各位像我同樣，要快速寫畢設，快速聽女票話搬家的同窗，記錄一下。html

先給大家看下運行效果：git

1、程序骨架的基本構建

1.功能的完整實現

作個東西首先就是要把它的基本功能實現了，這個是毋庸置疑的。若是你是本身準備作個本身的小程序，那麼你確定要對本身的小程序應該實現怎樣的功能瞭如指掌，在內心應該把實現功能的流程預演個幾百遍了。github

這裏第一個坑就出現了，我作的那會可沒有想這麼多，畢竟做爲一個愣頭青，莽就完事了，從想法出來到開始動手時間不到1個小時，事實證實這是很是很是不可取的，也充分暴露了我經驗的不足。若是你不想像我同樣寫到後面一步一坑的話，最好提早想好。數據庫

2.頁面的基本構建

做爲一個較大的項目，主頁結構應該作到結構清晰，語義化良好，儘可能使用BEM命名規範，固然你要是想你的代碼寫完後本身都看不懂，你就瞎**命名當我沒說。編程

整個頁面大概採用什麼佈局也要事先想一想清楚，固然手機端通常都是彈性佈局比較好，讓你的頁面元素可大可小，完美適配不一樣尺寸的手機。小程序

佈局的時候千萬不要捨不得用盒子，若是把佈局比做是整理衣櫃的話，當你的衣服足夠多的話，一兩個衣櫃顯然是沒法知足條件的，你的衣服將被堆在一塊兒，凌亂不堪。可是若是你有足夠的衣櫃來放置衣服的話，你的衣服將被分門別類放置的整整齊齊。後端

在本小程序中，主頁的彈性布局是將地圖部分設置爲flex:1，讓地圖高度隨手機大小來變化，而其餘部分保持不變來實現的。可是在實際運行中，卻老是出現各類問題，最終個人解決辦法是再在頁面中總出問題的部分加入了一個盒子，又在彈性佈局裏嵌套了一個彈性佈局，這樣首頁的適應性佈局就完美實現了。微信小程序

3.數據庫的設計

雲開發的發佈，讓後端對於數據的操做變的更簡單了。微信小程序本質上是數據驅動頁面，因此你想在頁面上展現什麼，就設置一個對應的數據去關聯。而後當咱們想改變頁面的時候，只須要改動數據就能夠了。因爲我這個小程序數據比較簡單，並無把全部的數據都放在雲端，我只創建一張訂單表orders。api

由於訂單裏展現的信息很少因此只有‘時間’‘發貨地’‘收貨地’‘價格’幾個屬性，‘isdone’是用來標記訂單是否完成的，表如今頁面中就是訂單狀態會顯示‘已完成’或者‘已取消’數組

4. 選個好組件庫

這個不是必須的，可是有時候選擇到一個適合的組件庫用起來真的爽，可讓你的開發事半功倍我選的是vant(這個我選的就不是很好)，但願你能選上一個讓你用完發出一句真香感慨的。

2、程序功能的基本實現

若是你已經完成了上面的前三步，那你簡直比我好太多了！剩下的只不過是將功能一個一個添加上去罷了。因爲本程序的實現使用了大量api，我不會去把這些api一個個詳細講解，這樣純粹是浪費時間。可是我會把一些實現想法和一些我遇到的坑像你們說明，避免大家像我同樣踩坑。

1. 實時獲取點的座標並將地址顯示在頁面

仔細看了演示圖的同窗會發現當我移動地圖時，起點的地址是在實時發生變化的，當我中止拖動地圖時，起點的地址就會更新到最新點。那麼這個功能是如何實現的呢？其實這裏是有一點巧妙的。

實際上我用cover-image在地圖上標記了一個起點，這個點是一直垂直居中固定在地圖的中心的。這樣我只須要獲取這個中心點的座標並使用逆地址解析就能獲得這個點的位置描述啦，是否是有點巧妙。而怎麼獲取中心點的座標和完成逆地址解析呢，固然這一切都有騰訊爸爸提供給咱們的ap i去完成了。這裏有個注意的點就是咱們應在用戶鬆開時來顯示更新後的地址，bindregionchang這個能夠作到，當e.type = end時再顯示就能夠了，細節雖然小，可是仍是不能忽視了。

2. 輸入地址時要能有模糊搜索提示

這個效果主要依賴於騰訊地圖小程序jsSDK中的輸入關鍵詞提示，調用這個接口咱們將能夠在返回值中拿到一個數組，裏面包含着咱們須要的各類信息。拿到數據是很簡單的，可是如何處理它呢？這個數組的長度是不固定的，其實很簡單咱們只須要將拿到的數據setData給一個咱們定義的空數組searchresult，這樣全部的數據就到了這個數組裏，到時候再去頁面上循環這個數組，這樣咱們就能夠將裏面的數據都拿出來並讓它們顯示在它們該顯示的地方，因此這部分的關鍵在wxml裏，下面是我寫的：

<view class="content">
  <scroll-view class="scrollcontent" scroll-y style="height: {{scrollheight}}rpx;">
    <block wx:for="{{searchresult}}" wx:key="index">
      <van-cell-group border="{{true}}">
        <van-cell class="resultlist" title="{{item.title}}" border="{{true}}" data-title="{{item.title}}" data-location="{{item.location}}" icon="location" label="{{item.address}}" bind:click="getlistvalue"/>
      </van-cell-group>
    </block>
  </scroll-view>
</view>
複製代碼

3.主頁車型切換並帶來價格的變化

這個需求是讓顧客能夠自由選擇車型，這個有點相似滴滴打車的‘快車’'拼車'‘優享’。剛開始作的時候我覺得這是一個scroll-view和scroll-into-view配合來實現的。等到我把一切基本都實現了的時候，最後一個效果就是實現滑動切換時劃過必定距離就自動進入下一頁，不夠據距離就回彈。我想了不少方法來判斷，各類js判斷各類利用scroll-left都搞不定。

直到我無心中在官方文檔中看到了swiper這個組件，這絲般順滑的滑動切換，距離夠了自動下一頁，不夠就回彈，這不就正是我所須要的嗎，因而我直接刪了原來的代碼，花了不到半個小時就擼完了這個小組件（核心在於判斷cur renttab與index是否相等，注意這個index後面還有大用）。

看到這完美效果的我不由淚流滿面。所以這件事告訴咱們當你一直搞不定某個效果時，你應該靜下心來想一想是否是你開始就弄錯了方向，避免作無用功，浪費時間。接下來奉上我完美實現的代碼(wxml和js部分)：

wxml:

<view class="container">
    <view class="container-header">
    <view class="carLists {{currentTab === index ?'on': ''}}" wx:for="{{carName}}" wx:key="index" data-id="{{item.id}}" data-index="{{index}}" bindtap="switchTab">
      {{item.name}}
    </view>
    </view>
    <block wx:if="{{index>0}}">
        <van-icon name="arrow-left" class="arrow-left" bind:click="last" />
    </block>
    <block wx:if="{{index<3}}">
        <van-icon name="arrow" class="arrow" bind:click="next" />
    </block>
    <swiper class="carList" current="{{currentTab}}" bindchange="swiperChange">
      <block wx:for="{{cars}}" wx:key="index">
        <swiper-item class="carview">
          <image class="carImg" src="{{item.image}}" mode="aspectFill"/>
        </swiper-item>
      </block>
    </swiper>
  </view>
複製代碼

js:

switchTab:function(e){
      if (this.data.currentTab === e.target.dataset.index) {
        return;
    } else {
        this.setData({
            currentTab: e.currentTarget.dataset.index,
            index:e.currentTarget.dataset.index
        })
    }
  },
  
  
  swiperChange:function(e){
    // console.log( e.detail)
    if(e.detail.source == 'touch'){
      this.setData({
        currentTab: e.detail.current,
        index:e.detail.current
    })
    }
   
  },
    next:function(e){
      // console.log(this.data.currentTab,this.data.currentTab)
       if (this.data.currentTab === this.data.index && this.data.currentTab <3 ) {
          this.setData({
            currentTab:this.data.currentTab + 1,
            index:this.data.index +1
          })
        }
       
    },
  
    last:function(e){
      if (this.data.currentTab === this.data.index && this.data.currentTab > 0 ) {
        this.setData({
          currentTab:this.data.currentTab - 1,
          index:this.data.index -1
        })
      }
    }
複製代碼

4.關於距離及價格的計算

以前在輸入起點和終點的時候咱們能夠經過騰訊地圖的api拿到二者的具體座標，這裏我採用的距距離計算沒有采用騰訊地圖所提供的api(由於有距離限制，僅限10km之內)，這個距離對於咱們來講無疑是過短了，因而我採起了一個通用公式，只要能有兩地座標，即可以算出兩地間的距離，這樣一來咱們的老司機們就不用再受到距離的限制了。

//計算兩座標點之間的距離
      distance: function (lat1, lng1, lat2, lng2) {
        const rad1 = lat1 * Math.PI / 180.0;   
        const rad2 = lat2 * Math.PI / 180.0;   
        const a = rad1 - rad2;   
        const b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;  
        const r = 6378137;
        const distance = (r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) * Math.pow(Math.sin(b / 2), 2)))).toFixed(0)
        return distance / 1000;//單位轉化爲千米
      }
複製代碼

如今咱們拿到了距離，可是怎麼能讓價格根據所選車型來動態變化呢？還記得以前頁面裏給每一個滑塊的index嗎？這裏咱們剛好就能夠用它來作一個switch判斷，給getPrice函數傳入一個index 參數判斷不一樣值並給出不一樣的計價方式，這樣一來價格變會隨着車型的切換而變化了。最後咱們的效果就達到了。

5.訂單完成數據的上傳及拉取

有了雲開發以後數據庫的操做簡直不要太簡單了！取消訂單時，在選擇完取消訂單理由後，們將向雲數據庫添加一條數據，只需幾條命令咱們就能夠將咱們的數據真正的存在數據庫裏並保存起來，聽上去是否是很心動呢

wx.cloud.init();//初始化
const db = wx.cloud.database();
const cancelOrder = db.collection('orders')//orders爲手動在雲數據庫裏添加的一張空表
//三步操做後咱們就連上了咱們的數據庫
    cancelOrder.add({
      data:{
        time:globalData.time,
        shipAddr:globalData.address,
        receiveAdrr:globalData.receiveAdrr,
        price:globalData.price,
        isdone:false
      }
    })
複製代碼

這樣訂單數據就被咱們添加到了數據庫裏，能夠被咱們隨時訪問了。而後在經過一條簡單的查詢語句就能夠在個人訂單裏顯示了。

orders.where({
      _openid:'xxxxxxxx'//用戶的openid
    }).get({
      success: res=> {
        this.setData({
          orders:res.data
        })
        // console.log(res.data)
        wx.hideLoading();//加載完成關閉加載框
      }
    })
複製代碼

最後在頁面上循環輸出orders裏的值就能夠獲得一堆訂單了