小程序項目總結

項目快作完了，作下總結：

 

需求：登陸模塊、設備列表展現模塊、我的中心模塊、詳情模塊,總共分爲這四個模塊內容。

1、拿到項目需求後，先建立了一下項目，而後封裝了一些經常使用的方法，http請求和時間處理函數Date

一、封裝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

 

二、由於項目中須要對時間進行處理，後臺返回的是時間戳這裏就封裝了一個時間轉換處理函數，代碼比較簡單，同http同樣引入全局。

 

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

 

3、登陸模塊開發

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

一、一鍵登陸

分析：

（1）、一鍵登陸的帳號主要來源是微信綁定的手機號碼，因此咱們要進行手機號碼受權（拿到encryptedData和iv，後端解碼獲取到手機號碼）

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

（3）、發送登陸請求，把code、encryptedData、iv提交給後端作登陸處理，返回sessionkey和token並保存

 

二、帳號密碼登陸

分析：

（1）、發送請求向後端提交帳號和密碼，返回token並保存

（2）、這裏輸入帳號和密碼是要作雙向綁定，監聽輸入事件把輸入內容賦值給user和password

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

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

 

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

 

4、首頁&列表頁面

一、初始化頁面

分析：

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

（2）、已登陸下，區分是一鍵登陸仍是帳號密碼登陸（帳號密碼登陸無sessionkey），而後直接請求列表數據，請求根據狀態碼若是token過時，走刷新token的接口（刷新成功則保存刷新後的token從新進入該頁面，不然提示從新登陸  ==> 清空緩存 ==> 跳轉到登陸頁）

 

二、頁面佈局

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

            display: flex;

            flex-wrap: wrap;

 

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

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

            margin: x/2;

 

三、渲染頁面

數據渲染，比較簡單，很少講

 

 

5、我的中心

 

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

 

wx.previewImage({
      urls: urlList //urlList是數組
})

 

二、退出登陸要清空緩存

 

6、詳情頁面

需求：展現設備詳情數據，設備差很少100種左右，每一個設備的ui不一樣；重點來了，不一樣設備詳情頁面能夠左右滑動到下一個頁面（順序爲首頁的順序，滑動效果輪播圖那樣）

天哪這一個頁面得寫多少代碼啊啊啊...，後臺接口只有獲取設備列表和根據設備id獲取詳情數據，且格式因爲是轉發不能修改

額，只能一點點寫了，

一、直接把官方的swiper組件拿過來開擼，爲了減小請求直接把首頁請求的設備列表list傳到的詳情頁並保存

二、初始化，根據傳遞的設備id，請求詳情數據，把須要的數據綁定到list數組下對應的設備數據對象中

三、dom結構是根據不一樣設備ui進行了劃分，共有的和私有的，經過wx-if來進行要渲染的內容

四、要區分當前詳情數據第幾頁，這裏首先把拿到的list數組過濾，獲得有詳情頁的數據列表（有些設備無詳情頁），而後循環查找當前的設備id，循環的key+1值就是第幾個設備，而且把當swiper組件的當前頁頁設置爲key。

五、左右滑動的時候，根據滑動後觸發事件，得到的索引做爲list的索引，拿到下個設備的id,而後進行渲染（渲染前清除上個設備的dom）

六、這裏且套了屢次循環，主要仍是請求到的數據格式不理想，致使了寫了不少處理格式的代碼

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

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

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

解決方式：作節流，當觸發滑動事件後到渲染數據這段時間禁止頁面滑動，當渲染完成才容許滑動，如今就是如何禁止頁面滑動，組件沒這個屬性，想到經過添加一個透明層來阻止滑動執行（有更好的方法的小夥伴能夠分享下）。

 

七、須要增長要實時更新數據和上報推送消息-------webSocket

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

附上原文地址：http://www.javashuo.com/article/p-pgwczior-nx.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鏈接");
          }
        }
      )
    }
  }

 

八、需求更改 要用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的問題涉及的一些知識點，之後有時間在補存或另寫一章。