知識
不管是網(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、頁面布局
九宮格布局----父盒子
wx.previewImage({
urls: urlList //urlList是數(shù)組
})
2、退出登錄要清空緩存
六、詳情頁面
需求:展示設備詳情數(shù)據(jù),設備差不多100種左右,每個設備的ui不同;重點來了,不同設備詳情頁面可以左右滑動到下一個頁面(順序為首頁的順序,滑動效果輪播圖那樣)
天哪這一個頁面得寫多少代碼啊啊啊...,后臺接口只有獲取設備列表和根據(jù)設備id獲取詳情數(shù)據(jù),且格式由于是轉發(fā)不能修改
額,只能一點點寫了,
1、直接把官方的
組件拿過來開擼,為了減少請求直接把首頁請求的設備列表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值就是第幾個設備,并且把當
組件的當前頁頁設置為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()
相關案例查看更多
相關閱讀
- 出入小程序
- 汽車拆解管理軟件
- 怎么做網(wǎng)站
- 網(wǎng)站建設高手
- 云南做網(wǎng)站
- 報廢車回收管理系統(tǒng)
- 定制小程序開發(fā)
- 南通小程序制作公司
- 云南網(wǎng)站建設哪家強
- 報廢車回收管理軟件
- 網(wǎng)站建設制作
- 軟件定制
- 網(wǎng)站建設方案 doc
- 云南小程序開發(fā)制作
- 昆明小程序哪家好
- python開發(fā)小程序
- 云南網(wǎng)站建設公司
- 報廢車拆解管理系統(tǒng)
- 云南網(wǎng)站建設快速優(yōu)化
- 網(wǎng)站建設首頁
- 汽車拆解系統(tǒng)
- 文山小程序開發(fā)
- 昆明小程序代建
- 河南小程序制作
- 汽車回收管理
- 云南軟件開發(fā)
- 分銷系統(tǒng)
- 前端
- 網(wǎng)站搭建
- 保險網(wǎng)站建設公司