您好,登錄后才能下訂單哦!
這篇文章主要講解了“微信小程序中怎么使用WebSocket實(shí)現(xiàn)長連接”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“微信小程序中怎么使用WebSocket實(shí)現(xiàn)長連接”吧!
數(shù)據(jù)請(qǐng)求: flyio.js- 同時(shí)支持瀏覽器、小程序、Node、Weex的基于Promise的跨平臺(tái)http請(qǐng)求庫??梢宰屇诙鄠€(gè)端上盡可能大限度的實(shí)現(xiàn)代碼復(fù)用
css預(yù)編譯器: stylus-基于Node.js的CSS的預(yù)處理框架
數(shù)據(jù)來源:EasyMock-為測試提供模擬數(shù)據(jù)
整體框架: mpvue
地圖:騰訊地圖api
1、git clone
2、安裝啟動(dòng)
# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report
3、小程序開發(fā)工具指向下面的dist目錄
在寫美團(tuán)外賣小程序時(shí),我跟大家一樣步履蹣跚。總會(huì)遇到各種各樣的問題以及徘徊在vue寫法和mpvue寫法中間不能自拔。mpvue剛出不久,有效的資源真的甚少,沒有一套基本項(xiàng)目流程的介紹。所以我便萌發(fā)了這篇文章,通過這個(gè)完整的項(xiàng)目去構(gòu)思整套mpvue開發(fā)。很多問題可能不能一一列舉,但我會(huì)把最常見最常用的地方盡我所能的去闡述。樂于分享,幫助社區(qū)。
寫項(xiàng)目最重要的便是數(shù)據(jù),有了數(shù)據(jù)整個(gè)頁面就活起來了,數(shù)據(jù)的澆灌便需要http的請(qǐng)求。微信小法度榜樣的就javascript運(yùn)行情況和瀏覽器不合,頁面的腳本邏輯是在JsCore中運(yùn)行,JsCore是一個(gè)沒有窗口對(duì)象的情況,所以不克不及裹足本中應(yīng)用window,也無法裹足本中操作組件,JsCore中也沒有XmlhttpRequest對(duì)象,所以jquery 、zepto、axios這些在小法度榜樣中都不克不及用,而此時(shí),fly便擔(dān)任了這一重任。
1、安裝flyio.js
npm install flyio
2、在util創(chuàng)建一個(gè)fly.js用于封裝
import Vue from 'vue' var Fly=require("flyio/dist/npm/wx.js") //wx.js為flyio的微信小程序入口文件 var fly=new Fly(); //創(chuàng)建fly實(shí)例 //添加攔截器 fly.interceptors.request.use((config,promise)=>{ config.headers["X-Tag"]="flyio"; //給所有請(qǐng)求添加自定義header return config; }) //配置請(qǐng)求基地址 fly.config.baseURL="https://www.easy-mock.com/mock/5aded45053796b38dd26e970/" Vue.prototype.$http=fly //將fly掛載在vue上供全局使用 export default fly
3、在根目錄的main.js下封裝一個(gè)getList方法.用到請(qǐng)求數(shù)據(jù)的頁面直接調(diào)用這個(gè)方法即可。提高代碼復(fù)用率
Vue.prototype.getList = function () { wx.showLoading({ title: '加載中', }) this.$http.get('sell#!method=get').then((res)=>{ this.restaurant = res.data.data.restaurant; //商家數(shù)據(jù) this.goods = res.data.data.goods; //商品數(shù)據(jù) this.seller = res.data.data.seller; //商家詳細(xì)數(shù)據(jù) this.ratings= res.data.data.ratings //評(píng)論數(shù)據(jù) wx.hideLoading(); }).catch((e)=>{ console.log(e) }) }
封裝好了數(shù)據(jù)的請(qǐng)求,我們的項(xiàng)目就實(shí)現(xiàn)了一大半了。接下來就是如何利用這些數(shù)據(jù)來填充我們的頁面完成交互。
接下來我將會(huì)一一介紹在mpvue中如何實(shí)現(xiàn)定位,位置搜索,上拉加載下拉刷新,物品之間的二級(jí)聯(lián)動(dòng)。讓我們打起精神,一起focus下面的知識(shí)點(diǎn)。
mpvue中定位及位置搜索跟小程序類似
官方拷貝下來的js放在utils下,這里要注意的是一定要將他的輸出更改為
export default QQMapWX;
這樣才可以在頁面中使用,這里配合微信小程序提供的 wx.getLocation()和 wx.chooseLocation()API使用。
import QQMapWX from "../../utils/map"; //導(dǎo)入剛引入的js var qqmapsdk; qqmapsdk = new QQMapWX({ key:'DHNBZ-2ZLKK-T7IJJ-AXSQW-WX5L6-A6FJZ' });
通過onPullDownRefresh和onReachBottom方法實(shí)現(xiàn)mpvue小程序下拉加載和上拉刷新
// 局部開啟下拉刷新,就在文件下的main.js
export default { config: { "enablePullDownRefresh": true, } }
onReachBottom() { let nextPage = this.page +1; //定義每一頁page,下來刷新新的一頁+1 this.page = nextPage //更新page this.$http.get('sell#!method=get').then((res)=>{ this.restaurant =[...res.data.data.restaurant,...this.restaurant]//請(qǐng)求的新數(shù)據(jù),解構(gòu)出來渲染頁面 }).catch((e)=>{ console.log(e) }) }, onPullDownRefreash(){ this.isShow = !this.isShow }
實(shí)現(xiàn)該功能的思路:
1 左到右:通過點(diǎn)擊左側(cè)滑欄的某一項(xiàng),獲取到該元素?cái)y帶的 id ,然后動(dòng)態(tài)傳給右側(cè)滑欄的 scroll-into-view ,從而實(shí)現(xiàn)右側(cè)滑欄對(duì)應(yīng)的該元素運(yùn)動(dòng)置頂。
2 右到左:通過計(jì)算整個(gè)右側(cè)滑欄滾動(dòng)上去的高度 與右側(cè)滑欄中每一個(gè)分類距頂部的距離做比對(duì),獲取到該滾動(dòng)置頂?shù)姆诸惖?index 。然后用獲取到的 index 乘以左側(cè)滑欄中某一項(xiàng)的高度,動(dòng)態(tài)賦值給左側(cè)滑欄內(nèi)的 scrollTop ,控制左側(cè)滑欄的聯(lián)動(dòng)。
注意這幾點(diǎn):
(1) 小程序 wxss 中使用 rpx,而 js 中 scrollTop 獲取到的值是 px,所以存在rpx 轉(zhuǎn) px 的問題。以 iPhone6 為基準(zhǔn),轉(zhuǎn)換公式:
// percent 為當(dāng)前設(shè)備1rpx對(duì)應(yīng)的px值 var percent = res.windowWidth / 750;
(2) 微信自帶scroll-view UI組件,通過 bindscroll="scroll" 綁定滾動(dòng)事件;通過 scroll-top="{{scrollTop}}" 動(dòng)態(tài)控制 左側(cè)滑欄的被動(dòng)滾動(dòng)。代碼就不一一貼出來,項(xiàng)目中有詳細(xì)的注釋。點(diǎn)這里查看
做完一個(gè)項(xiàng)目并不難,但做好一個(gè)項(xiàng)目卻要經(jīng)過無數(shù)次的思考。其中之一就是看文檔,所謂書讀百變,其義自現(xiàn)。的確,當(dāng)你一遍又一遍的看文檔后你會(huì)發(fā)現(xiàn)你寫起來非常的順手,用到即來。沒事可以點(diǎn)擊vue文檔多看看。
什么是組件分析?對(duì)mpvue來講,組件是構(gòu)成項(xiàng)目的基本單元。只要?jiǎng)澐趾昧私M件,項(xiàng)目寫起來那是非常的快的。為了方便理解,這里定義兩類組件:頁面組件,功能組件。頁面組件就是當(dāng)前你看見的這個(gè)網(wǎng)頁地址的完整顯示,他將包含幾個(gè)功能組件。
美團(tuán)外賣小程序功能組件很多,大致的列幾個(gè):
評(píng)分組件,需要的props的值為:星星的大小,商家的評(píng)分
購物車組件: 需要的props:selectFoods,deliveryPrice, minPrice等
公告組件:每個(gè)項(xiàng)目難免發(fā)布一些公告或者彈窗,把它抽出來當(dāng)一個(gè)組件
間距split組件: 組件可以很大很多功能,也可能很少,只要在項(xiàng)目中經(jīng)常用的就可以抽出來當(dāng)一個(gè)組件。
swiper組件: 輪播圖作為一個(gè)組件,可以減少我們一個(gè)頁面成堆的代碼,把它抽出來當(dāng)一個(gè)組件,日后也更易維護(hù)。
一、 組件間可以通過props傳遞數(shù)據(jù),這里以選物品 -> 選擇組件 -> 購物車 -> 訂單詳情一條線來詳細(xì)描述組件間數(shù)據(jù)怎么傳遞的。
props: { food: { //接受一個(gè)food,代表選擇的是哪個(gè)商品 type: Object, } }, addCart(event) { if(!this.food.count){ this.$set(this.food, 'count', 1) //點(diǎn)擊事件傳遞給父組件 this.food.count = 1; }else{ this.food.count++ // 商品++ } },
1 選擇組件
2 購物車
通過props接受一個(gè)selectFood,這里把它放入小程序的本地中提供給訂單頁面 try { wx.setStorageSync('selectFoods', this.selectFoods) } catch (e) { console.log(e) }
3 訂單頁面
try { var value = wx.getStorageSync('selectFoods') //拿到存儲(chǔ)的數(shù)據(jù),使用同步的概念 if (value) { this.isShow = false; // 判斷訂單也是否有數(shù)據(jù),沒有數(shù)據(jù)則用v-show引用一個(gè)組件去渲染頁面 this.orderList=value; //數(shù)據(jù)渲染頁面 } } catch (e) { console.log(e) };
二、父子組件間方法的調(diào)用可以通過$on, $emit
var Event = new Vue();//相當(dāng)于又new了一個(gè)vue實(shí)例,Event中含有vue的全部方法 Event.$emit('msg',this.msg);//發(fā)送數(shù)據(jù),第一個(gè)參數(shù)是發(fā)送數(shù)據(jù)的名稱,接收時(shí)還用這個(gè)名字接收,第二個(gè)參數(shù)是這個(gè)數(shù)據(jù)現(xiàn)在的位置 Event.$on('msg',function(msg){//接收數(shù)據(jù),第一個(gè)參數(shù)是數(shù)據(jù)的名字,與發(fā)送時(shí)的名字對(duì)應(yīng),第二個(gè)參數(shù)是一個(gè)方法, 要對(duì)數(shù)據(jù)的操})
感謝各位的閱讀,以上就是“微信小程序中怎么使用WebSocket實(shí)現(xiàn)長連接”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對(duì)微信小程序中怎么使用WebSocket實(shí)現(xiàn)長連接這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。