微信小程序實例--洗衣小程序開發經驗分享

時間 2019-11-30

標籤微信程序實例洗衣開發經驗分享简体版

原文原文鏈接

解決問題，方便生活，爲大學校園中，企業園區裏洗衣服還要辦理洗衣卡，洗衣服的時候還得揣着一張洗衣卡，只須要拿着手機掃一掃就能完美解決，輕客洗衣微信小程序。下來看看該小程序「輕客」，本人寫了幾個本身以爲主要的功能，還有部分功能待編寫中，歡迎各位看官批評，同時跪求各位看官收藏點贊，不勝感激，上效果圖：css

概覽.gif html

注：PC端沒法實現掃碼，彈出打開文件框前端

1、準備工做

小程序嗎，慢慢玩兒，微信給玩家提供了一大推你所須要的各類各類，你只要一個微信號就行。在開發小程序時，對小程序有個大概的認識就行，不求多牛逼，記得我心目中的大佬說過，不要發等你好牛逼了纔來作牛逼的事，慢慢作，碰到問題解決問題，你就能牛逼起來，一臺PC，同時匹配PC下載好微信小程序的開發者工具，編輯器，有不少種，本人用的VSCode，接下來就開始幹了。git

2、前期開發工做

打開微信公衆平臺網頁見地址：mp.weixin.qq.com/，實名註冊一個，掃碼登陸微信公衆平臺，點擊設置->開發設置拿到屬於本身的專屬AppID(小程序ID)，詳見下圖：json

小程序ID.png
複製該AppID(小程序ID)至微信開發者工具，取名、選定文件夾 -> 添加項目，獲得的頁面又是這樣的：小程序

Hello World.png
單擊左上角編輯，出現以下界面：後端

tree.png
pages文件夾下存放着小程序全部的業務功能實現頁面，通常默認有倆，分別爲index和logs；
index文件夾就是一個頁面，index.wxml是頁面的結構文件，相似html。
index.wxss是頁面的樣式，其實就是css；
index.js是頁面的邏輯，數據請求與渲染都是都在這個頁面完成。
logs文件夾存放着小程序開發日誌，目前暫時用不到。
utils.js能夠編寫本身的JavaScript插件。
app.js處理全局的一些邏輯，好比定義全局變量存放獲取的用戶信息，這樣每一個頁面均可以獲取用戶信息。
app.json 是全局配置文件，好比設置標題欄的背景色等。
app.wxss 存放頁面的公共樣式，若是多個頁面須要用到同同樣式，就能夠寫在這裏。
項目按鈕顯示預覽二維碼，用於真機調試。必須真機調試測試代碼
更加詳細的文檔參見：
mp.weixin.qq.com/debug/wxado…
還有微信ui庫的地址： weui.io/微信小程序

3、分析業務建立所需頁面結構

一、首先分析咱們作的小程序有哪些須要用到的業務，建立相應的page，即在app.json文件裏添加相應的代碼，下圖是個人.json頁面：api

myjson.png 數組

建立了相應的page，同時刪除了原有的Index和logs。
二、編寫相應的通用樣式，在app.wxss文件裏編寫，我就啥也沒寫，還註釋了裏面的代碼。
三、通過上述第一步搭建好了頁面結構，同事同樣，上波圖，更直觀：

mytree.png

4、頁面設計效果

一、首頁大圖，也是標誌性的Logo（logo文件夾）

logo.gif

該頁面跳轉設計了點擊跳轉和定時跳轉兩種跳轉方式，點擊跳轉可能.gif文件展現的不是很好 logo.js代碼：

bindLogoTap: function() {
    wx.navigateTo({
      url: '../iconInformation/iconInformation'
    })
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    // 設置初始計時秒數
    let time = 2;
    // 開始定時器
    this.timer = setInterval(() => {
      this.setData({
        time: -- time
      });
      // 讀完秒後攜帶洗衣機編號跳轉到計費頁
      if(time < 0){
        clearInterval(this.timer)
        wx.navigateTo({
          url: '../iconInformation/iconInformation'
        })
      }
    },1000)
   
  },

logo.wxml代碼：

<view class="logo">
  <image bindtap="bindLogoTap" class="logo_page" src="/images/logo.jpg" mode="widthFix"></image>
</view>

樣式代碼就不貼了，就用圖片充滿屏幕就好了。二、主要處理頁面，也是坑的我最慘的，一個抽屜欄我就半天出不來本身想要的效果，後找了猛人幫忙，搞定了，在此感謝，見下圖：

抽屜.gif

.js代碼以下，輕鬆愉快的一個自定義函數搞定，不想我以前的繞繞繞，而後我本身都不知道了

Page({
    data: {
        translate: '',
        showPageBottom: false
    },

    
    showMenu: function() {
        this.setData({
            showPageBottom: !this.data.showPageBottom
        })
    },
}

.wxml代碼以下，圖片綁定事件

<view class="page-bottom {{showPageBottom?'active':''}}">

三、業務界面，這裏面設計的業務不是不少，就一張一張圖片貼了。

3.一、點擊信息小圖標，進入到sms業務界面，圖片以下：

消息.png

3.二、用戶信息頁，抽屜欄最上方小型logo圖標出現，以下圖：

用戶信息.gif
部分js代碼以下，單選按鈕默認選中「男」

data: {
    items: [
      {name: 'men', value: '男', checked: 'true'},
      {name: 'women', value: '女'},
    ]
  },
  radioChange: function(e) {
    console.log('radio發生change事件，攜帶value值爲：', e.detail.value)
  },

3.三、個人錢包頁，點擊個人錢包就行了，頁面跳轉後又有若是不選定金額，下面的提交按鈕默認是灰色的，這是點擊提交按鈕出現的用戶反饋信息彈窗；同時點擊按鈕的時候就提交按鈕就變色顯示，可選擇充值金額，效果圖以下：

個人錢包.gif

部分js代碼以下：

// pages/wallet/wallet.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
      // 充值數額類型數組
    checkboxValue: [],
    // 提交按鈕的背景色，未勾選類型時無顏色
    btnBgc: "",
    // 複選框的value，此處預約義，而後循環渲染到頁面
    itemsValue: [
      {
        checked: false,
        value: "充值¥10輕幣",
        color: "#b9dd08"
      },
      {
        checked: false,
        value: "充值¥20輕幣",
        color: "#b9dd08"
      },
      {
        checked: false,
        value: "充值¥50輕幣",
        color: "#b9dd08"
      },
      {
        checked: false,
        value: "充值¥60輕幣",
        color: "#b9dd08"
      },
      {
        checked: false,
        value: "充值¥80輕幣",
        color: "#b9dd08"
      },
      {
        checked: false,
        value: "充值¥100輕幣",
        color: "#b9dd08"
      }
    ]
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  // 頁面加載
  onLoad:function(options){
    wx.setNavigationBarTitle({
      title: '個人錢包'
    })
  },
// 勾選充值金額，獲取類型值存入checkboxValue
  checkboxChange: function(e){
    let _values = e.detail.value;
    if(_values.length == 0){
      this.setData({
        btnBgc: ""
      })
    }else{
      this.setData({
        checkboxValue: _values,
        btnBgc: "#b9dd08"
      })
    }   
  },
// 輸入充值金額，存入inputValue
  numberChange: function(e){
    this.setData({
      inputValue: {
        num: e.detail.value,
        desc: this.data.inputValue.desc
      }
    })
  },
// 輸入備註，存入inputValue
  descChange: function(e){
    this.setData({
      inputValue: {
        num: this.data.inputValue.num,
        desc: e.detail.value
      }
    })
  },
// 提交到服務器
  formSubmit: function(e){
    if(this.data.checkboxValue.length> 0){
      wx.request({
        url: 'https://www.easy-mock.com/mock/59098d007a878d73716e966f/ofodata/msg',
        data: {
        },
        method: 'get', 
        success: function(res){
          wx.showToast({
            title: res.data.data.msg,
            icon: 'success',
            duration: 2000
          })
        }
      })
    }else{
      wx.showModal({
        title: "請填寫反饋信息",
        content: '你寶貴的意見是咱們改進的方向',
        confirmText: "如實填寫",
        cancelText: "忽略",
        success: (res) => {
          if(res.confirm){
            // 繼續填
          }else{
            console.log("back")
            wx.navigateBack({
              delta: 1 // 回退前 delta(默認爲1) 頁面
            })
          }
        }
      })
    }   
  }
})

3.四、優惠券頁，效果圖以下：

優惠券.gif

3.五、個人洗衣機頁，查看當前已綁定的洗衣機，還可申請綁定或是租賃相應的洗衣機，效果圖以下：

個人洗衣機.png
3.六、設置頁，相關設置均在此，上效果圖吧，以下：

設置.png

3.七、推薦給好友，這一頁來點不一樣的，就寫模塊待開發

推薦給好友.gif
3.八、點我洗衣，主頁面下方點我洗衣，效果圖以下：

logo.png

點我洗衣.gif

掃碼.jpg
拖動位置點擊從新定位回到當前位置，另因爲PC端掃碼功能更不同爲打開文件形式，上的真機測試截圖。貌似有點不三不四，還請各位看官見諒。。。
js代碼

//myoption.js
//獲取應用實例
var app = getApp()
Page({
  data: {
    scale: 18,
    latitude: 22.650529,
    longitude: 113.925354
  },
// 頁面加載
  onLoad: function (options) {
    // 1.獲取定時器，用於判斷是否在洗衣
    this.timer = options.timer;

    // 2.獲取並設置當前位置經緯度定位
    wx.getLocation({
      type: "gcj02",
      success: (res) => {
        this.setData({
          longitude: res.longitude,
          latitude: res.latitude
        })
      }
    });

    // 3.設置地圖控件的位置及大小，經過設備寬高定位
    wx.getSystemInfo({
      success: (res) => {
        this.setData({
          controls: [{
            id: 1,
            iconPath: '/images/location.png',
            position: {
            left: 20,
            top: res.windowHeight - 80,
            width: 50,
            height: 50
            },
            clickable: true
          },
          {
            id: 2,
            iconPath: '/images/use.png',
            position: {
            left: res.windowWidth/2 - 45,
            top: res.windowHeight - 100,
            width: 90,
            height: 90
            },
            clickable: true
          },
          {
            id: 3,
            iconPath: '/images/warn.png',
            position: {
            left: res.windowWidth - 70,
            top: res.windowHeight - 80,
            width: 50,
            height: 50
            },
            clickable: true
          },
          {
            id: 4,
            iconPath: '/images/marker.png',
            position: {
            left: res.windowWidth/2 - 11,
            top: res.windowHeight/2 - 45,
            width: 22,
            height: 45
            },
            clickable: true
          },
          {
            id: 5,
            iconPath: '/images/avatar.png',
            position: {
            left: res.windowWidth - 68,
            top: res.windowHeight - 155,
            width: 45,
            height: 45
            },
            clickable: true
          }]
        })
      }
    });

    // 4.請求服務器，顯示附近的洗衣機，用marker標記
    wx.request({
      url: 'http://easy-mock.com/mock/596d6dbea1d30433d835cab0/query/list',
      data: {},
      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      // header: {}, // 設置請求的 header
      success: (res) => {
          this.setData({
            markers: res.data.data
          })
      },
      fail: function(res) {
        // fail
      },
      complete: function(res) {
        // complete
      }
    })
  },
// 頁面顯示
  onShow: function(){
    // 1.建立地圖上下文，移動當前位置到地圖中心
    this.mapCtx = wx.createMapContext("QingKeMap");
    this.movetoPosition()
  },
// 地圖控件點擊事件
  bindcontroltap: function(e){
    // 判斷點擊的是哪一個控件 e.controlId表明控件的id，在頁面加載時的第3步設置的id
    switch(e.controlId){
      // 點擊定位控件
      case 1: this.movetoPosition();
        break;
      // 點擊當即洗衣，判斷當前是否正在計時
      case 2: if(this.timer === "" || this.timer === undefined){
          // 沒有在計費就掃碼
          wx.scanCode({
            success: (res) => {
              // 正在獲取密碼通知
              wx.showLoading({
                title: '洗衣準備',
                mask: true
              })
              // 請求服務器獲取密碼和洗衣機
              wx.request({
                url: 'http://easy-mock.com/project/596d6dbea1d30433d835cab0/query',
                data: {},
                method: 'GET', 
                success: function(res){
                  // 請求密碼成功隱藏等待框
                  wx.hideLoading();
                  // 攜帶密碼和洗衣機編號跳轉到密碼頁
                  wx.redirectTo({
                    url: '../scanresult/index?password=' + res.data.data.password + '&number=' + res.data.data.number,
                    success: function(res){
                      wx.showToast({
                        title: '獲取密碼成功',
                        duration: 1000
                      })
                    }
                  })           
                }
              })
            }
          })
        // 當前已經在計費就回退到計費頁
        }else{
          wx.navigateBack({
            delta: 1
          })
        }  
        break;
      default: break;
    }
  },
// 地圖視野改變事件
  bindregionchange: function(e){
    // 拖動地圖，獲取附件洗衣機位置
    if(e.type == "begin"){
      wx.request({
        url: 'http://easy-mock.com/mock/596d6dbea1d30433d835cab0/query/list',
        data: {},
        method: 'GET', 
        success: (res) => {
          this.setData({
            _markers: res.data.data
          })
        }
      })
    // 中止拖動，顯示單車位置
    }else if(e.type == "end"){
        this.setData({
          markers: this.data._markers
        })
    }
  },
// 地圖標記點擊事件，鏈接用戶位置和點擊的單車位置
  bindmarkertap: function(e){
    console.log(e);
    let _markers = this.data.markers;
    let markerId = e.markerId;
    let currMaker = _markers[markerId];
    this.setData({
      polyline: [{
        points: [{
          longitude: this.data.longitude,
          latitude: this.data.latitude
        }, {
          longitude: currMaker.longitude,
          latitude: currMaker.latitude
        }],
        color:"#FF0000DD",
        width: 1,
        dottedLine: true
      }],
      scale: 18
    })
  },
// 定位函數，移動位置到地圖中心
  movetoPosition: function(){
    this.mapCtx.moveToLocation();
  }
})

wxml文件

<view class="container">
  <map id="QingKeMap" latitude="{{latitude}}" longitude="{{longitude}}" scale="{{scale}}" bindregionchange="bindregionchange" polyline="{{polyline}}" markers="{{markers}}" controls="{{controls}}" bindmarkertap="bindmarkertap"  bindcontroltap="bindcontroltap" show-location/>
</view>

5、擴展總結

因爲服務器和本人技術問題，這裏省得數據使用的是easy-mock僞造數據；easy-mock能夠做爲前端開發的僞後端，本身構造數據來測試前端代碼。方便又快捷。
同時使用了一些微信小程序的官方API，如：
掃碼API: wx.scanCode({})
向服務器發送請求：wx.request({})
顯示加載框： wx.showLoading()
隱藏加載框： wx.hideLoading()
顯示提示框： wx.showToast()
隱藏提示框： wx.hideToast()
關閉當前頁面，跳轉到指定頁面： wx.redirectTo({})
保留當前頁面，跳轉到指定頁面： wx.navigateTo({})
回退到指定頁面： wx.naivgateBack({})
一些詳細用法和更多其餘的API請查看微信小程序API文檔小結：輕客洗衣下程序也弄得七七八八了，剩下還有一些功能待接下來繼續完成，本人開發過程當中遇到過不少的坎，有一個我的以爲最重要的效果顯示（抽屜欄菜單）很久都沒有作出本身的想要的效果，查了N多資料，就是搞不定，最後請教大佬實例操做一波，幾行子代碼替代我幾十行代碼搞定，最重要的是個人幾十行還實現不了，這就很尷尬了吧，鹹魚仍是得努力翻身啊！不會的找大神，提點幾句本身動手作能解決最好了，實在不行，請教大佬實地地操做一波了，搞定了本身還得好好悟，努力進步就是最好的。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。