用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

如何基于微信小程序開發網約車應用

Rolan 2020-5-20 00:54

項目描述為了解決長途如跨城市的出行撮合需求,滿足乘客和司機雙方自由定價的意愿,特開發一款非及時的打車應用?;竟δ苁浅鲂杏脩舻卿浶〕绦蚝?,根據自己角色選擇發布行程計劃。行程計劃包括出行時間和起始位置以 ...

項 目描述

為了解決長途如跨城市的出行撮合需求,滿足乘客和司機雙方自由定價的意愿,特開發一款非及時的打車應用?;竟δ苁浅鲂杏脩舻卿?a href="http://www.4584745.live/" target="_blank" class="relatedlink">小程序后,根據自己角色選擇發布行程計劃。行程計劃包括出行時間和起始位置以及期望價格;如果是乘客,發布自己的出行計劃之后跳轉到乘客發布的出行計劃列表頁,乘客可以點擊期望的行程計劃,邀請司機接單;如果是司機,需要驗證是否已經認證通過。如果沒有認證通過則跳轉到認證頁面,否則跳轉到乘客發布的出行計劃列表頁,選擇期望的出行計劃,完成接單。司機和乘客通過聊天頁面協調出行計劃。暫不支持支付功能,由雙方線下完成交易。用流程圖描述為:

系統原型

主要提供3個Tab頁面:“首頁”、“消息”和“我的”。其中“首頁”聚焦行程發布、行程查看和聊天會話等核心功能?!跋ⅰ本劢箽v史會話檢索等功能,在首頁進行的會話會跳轉到該tab頁面?!拔业摹本劢管囍髡J證、司機或者乘客查看歷史行程記錄以及客服服務等功能。原型圖如下所示:

系統存儲設計

根據業務,存儲表主要有以下幾種:
  • driver:司機認證記錄表,包括司機個人信息以及認證狀態等

  • driver_route:司機發布的行程記錄表

  • passager_route:乘客發布的行程記錄表

  • bargin_route:成交的行程記錄表

  • chat_partner:聊天的雙方參與者

  • message:會話記錄

存儲表 結構 和各表之間的關系如下所示:

開發準備

a. 帳號申請

開發小程序的第一步需要注冊一個小程序帳號,可能這一步是小程序開發最大的障礙,因為不管哪種帳號都需要認證,特別是企業類型帳號認證需要企業工商營業執照和組織機構代碼證,如果小程序需要支付功能,還需要提供對公帳號。但是你也可以使用個人帳號類型,但是個人帳號具備的功能很有限,比如不能支持支付功能等。有關小程序的注冊類型和認證的疑問可以參考小程序注冊類型和認證(

https://kf.qq.com/product/wx_xcx.html#hid=hot_faq

)。注冊小程序帳號之后,就可以得到一個appId和secret key,它們跟小程序應用相綁定的,在后續API調用中是不可缺少的。

b. 開發工具

同開發其他應用程序一樣,微信團隊同樣也有自己的開發集成工具。有關如何注冊和下載開發工具,可以參考官方文檔:注冊和下載開發工具

( https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html )

。下面簡要介紹開發工具的常用功能:

從上面圖中可以看到開發工具由以下幾個區域組成:

  • 功能預覽區:代碼編輯保存,開發工具會自動編譯并生成預覽,在該區域可以及時看到小程序渲染后的效果;

  • 文件瀏覽區:也就是文件瀏覽器,樹狀圖形式可以展開和收攏;

  • 代碼編輯區:提供代碼閱讀、搜索和編輯提示功能;

  • 網絡調試區:集成的是google開發工具組件,功能相信大家已經很熟悉。

    最上面一排的按鈕功能區,主要包括編譯、代碼上傳和代碼倉庫版本管理以及云服務入口功能等。這里唯一需要普及的是小程序的代碼構成。

c.小程序代碼組成

一個小程序通常由一個描述整體程序的 app 和多個描述各自頁面的 page頁面模塊組成。其中app主體部分由三個文件組成,必須放在項目的根目錄,文件為:
  • app.js: 控制小程序的全局業務邏輯;

  • app.json:小程序的全局公共配置信息;

  • app.wxml:小程序的全局公共樣式,

    每個頁面模塊由4鐘類型的文件組成,放置一個目錄里面,四種類型的文件為:

  • .json 后綴的 JSON 配置文件:存放配置信息;

  • .wxml 后綴的 WXML 模板文件:頁面內容模板,支持變量的動態渲染;

  • .wxss 后綴的 WXSS 樣式文件:頁面樣式定義;

  • .js 后綴的 JS 腳本邏輯文件:js實現的業務邏輯,是頁面模塊中最重要的文件。

比如我們項目的代碼結構組成如下圖所示:

更多信息可以參考文檔:小程序目錄結構

( https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html )

和代碼構成

( https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html )

前端設計

我們先確定小程序的總體展現框架,在app.wxml圈定整體結構:
 1{
 2  "cloud": true,
 3  "pages": [
 4    "pages/home/home",//home tab頁面
 5    "pages/position/position",//定位服務頁面
 6    "pages/drivers/drivers",//司機和乘客發布的行程列表頁面
 7    "pages/myroutes/myroutes",//我的歷史行程
 8    "pages/messages/messages",//“message”tab頁面
 9    "pages/chat/chat",//聊天會話頁面
10    "pages/detail/detail",//行程信息詳情
11    "pages/certificate/certificate",//企業認證頁面
12    "pages/enterprise/enterprise",//
13    "pages/mine/mine" //“我的”tab頁面
14  ],
15  "window": {
16    "backgroundTextStyle": "light",
17    "navigationBarBackgroundColor": "#fff",
18    "navigationBarTitleText": "WeChat",
19    "navigationBarTextStyle": "black"
20  },
21  "tabBar": {
22    "color": "#ccc",
23    "selectedColor": "#35495e",
24    "borderStyle": "white",
25    "backgroundColor": "#f9f9f9",
26    "list": [
27      {
28        "text": "首頁",
29        "pagePath": "pages/home/home",
30        "iconPath": "resources/icon_home.png",
31        "selectedIconPath": "resources/icon_home.png"
32      },
33      {
34        "text": "消息",
35        "pagePath": "pages/messages/messages",
36        "iconPath": "resources/icon_cate.png",
37        "selectedIconPath": "resources/icon_home.png"
38      },
39      {
40        "text": "我的",
41        "pagePath": "pages/mine/mine",
42        "iconPath": "resources/icon_member.png",
43        "selectedIconPath": "resources/icon_home.png"
44      }
45    ]
46  },
47  "sitemapLocation": "sitemap.json"
48}

其中"cloud": true表示我們接下來用到云服務,pages定義我們應用所有定義的頁面模塊路徑,tabBar定義應用的展示框架,它是一個list結構,每個列表項目由tab名稱、頁面路徑和圖標路徑組成。各個tab接下來詳細介紹。

首頁Tab

首頁主要功能為司機和乘客發布行程計劃,一旦行程計劃發布就分別跳轉到對應的列表頁面。具體說就是,如果是乘客,則可以查看司機發布的出行列表信息,并可以邀請司機接單;如果是司機,則可以看到乘客的出行列表信息,并可以選擇主動接單。我們將這一部分核心功能放在主頁面內完成,因為無論是司機還是乘客都有共同的行為:發布行程信息,且基本項目一樣,故可以復用該功能。

a.行程計劃

行程計劃頁面是司機和乘客發布行程的主入口,主要展示行程發布的起始位置和價格等。我們定義一個模板:publishRoute.wxml,有關模板的更多信息可以參考模板

( https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000ee2c29d4f805b0086a37a254c0a )

 1<template name="publishRoute">
 2  <form bindsubmit="publishRoute">
 3      <view style="display: flex;flex-direction: column;">
 4          <input bindtap="inputStartPosition" style='padding: 10rpx;width:300px;margin-top: 10px;' placeholder="當前位置?" value="{{startLocation.title}}"></input>
 5          <input name="startLocation" style='display:none;' value="{{startLocation.title}}"></input>
 6          <input name="startAddr" style='display:none;' value="{{startLocation.title}}"></input>
 7          <input name="startLatitude" style='display:none;' value="{{startLocation.location.lat}}"></input>
 8          <input name="startLongitude" style='display:none;' value="{{startLocation.location.lng}}"></input>
 9          <input bindtap="inputEndPosition" style='padding: 10rpx;width:300px;'placeholder="想要去哪兒?" value="{{endLocation.title}}"></input>
10          <input name="endLocation" style='display:none;' value="{{endLocation.title}}"></input>
11          <input name="endAddr" style='display:none;' value="{{endLocation.title}}"></input>
12          <input name="endLatitude" style='display:none;' value="{{endLocation.location.lat}}"></input>
13          <input name="endLongitude" style='display:none;' value="{{endLocation.location.lng}}"></input>
14          <input name="price" type="number"style='padding: 10rpx;width:300px;'placeholder="出價(單位:元)"></input>
15          <view class="btn-area">
16            <button type="primary" formType="submit">發布行程</button>
17          </view>
18      </view>
19  </form>
20</template>

其中style='display:none;'的input組件是隱藏域,在表單提交時用到,它們的值在搜索定位完成后回顯。輸入起始位置的input組件分別綁定到事件回調函數inputStartPosition和inputEndPosition,當輸入焦點落到輸入框時候,調用對應函數進入搜索定位頁面。

我們將模版導入到首頁home.wxml中:

 1view class="nav">
 2  <view class='{{isDriver?"default":"red"}}'bindtap="passengerTabed">我是乘客</view>
 3  <view class='{{isDriver?"red":"default"}}' bindtap="driverTabed">我是司機</view>
 4</view>
 5<view class='{{isDriver?"show":"hidden"}}'>
 6  <import src="../home/publishRoute.wxml"/>
 7  <template is="publishRoute" data="{{isDriver:isDriver,startLocation:startLocation,endLocation:endLocation,dateTimeArray:dateTimeArray,dateTime:dateTime}}"/>
 8</view>
 9<view class="{{isDriver?'hidden':'show'}}">
10 <import src="../home/publishRoute.wxml"/>
11 <template is="publishRoute" data="{{isDriver:isDriver,startLocation:startLocation,endLocation:endLocation,dateTimeArray:dateTimeArray,dateTime:dateTime}}"/>
12</view>
13因為publishRoute.wxml作為home.wxml內容的一部分而存在,故我們將回調函數inputStartPosition和inputEndPosition定義在home.js文件中:
14  inputStartPosition: function (e) {
15    wx.navigateTo({
16      url: '../position/position?isStartPos=true&isDriver=' + this.data.isDriver
17    })
18  },
19  inputEndPosition: function (e) {
20    wx.navigateTo({
21      url: '../position/position?isStartPos=false&isDriver=' + this.data.isDriver
22    })
23  }

在上面回調函數中導航到位置搜索頁面。通過下面我們詳細介紹搜索定位的實現。當發布行程的必要信息填寫完畢后提交發布,發布事件回調函數綁定在form表單上:

,函數定義接下來我們再做介紹。有關小程序事件的更多信息可以參考文檔:小程序事件

( https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000846df9a03909b0086a50025180a&highline=wx.navigateTo )

b.位置搜索

搜索頁面提供位置模糊搜索功能,示意圖如下:

我們創建頁面模塊position,提供搜索關鍵詞的查詢、搜索歷史記錄查詢等高級功能,為此我們把這部分功能封裝為一個模塊。為了簡化開發,這里引入了一個第三方開源組件,可以參考: https://github.com/icindy/wxSearch 。 這里我們不需要這么復雜的功能,只是將我們根據關鍵詞搜索到的候選位置信息展現在下拉列表即可。 wxSearch的展現部分核心代碼wxSearch.wxml模板內容為:

 1<template name="wxSearch">
 2  <view class="wxSearch" bindtap="wxSearchTap"  style="display:{{wxSearchData.view.isShow ? 'block':'none'}};height:{{wxSearchData.view.seachHeight}}px;top:{{wxSearchData.view.barHeight}}px;">
 3    <view  class="wxSearchInner">
 4        <view class="wxSearchMindKey">
 5            <view class="wxSearchMindKeyList">
 6                <block wx:for="{{wxSearchData.mindKeys}}">
 7                    <view class="wxSearchMindKeyItem" bindtap="wxSearchKeyTap" data-key="{{item}}">{{item}}</view>
 8                </block>
 9            </view>
10        </view>
11      </view>
12    </view>
13</template>

wxSearchData.mindKeys這里就是將位置列表遍歷顯示出來。

在position.wxml中引入上述代碼:

 1<import src="wxSearch/wxSearch.wxml"/>
 2<form bindsubmit="confirm">
 3  <view class="wxSearch-section">
 4    <view class="wxSearch-pancel">
 5      <input name="position" bindinput="wxSearchInput" bindfocus="wxSerchFocus" value="{{wxSearchData.value}}" bindblur="wxSearchBlur" class="wxSearch-input" placeholder="搜索"/>
 6      <button class="wxSearch-button" size="mini" formType="submit" plain="true">確定</button>
 7    </view>
 8  </view>
 9</form>
10<template is="wxSearch" data="{{wxSearchData}}"/>
11<view class="container">
12</view>

然后在postion.js中定義函數wxSearchInput:

 1 wxSearchInput: function (e) {
 2    var that = this
 3    this.data.queryLocations=[]
 4    console.log("Searching " + e.detail.value)
 5    getApp().globalData.qqmapsdk.getSuggestion({
 6      keyword: e.detail.value,
 7      region: getApp().globalData.city,
 8      success: function (res) {
 9        var targets=new Array()
10        for (let i = 0; i < res.data.length; i++) {
11            targets.push(res.data[i].title)
12            that.data.queryLocations[res.data[i].title] = res.data[i]
13        }
14        WxSearch.initMindKeys(targets)
15      }
16    })
17    WxSearch.wxSearchInput(e, that); 
18  }

其中WxSearch.initMindKeys(targets)將搜索到的候選位置名稱放入wxSearch組件展示。當提交確認表單,將返回上一頁面即home頁面,將查詢到的位置詳細信息回顯到上層頁面,表單提交處理邏輯為:

 1  confirm: function (event) {
 2    console.log(event)
 3    //WxSearch.wxSearchAddHisKey(this);
 4    let pages = getCurrentPages();//當前頁面
 5    let prevPage = pages[pages.length - 2];//上一頁面
 6    var data={}
 7    if (this.data.isStartPos=='true'){
 8      data = { isStartPos: this.data.isStartPos, startLocation: this.data.selectedLocation}
 9    }else{
10      data = { isStartPos: this.data.isStartPos, endLocation: this.data.selectedLocation}
11    }
12    //直接給上一頁面賦值
13    prevPage.setData(data);
14    wx.navigateBack({
15      delta: 1
16    })
17  }

有關頁面導航接口的詳細信息可以參考:頁面導航

( https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html )

qqmapsdk.getSuggestion就是接下來要介紹的定位服務。

c.定位服務

上面調用的api接口:qqmapsdk.getSuggestion用的是騰訊位置服務:提供了地點搜索、關鍵詞提示、(逆)地址解析、路徑規劃、距離計算、獲取城市等功能。接口getSuggestion(options:Object) 中有兩個比較重要的參數:關鍵詞:keyword和當前區域:region。其中region參數可選,可以設置城市名,用于限定搜索范圍,默認是全國。調用該接口需要申請密鑰和下載JavaScriptSDK。有關該接口如何使用的更多信息可以參考官方文檔:申請密鑰

( https://lbs.qq.com/qqmap_wx_jssdk/index.html )

。在本小程序中,我們使用到根據輸入關鍵詞獲取位置列表接口的詳細指導可以參考:獲取位置列表接口

( https://lbs.qq.com/qqmap_wx_jssdk/method-getsuggestion.html )

。這里詳細介紹下如何獲取當前region,因為當前region使用貫穿于打開小程序的整個請求生命周期,所以把獲取的region作為全局變量,在小程序啟動時候調用。我們在app.js中加載sdk組件:

1var QQMapWX = require('utils/qqmap-wx-jssdk1.0/qqmap-wx-jssdk.js');
2App({
3  onLaunch: function () {
4    var that = this;
5    that.globalData.qqmapsdk = new QQMapWX({
6      key: conf.getQqMapKey()
7    });
8}
9})

為了能夠獲取到當前region,首先需要獲取到當前位置的經緯度坐標,然后根據經緯度坐標解析出文字表示的region,具體步驟如下:

1. 獲取當前經緯度坐標

這里我們使用微信小程序提供的api接口,接口的詳細說明可以參考文檔:經緯度坐標

( https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html )

 1   wx.getLocation({
 2      type: "gcj02",
 3      success: function (res) {
 4        console.log(res)
 5        var latitude = res.latitude
 6        var longitude = res.longitude
 7        that.globalData.location = {
 8          latitude: latitude,
 9          longitude: longitude
10        }
11      }
12    })

2. 逆地址解析

這里我們用到騰信位置服務的另一個接口:reverseGeocoder(options:Object),該接口提供由坐標到坐標所在位置的文字描述的轉換,輸入坐標返回地理位置信息和附近poi列表。有關該接口的詳細信息可以參考這里:逆地址解析

]( https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html )

我們在home.js首頁加載時候調用獲取當前城市位置的文字描述。

 1onLoad: function (option) {
 2getApp().globalData.qqmapsdk.reverseGeocoder({
 3      location: {
 4        latitude: getApp().globalData.location.latitude,
 5        longitude: getApp().globalData.location.longitude
 6      },
 7      success: function (res) {
 8        console.log(res);
 9        const { city } = res.result.address_component
10        getApp().globalData.city = city
11      }
12  })
13}

這里將上面獲取的經緯度參數傳進去,返回城市city名稱。

d.行程發布

回到發布行程的函數定義,因為我們需要持久化用戶的行程信息,這里我們使用了騰訊的云開發能力。所謂云開發能力就是微信為開發者提供了全套的云原生支持和微信服務支持,弱化后端開發和運維概念,用戶無須搭建自己的服務器即可調用云端API實現自己的業務邏輯,目前微信提供的云開發能力包括云函數、云數據庫、存儲以及云調用。我們這里使用到云數據庫。云數據庫是一個 JSON 數據庫,數據庫中的每條記錄都是一個 JSON 格式的對象。一個數據庫可以有多個集合(相當于關系型數據中的表),集合可看做一個 JSON 數組,數組中的每個對象就是一條記錄,記錄的格式是 JSON 對象。使用云數據庫需要先初始化,獲取數據庫實例的引用,我們在app.js中應用啟動時候調用:
1App({
2  onLaunch: function () {
3    wx.cloud.init({
4      env: conf.getCloudEnv()
5    })
6  }
7})

其中env參數指定獲取的數據庫實例所在環境,比如開發環境和生產環境,用于數據庫實例的區分。

獲取數據庫實例之后,我們還需要通過文章開頭提到的云開發入口,登錄控制臺創建集合:

通過控制臺我們可以手動創建集合,對集合進行增刪改查,數據導入導出等功能。除此之外,集合還提供了豐富的常用api調用接口。有關云數據庫的更多信息可以參考這里:云數據庫

( https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database.html ) 。

。

回到我們發布行程記錄,雖然司機和乘客行程信息可以共享一個集合,但是為了方便后續的數據檢索和分析,我們將其分開存儲,分別命名為driver_route和passenger_route。行程記錄包含的基本信息如下:

基本字段包括用戶的openid、起始位置(包含經緯度坐標和經過轉換后的文字表示的地址)、價格、發布時間、出發時間以及用戶信息(包含用戶的圖像、注冊地)等。以下是司機發布行程核心邏輯,這里省略有關認證狀態的驗證邏輯:

 1publishRoute: function (event) {
 2    var userInfo = getApp().globalData.userInfo
 3    var openId = getApp().globalData.openId
 4    var that=this
 5    userInfo.openId = openId
 6    var route_collection = that.data.isDriver ? 'driver_route': 'passenger_route';
 7    console.log("publish " + route_collection)
 8    publishRoute.addRoute(db, route_collection, event, userInfo)
 9     wx.navigateTo({
10     url: '../drivers/drivers?isDriver=' + that.data.isDriver
11      })
12}

publishRoute.addRoute根據當前用戶角色是司機還是乘客將記錄存到不同的集合里面,定義如下:

 1var utils = require('util.js');
 2function addRoute(db,collect,event,userInfo){
 3  db.collection(collect).add({
 4    // data 字段表示需新增的 JSON 數據
 5    data: {
 6      // _id: 'todo-identifiant-aleatoire', 
 7      // 可選自定義 _id,在此處場景下用數據庫自動分配的就可以了
 8      publishDate: utils.formatTime(new Date()),
 9      userInfo: userInfo,
10      // endPoint: new db.Geo.Point(113, 23),
11      startLocation: {
12        address:event.detail.value.startLocation,
13        addr: event.detail.value.startAddr,
14        longitude: event.detail.value.startLongitude,                          
15        latitude:event.detail.value.startLatitude
16      },
17      endLocation: {
18        address:event.detail.value.endLocation,
19        addr: event.detail.value.endAddr,
20        longitude: event.detail.value.endLongitude, 
21        latitude:event.detail.value.endLatitude
22      },
23      price: event.detail.value.price,
24      routeTime: event.detail.value.routeTime,
25      routeTimeMills: new Date(event.detail.value.routeTimeMills).getTime()
26    }
27  })
28}

e.出行列表

在出行列表里面,我們主要披露行程的創建人昵稱、價格、起始位置和出發時間。我們新建driver頁面模塊。

driver.wxml實現頁面展示內容:

 1{{isDriver?"尋找的乘客列表":"尋找的司機列表"}}
 2<block wx:for="{{routes}}" wx:for-item="route">
 3  <view class="list-item" data-routeId="{{route._id}}" bindtap="detail">
 4    <view style="width: 60px; height: 60px;margin:10px">
 5        <image style="width: 60px; height: 60px; background-color: #eeeeee;" mode="{{driver}}" src="{{route.userInfo.avatarUrl}}"></image>
 6    </view>
 7    <view class='right'>
 8      <view style="display: flex;flex-direction: column;height:40px;border-block-start: 10px;">
 9          <label class='title'>{{route.userInfo.gender}}</label>
10          <label class='title'>{{route.userInfo.nickName}}</label>
11      </view>
12      <label class='price'>{{route.price}}</label>
13    </view>
14  </view>
15  <view style="margin-top:30px;">
16    <view style="display: flex;flex-direction: column;margin:10px">
17        <label class='position'>{{route.startLocation.addr}}</label>
18        <label class='position'>{{route.endLocation.addr}}</label>
19        <label class='position'>{{route.routeTime}}</label>
20      </view>
21  </view>
22</block>

其中routes就是我們獲取到的出行記錄列表,注意到 每條記錄綁定了一個到達詳情頁的回調函數和當前行程記錄id,接下來再介紹。獲取記錄列表的函數定義如下:

 1//pages/drivers/drivers.js
 2const db = wx.cloud.database()
 3 onLoad: function (options) {
 4    this.setData({ isDriver: options.isDriver=='true'?true:false })
 5    if (this.data.isDriver)
 6      publishRoute.get_passenger_route(db, this,null)
 7    else
 8      publishRoute.get_driver_route(db, this, null)
 9  }
10這里我們同樣是根據當前用戶角色加載不同的出行記錄:
11function get_driver_route(db, that, condition){
12  var coll=db.collection('driver_route')
13  if (condition != null)
14    coll = coll.where(condition)
15   coll.get({
16      success: function (res) {
17        // res.data 是一個包含集合中有權限訪問的所有記錄的數據,不超過 20 條
18        that.setData({ routes: res.data})
19      }
20    })
21}

f. 出行記錄詳情

我們創建新的頁面模塊:detail,用用于展示記錄詳情,在詳情頁可以根據不同的角色進行不同的操作,比如如果是司機的出行記錄,那么乘客可以邀請司機接單,如果是乘客記錄,那么司機可以主動接單。原型圖如下所示:

detail.wxml頁面展示內容為:

 1  <view wx:for="{{routes}}" wx:for-item="route">
 2   <view class="list-item">
 3    <view style="width: 60px; height: 60px;margin:10px">
 4        <image style="width: 60px; height: 60px; background-color: #eeeeee;" mode="{{driver}}" src="{{route.userInfo.avatarUrl}}"></image>
 5    </view>
 6    <view class='right'>
 7      <view style="display: flex;flex-direction: column;height:40px;border-block-start: 10px;">
 8          <label class='title'>{{route.userInfo.gender}}</label>
 9          <label class='title'>{{route.userInfo.nickName}}</label>
10      </view>
11      <label class='price'>{{route.price}}</label>
12    </view>
13  </view>
14  <view>
15    <view style="display: flex;flex-direction: column;">
16        <label class='position'>{{route.startLocation.addr}}</label>
17        <label class='position'>{{route.endLocation.addr}}</label>
18        <label class='position'>{{route.routeTime}}</label>         
19    </view>
20  </view>
21  <map class="map" longitude="{{route.startLocation.longitude}}" latitude="{{route.startLocation.latitude}}"></map>
22</view>
23
24<form bindsubmit="formSubmit" report-submit="true">
25   <view>
26    <input name="receiver_openid" style='display:none;' value="{{route.publish_openid}}"></input>
27    <button formType="submit" lang="zh_CN" type="primary">{{isDriver=='true'?'接單':'請他來接我'}}</button>
28  </view>
29</form>

其中詳情頁面的內容跟列表中每個出行記錄內容差不多,唯一差別就是樣式而且多了個map地圖組件,用戶可視化展示出行記錄的地點。map組件只需要告訴需要展示的經緯度既可。有關地圖組件的詳細信息可以參考文檔:地圖組件

( https://developers.weixin.qq.com/miniprogram/dev/component/map.html )。

記錄詳情頁面根據行程id從集合讀取一條記錄:

 1// pages/drivers/drivers.js
 2const db = wx.cloud.database()
 3 onLoad: function (options) {
 4    var isDriver=(options.isDriver == 'true' ? true : false);
 5    var routeId=options.routeId
 6    console.log(options)
 7    if (isDriver)
 8      publishRoute.get_driver_route(db, this, { _id: routeId})
 9    else
10      publishRoute.get_passenger_route(db, this, { _id: routeId })
11    this.setData({
12      isDriver: isDriver,
13    })
14  }
15})

集合讀取記錄跟讀取記錄列表一樣,唯一的區別就是可以根據出行id篩選一條記錄。當乘客邀請接單時候,觸發表單提交:

 1formSubmit: function (event) {
 2    console.log(event.detail.formId)
 3    wx.navigateTo({
 4      url: '../chat/chat?id=' + event.detail.value.receiver_openid,
 5      success: function (res) {
 6        console.log(res)
 7      }, fail: function (res) {
 8        console.log(res)
 9      }
10    })
11  }

實現邏輯是跳轉到聊天頁面,參數是司機的openid。有關聊天會話頁面的實現邏輯,下文詳細介紹。

(本篇文章為付費文章,這里之前為預覽部分。后續部分包括完整的開發流程詳解和完整源代碼,除了在這里付費閱讀之外,如果您是gitchat會員,也可以在gitchat閱讀:

https://gitbook.cn/gitchat/activity/5d8ed1d5f261bd7c2b9e4ba1

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 咬定青松 來自: 碼上觀世界
梦幻单人赚钱方法 甘肃11选五基本走势 福建11选五平台 体育彩票规则及玩法 上海11选五任二遗漏 十一运夺金走势图彩经网 上海配资公司 广东快乐10分遗漏数据 浙江体彩十一选五开奖结果 北京pk拾app官方网站 上海快3开奖l结果合值