一個多月的時間研究和編寫，做了個測試專案，由於本人的css不好，做的介面很是難看，希望不要在意。

首頁

1. 這個頁面主要是定位，其實很簡單，就是呼叫微信Api（wx.getLocation），可以直接獲取經緯度，（wx.chooseLocation方法可以調取地圖顯示位置）

程式碼如下：

wx.getLocation({
      success: function (res) {
          that.globalData.longitude = res.longitude,
          that.globalData.latitude=res.latitude//這裡是獲取經緯度
      },
    })
 

購買

2.購買，主要是支付功能（ wx.requestPayment），這一塊需要與自己伺服器配合，我的做法步奏為：1.先調伺服器介面獲取訂單---->2.根據訂單號獲取支付所需要的串----->3.呼叫wx.requestPayment

程式碼：

//調起微信支付
  gotoWxPay() {
    var that = this;
    var payStrArr = that.data.wxPayString.split("&");
    var payStrDict = {};
    if (payStrArr.length>0)
    {
      var j;
      for (var i = 0;  j = payStrArr[i]; i++){
        payStrDict[j.substring(0, j.indexOf("="))] = j.substring(j.indexOf("=") + 1,    j.length);
      }
       
    }
     wx.requestPayment({
       "appId": payStrDict["appId"],
       "timeStamp": payStrDict["timeStamp"],
       "nonceStr": payStrDict["nonceStr"],
       "package": "prepay_id=" + payStrDict["pg"],
       "signType": 'MD5',
       "paySign": payStrDict["paySign"],
      success: function(res) {
       console.log("支付成功");
      },  
      fail: function () {
      },
      complete: function () {
       }  
      })
  }
 

點技師

1. 沒有什麼技術點，都是一些佈局上的控制，呼叫介面時，要把之前獲取的經緯度傳過去，就需要把之前的經緯度儲存為全域性變數。唯一有點容易錯誤的就是跳轉頁面傳值：

.wxml程式碼

<image class='imageView' mode="scaleToFill" src="{{imageUrl}}{{data.headImgUrl}}       " data-headerUrl= "{{imageUrl}}{{data.headImgUrl}}" data-jsgh='{{data.gh}}' bindtap='bigImag' ></image>

data-headerUrl在起箇中間變數
js點選圖片方法：

bigImag(e){
    var imageUrl = e.currentTarget.dataset.headerurl;
    var jsGh = e.currentTarget.dataset.jsgh;
   wx.navigateTo({
     url: '../bigImage/bigImage?headerUrl=' + imageUrl + "&jsNum=" + jsGh
   })
  }

注意：（headerUrl這個引數即使大寫 在點選方法中e.currentTarget.dataset.headerurl 是小寫）

資訊

1. 主要是一些養生的方法，可以仔細看一下以防止。（沒有主要的技術點，自己隨便看看啦）

我的

5.我的自己的訂單一些資訊，主要的功能模組為：登入（獲取使用者資訊），掃碼核銷，繫結手機號碼，傳送推送（模版訊息）

1）登入（彈框 倒計時 前面文章有仔細寫）
2）掃碼核銷

程式碼：

//掃描核銷
  scandCode(){
    wx.scanCode({
      success: (res) => {
        console.log(res)
      }
    })
  }

3）繫結手機號碼
.wxml程式碼

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" class='bind' >繫結手機號</button>

js程式碼

//繫結手機號碼
  getPhoneNumber: function (e) {
    console.log(e.detail.errMsg)
    console.log(e.detail.iv)
    console.log(e.detail.encryptedData)
    this.setData({
      telePhone: "1521****014"
    })
  }

4）傳送推送（模版訊息）
我前面的文章中有，感興趣的可以檢視。