欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

小程序項目總結 - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設/小程序開發(fā)/軟件開發(fā)

知識

不管是網(wǎng)站,軟件還是小程序,都要直接或間接能為您產(chǎn)生價值,我們在追求其視覺表現(xiàn)的同時,更側重于功能的便捷,營銷的便利,運營的高效,讓網(wǎng)站成為營銷工具,讓軟件能切實提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序為后期升級提供便捷的支持!

您當前位置>首頁 » 新聞資訊 » 小程序相關 >

小程序項目總結

發(fā)表時間:2021-1-5

發(fā)布人:葵宇科技

瀏覽次數(shù):41

需求:登錄模塊、設備列表展示模塊、個人中心模塊、詳情模塊,總共分為這四個模塊內(nèi)容。

一、拿到項目需求后,先創(chuàng)建了一下項目,然后封裝了一些常用的方法,http請求和時間處理函數(shù)Date

1、封裝http請求,比較簡單用Promise 進行封裝,把返回的數(shù)據(jù)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": wx.getStorageSync('token') }, success: function (res) { resolve(res) }, fail: function (err) { reject(err) } }) }) } export default http
復制代碼

2、因為項目中需要對時間進行處理,后臺返回的是時間戳這里就封裝了一個時間轉換處理函數(shù),代碼比較簡單,同http一樣引入全局。

二、想了想為了加快開發(fā)速度,就在項目中引入vant ui 框架,使用簡單npm 下載下來,在開發(fā)工具中構建一下npm就ok了

三、登錄模塊開發(fā)

需求:一鍵登錄、輸入賬號密碼登錄,兩種方式

1、一鍵登錄

分析:

(1)、一鍵登錄的賬號主要來源是微信綁定的手機號碼,所以我們要進行手機號碼授權(拿到encryptedData和iv,后端解碼獲取到手機號碼)

(2)、在登錄時我們需要獲取code登錄標識(有時間限制,只能使用一次)

(3)、發(fā)送登錄請求,把code、encryptedData、iv提交給后端做登錄處理,返回sessionkey和token并保存

2、賬號密碼登錄

分析:

(1)、發(fā)送請求向后端提交賬號和密碼,返回token并保存

(2)、這里輸入賬號和密碼是要做雙向綁定,監(jiān)聽輸入事件把輸入內(nèi)容賦值給user和password

(3)、在做清空和密碼隱藏顯示時圖標不要放在輸入框內(nèi),不然會觸發(fā)冒泡,鍵盤不會收回

(4)、注意在隱藏和顯示密碼這兒,一定好看清文檔,是password屬性的true和false來控制隱藏于顯示,不是type屬性

這塊內(nèi)容沒啥難點,不放代碼了!

四、首頁&列表頁面

1、初始化頁面

分析:

(1)、在頁面加載前要判斷是否已登錄(根據(jù)保存的token和sessionkey)

(2)、已登錄下,區(qū)分是一鍵登錄還是賬號密碼登錄(賬號密碼登錄無sessionkey),然后直接請求列表數(shù)據(jù),請求根據(jù)狀態(tài)碼如果token過期,走刷新token的接口(刷新成功則保存刷新后的token重新進入該頁面,否則提示重新登錄  ==> 清空緩存 ==> 跳轉到登錄頁)

2、頁面布局

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

            display: flex;
            flex-wrap: wrap;
 
  九宮格布局----子盒子
            width: calc(calc(100% / 3) - x);
            margin: x/2;
 
3、渲染頁面

數(shù)據(jù)渲染,比較簡單,不多講
 
五、個人中心
 
1、沒有難點,注意的地方就是,預覽圖片時,圖片地址必須是http請求,不能為本地
wx.previewImage({
      urls: urlList //urlList是數(shù)組
})

2、退出登錄要清空緩存


六、詳情頁面

需求:展示設備詳情數(shù)據(jù),設備差不多100種左右,每個設備的ui不同;重點來了,不同設備詳情頁面可以左右滑動到下一個頁面(順序為首頁的順序,滑動效果輪播圖那樣)

天哪這一個頁面得寫多少代碼啊啊啊...,后臺接口只有獲取設備列表和根據(jù)設備id獲取詳情數(shù)據(jù),且格式由于是轉發(fā)不能修改

額,只能一點點寫了,

1、直接把官方的swiper組件拿過來開擼,為了減少請求直接把首頁請求的設備列表list傳到的詳情頁并保存

2、初始化,根據(jù)傳遞的設備id,請求詳情數(shù)據(jù),把需要的數(shù)據(jù)綁定到list數(shù)組下對應的設備數(shù)據(jù)對象中

3、dom結構是根據(jù)不同設備ui進行了劃分,共有的和私有的,通過wx-if來進行要渲染的內(nèi)容

4、要區(qū)分當前詳情數(shù)據(jù)第幾頁,這里首先把拿到的list數(shù)組過濾,得到有詳情頁的數(shù)據(jù)列表(有些設備無詳情頁),然后循環(huán)查找當前的設備id,循環(huán)的key+1值就是第幾個設備,并且把當swiper組件的當前頁頁設置為key。

5、左右滑動的時候,根據(jù)滑動后觸發(fā)事件,獲得的索引作為list的索引,拿到下個設備的id,然后進行渲染(渲染前清除上個設備的dom)

6、這里且套了多次循環(huán),主要還是請求到的數(shù)據(jù)格式不理想,導致了寫了很多處理格式的代碼

7、測試,發(fā)現(xiàn)bug,左右來回滑動很快的時候,停下來后頁面會不停抖動,查了下是組件的bug。

解決方式:對滑動事件觸發(fā)后 的觸發(fā)源做判斷,如果是touch則進行頁面渲染,解決了抖動問題;

測試發(fā)現(xiàn)出現(xiàn)無法滑動的bug,分析是滑動后更改當前頁導致

解決方式:做節(jié)流,當觸發(fā)滑動事件后到渲染數(shù)據(jù)這段時間禁止頁面滑動,當渲染完成才允許滑動,現(xiàn)在就是如何禁止頁面滑動,組件沒這個屬性,想到通過添加一個透明層來阻止滑動執(zhí)行(有更好的方法的小伙伴可以分享下)。

 

7、需要增加要實時更新數(shù)據(jù)和上報推送消息-------webSocket

上網(wǎng)找了下有很多現(xiàn)成的輪子,看了下很簡單。

復制代碼
var sotk = null;
var socketOpen = false;
var wsbasePath = "ws://開發(fā)者服務器 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('出現(xiàn)錯誤啦!!' + err);
        wx.showToast({
          title: '網(wǎng)絡異常!',
        })
      }
    })

    this.webSokcketMethods();

  },

//監(jiān)聽指令
  webSokcketMethods(e){
    let that = this;
    sotk.onOpen(res => {
      socketOpen = true;
      console.log('監(jiān)聽 WebSocket 連接打開事件。', res);
    })
    sotk.onClose(onClose => {
      console.log('監(jiān)聽 WebSocket 連接關閉事件。', onClose)
      socketOpen = false;
    })
    sotk.onError(onError => {
      console.log('監(jiān)聽 WebSocket 錯誤。錯誤信息', onError)
      socketOpen = false
    })

    sotk.onMessage(onMessage => {
      var data =http://www.wxapp-union.com/ JSON.parse(onMessage.data);
      console.log('監(jiān)聽WebSocket接受到服務器的消息事件。服務器返回的消息',data);
     
    })
   
  },

//發(fā)送消息
  sendSocketMessage(msg) {
    let that = this;
    if (socketOpen){
      console.log('通過 WebSocket 連接發(fā)送數(shù)據(jù)', JSON.stringify(msg))
      sotk.send({
        data: JSON.stringify(msg)
      }, function (res) {
        console.log('已發(fā)送', res)
      })
    }
    
  },
 //關閉連接
  closeWebsocket(str){
    if (socketOpen) {
      sotk.close(
        {
          code: "1000",
          reason: str,
          success: function () {
            console.log("成功關閉websocket連接");
          }
        }
      )
    }
  }
復制代碼

 

8、需求更改 要用MQTT

好吧,開擼

分析需要:在詳情頁面只刷新頁面數(shù)據(jù)不做消息提示,其他頁面做彈框推送提示

代碼mqtt全局連接,如果沒有頁面都要連接一次的話會出現(xiàn)bug ,webSocket連接有次數(shù)限制

這里因為要在登錄之后連接mqtt,并且主題是動態(tài)根據(jù)用戶id而改變的,所以這里封裝了個Promise,并把連接后的client導出,做數(shù)據(jù)監(jiān)聽。

復制代碼
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)
                    }
                })
            })
    })
}
復制代碼

 

監(jiān)聽:

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

 

注意它來了!

connect(id)只在首頁調(diào)用一次,并且把返回的client存為全局使用,然后就可以在詳情頁面中通過全局client直接監(jiān)聽messgae并做響應的邏輯了?!?

關閉連接:在退出登錄或者判斷token不存在的時候執(zhí)行,由于關閉后它會可能自動連接,所以最好是在判斷token不存在時關閉連接

 wx.closeSocket()

相關案例查看更多