小程式專案總結

專案快做完了，做下總結：

 

需求：登入模組、裝置列表展示模組、個人中心模組、詳情模組,總共分為這四個模組內容。

一、拿到專案需求後，先建立了一下專案，然後封裝了一些常用的方法，http請求和時間處理函式Date

1、封裝http請求，比較簡單用Promise 進行封裝，把返回的資料resolve(res)，然後把http.js引入到全域性app.js中，利用globalData{}物件進行全域性管理。

 

const baseUrl = 'https://xxx'
let http= (method, urlData)=>{
    return new Promise((resolve,reject)=>{
        wx.request({
            url: baseUrl + urlData.url,
            data: urlData.data,
            method: method,
            header: {
                "Content-Type": "application/json",
                "Authorization": "bearer " + wx.getStorageSync('token')
            },
            success: function (res) {
                resolve(res)
            },
            fail: function (err) {
                reject(err)
            }
        })
    })
}
export default http

 

2、因為專案中需要對時間進行處理，後臺返回的是時間戳這裡就封裝了一個時間轉換處理函式，程式碼比較簡單，同http一樣引入全域性。

 

二、想了想為了加快開發速度，就在專案中引入vant ui 框架，使用簡單npm 下載下來，在開發工具中構建一下npm就ok了，使用方法官方已給出:https://vant-contrib.gitee.io/vant-weapp/#/intro

 

三、登入模組開發

需求：一鍵登入、輸入賬號密碼登入，兩種方式

1、一鍵登入

分析：

（1）、一鍵登入的賬號主要來源是微信繫結的手機號碼，所以我們要進行手機號碼授權（拿到encryptedData和iv，後端解碼獲取到手機號碼）

（2）、在登入時我們需要獲取code登入標識（有時間限制，只能使用一次）

（3）、傳送登入請求，把code、encryptedData、iv提交給後端做登入處理，返回sessionkey和token並儲存

 

2、賬號密碼登入

分析：

（1）、傳送請求向後端提交賬號和密碼，返回token並儲存

（2）、這裡輸入賬號和密碼是要做雙向繫結，監聽輸入事件把輸入內容賦值給user和password

（3）、在做清空和密碼隱藏顯示時圖示不要放在輸入框內，不然會觸發冒泡，鍵盤不會收回

（4）、注意在隱藏和顯示密碼這兒，一定好看清文件，是password屬性的true和false來控制隱藏於顯示，不是type屬性

 

這塊內容沒啥難點，不放程式碼了！

 

四、首頁&列表頁面

1、初始化頁面

分析：

（1）、在頁面載入前要判斷是否已登入（根據儲存的token和sessionkey）

（2）、已登入下，區分是一鍵登入還是賬號密碼登入（賬號密碼登入無sessionkey），然後直接請求列表資料，請求根據狀態碼如果token過期，走重新整理token的介面（重新整理成功則儲存重新整理後的token重新進入該頁面，否則提示重新登入  ==> 清空快取 ==> 跳轉到登入頁）

 

2、頁面佈局

　　九宮格佈局----父盒子

            display: flex;

            flex-wrap: wrap;

 

　　九宮格佈局----子盒子

            width: calc(calc(100% / 3) - x);

            margin: x/2;

 

3、渲染頁面

資料渲染，比較簡單，不多講

 

 

五、個人中心

 

1、沒有難點，注意的地方就是，預覽圖片時，圖片地址必須是http請求，不能為本地

 

wx.previewImage({
      urls: urlList //urlList是陣列
})

 

2、退出登入要清空快取

 

六、詳情頁面

需求：展示裝置詳情資料，裝置差不多100種左右，每個裝置的ui不同；重點來了，不同裝置詳情頁面可以左右滑動到下一個頁面（順序為首頁的順序，滑動效果輪播圖那樣）

天哪這一個頁面得寫多少程式碼啊啊啊...，後臺介面只有獲取裝置列表和根據裝置id獲取詳情資料，且格式由於是轉發不能修改

額，只能一點點寫了，

1、直接把官方的swiper元件拿過來開擼，為了減少請求直接把首頁請求的裝置列表list傳到的詳情頁並儲存

2、初始化，根據傳遞的裝置id，請求詳情資料，把需要的資料繫結到list陣列下對應的裝置資料物件中

3、dom結構是根據不同裝置ui進行了劃分，共有的和私有的，通過wx-if來進行要渲染的內容

4、要區分當前詳情資料第幾頁，這裡首先把拿到的list陣列過濾，得到有詳情頁的資料列表（有些裝置無詳情頁），然後迴圈查詢當前的裝置id，迴圈的key+1值就是第幾個裝置，並且把當swiper元件的當前頁頁設定為key。

5、左右滑動的時候，根據滑動後觸發事件，獲得的索引作為list的索引，拿到下個裝置的id,然後進行渲染（渲染前清除上個裝置的dom）

6、這裡且套了多次迴圈，主要還是請求到的資料格式不理想，導致了寫了很多處理格式的程式碼

7、測試，發現bug,左右來回滑動很快的時候，停下來後頁面會不停抖動，查了下是元件的bug。

解決方式：對滑動事件觸發後 的觸發源做判斷，如果是touch則進行頁面渲染，解決了抖動問題；

測試發現出現無法滑動的bug，分析是滑動後更改當前頁導致

解決方式：做節流，當觸發滑動事件後到渲染資料這段時間禁止頁面滑動，當渲染完成才允許滑動，現在就是如何禁止頁面滑動，元件沒這個屬性，想到通過新增一個透明層來阻止滑動執行（有更好的方法的小夥伴可以分享下）。

 

7、需要增加要實時更新資料和上報推送訊息-------webSocket

上網找了下有很多現成的輪子，看了下很簡單。

附上原文地址：https://www.cnblogs.com/nanyang520/p/11200857.html

var sotk = null;
var socketOpen = false;
var wsbasePath = "ws://開發者伺服器 wss 介面地址/";

//開始webSocket
  webSocketStart(e){
    sotk = wx.connectSocket({
      url: wsbasePath,
      header: { 'content-type': 'application/x-www-form-urlencoded' },
      method: "POST",
      success: res => {
        console.log('小程式連線成功：', res);
      },
      fail: err => {
        console.log('出現錯誤啦！！' + err);
        wx.showToast({
          title: '網路異常！',
        })
      }
    })

    this.webSokcketMethods();

  },

//監聽指令
  webSokcketMethods(e){
    let that = this;
    sotk.onOpen(res => {
      socketOpen = true;
      console.log('監聽 WebSocket 連線開啟事件。', res);
    })
    sotk.onClose(onClose => {
      console.log('監聽 WebSocket 連線關閉事件。', onClose)
      socketOpen = false;
    })
    sotk.onError(onError => {
      console.log('監聽 WebSocket 錯誤。錯誤資訊', onError)
      socketOpen = false
    })

    sotk.onMessage(onMessage => {
      var data = JSON.parse(onMessage.data);
      console.log('監聽WebSocket接受到伺服器的訊息事件。伺服器返回的訊息',data);
     
    })
   
  },

//傳送訊息
  sendSocketMessage(msg) {
    let that = this;
    if (socketOpen){
      console.log('通過 WebSocket 連線傳送資料', JSON.stringify(msg))
      sotk.send({
        data: JSON.stringify(msg)
      }, function (res) {
        console.log('已傳送', res)
      })
    }
    
  },
 //關閉連線
  closeWebsocket(str){
    if (socketOpen) {
      sotk.close(
        {
          code: "1000",
          reason: str,
          success: function () {
            console.log("成功關閉websocket連線");
          }
        }
      )
    }
  }

 

8、需求更改 要用MQTT

好吧，開擼

分析需要：在詳情頁面只重新整理頁面資料不做訊息提示，其他頁面做彈框推送提示

下載mqtt.js 地址：https://unpkg.com/mqtt@4.1.0/dist/mqtt.min.js

程式碼mqtt全域性連線,如果沒有頁面都要連線一次的話會出現bug ，webSocket連線有次數限制，官方說明：https://developers.weixin.qq.com/miniprogram/dev/api/network/websocket/wx.connectSocket.html

這裡因為要在登入之後連線mqtt,並且主題是動態根據使用者id而改變的，所以這裡封裝了個Promise,並把連線後的client匯出，做資料監聽。

var mqtt = require('utils/mqtt.min.js');
var client = null;
var connect = function(id) {
    return new Promise((resolve,reject)=>{
            const options = {
                connectTimeout: 4000, // 超時時間
                clientId: 'wx_' + parseInt(Math.random() * 100 + 800, 10),
                port:8084
            }

            client = mqtt.connect('wxs://xxx', options)

            client.on('reconnect', (error) => {
                console.log('正在重連:', error)
            })

            client.on('error', (error) => {
                console.log('連線失敗:', error)
            })

            let that = this;
            client.on('connect', (e) => {
                console.log('成功連線伺服器')
                //訂閱主題
                client.subscribe(['主題1'+id, '主題2'+id], {
                    qos: 1
                }, function (err) {
                    if (!err) {
                        console.log("訂閱成功")
                        resolve(client)
                    }
                })
            })
    })
}

 

監聽：

client.on('message', function (topic, message, packet) {
       console.log(packet)
})

 

注意它來了!

connect(id)只在首頁呼叫一次，並且把返回的client存為全域性使用，然後就可以在詳情頁面中通過全域性client直接監聽messgae並做響應的邏輯了。

　　　　

關閉連線：在退出登入或者判斷token不存在的時候執行，由於關閉後它會可能自動連線，所以最好是在判斷token不存在時關閉連線

 wx.closeSocket()

附官方文件：https://github.com/mqttjs/MQTT.js

 

 

結束啦！

整體就這些內容，具體的不同裝置ui的問題涉及的一些知識點，以後有時間在補存或另寫一章。