微信小程序中如何使用WebSocket實現(xiàn)長連接(含完整源碼)
項目使用的技術(shù)棧
- 數(shù)據(jù)請求: flyio.js- 同時支持瀏覽器、小程序、Node、Weex的基于Promise的跨平臺http請求庫。可以讓您在多個端上盡可能大限度的實現(xiàn)代碼復用
- css預編譯器: stylus-基于Node.js的CSS的預處理框架
- 數(shù)據(jù)來源:EasyMock-為測試提供模擬數(shù)據(jù)
- 整體框架: mpvue
- 地圖:騰訊地圖api
下載啟動步驟
- 1、git clone https://github.com/WsmDyj/mpvue.git
- 2、安裝啟動
# 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目錄
mpvue與小程序擦出的火花(采坑之旅)
在寫美團外賣小程序時,我跟大家一樣步履蹣跚??倳龅礁鞣N各樣的問題以及徘徊在vue寫法和mpvue寫法中間不能自拔。mpvue剛出不久,有效的資源真的甚少,沒有一套基本項目流程的介紹。所以我便萌發(fā)了這篇文章,通過這個完整的項目去構(gòu)思整套mpvue開發(fā)。很多問題可能不能一一列舉,但我會把最常見最常用的地方盡我所能的去闡述。樂于分享,幫助社區(qū)。
一、mpvue中數(shù)據(jù)請求的封裝
寫項目最重要的便是數(shù)據(jù),有了數(shù)據(jù)整個頁面就活起來了,數(shù)據(jù)的澆灌便需要http的請求。微信小法度榜樣的就javascript運行情況和瀏覽器不合,頁面的腳本邏輯是在JsCore中運行,JsCore是一個沒有窗口對象的情況,所以不克不及裹足本中應用window,也無法裹足本中操作組件,JsCore中也沒有XmlhttpRequest對象,所以jquery 、zepto、axios這些在小法度榜樣中都不克不及用,而此時,fly便擔任了這一重任。
- 1、安裝flyio.js
npm install flyio
- 2、在util創(chuàng)建一個fly.js用于封裝
import Vue from 'vue' var Fly=require("flyio/dist/npm/wx.js") //wx.js為flyio的微信小程序入口文件 var fly=new Fly(); //創(chuàng)建fly實例 //添加攔截器 fly.interceptors.request.use((config,promise)=>{ config.headers["X-Tag"]="flyio"; //給所有請求添加自定義header return config; }) //配置請求基地址 fly.config.baseURL="https://www.easy-mock.com/mock/5aded45053796b38dd26e970/" Vue.prototype.$http=fly //將fly掛載在vue上供全局使用 export default fly
-
3、在根目錄的main.js下封裝一個getList方法.用到請求數(shù)據(jù)的頁面直接調(diào)用這個方法即可。提高代碼復用率
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; //商家詳細數(shù)據(jù) this.ratings= res.data.data.ratings //評論數(shù)據(jù) wx.hideLoading(); }).catch((e)=>{ console.log(e) }) }
封裝好了數(shù)據(jù)的請求,我們的項目就實現(xiàn)了一大半了。接下來就是如何利用這些數(shù)據(jù)來填充我們的頁面完成交互。
二、mpvue實用功能的詳解
接下來我將會一一介紹在mpvue中如何實現(xiàn)定位,位置搜索,上拉加載下拉刷新,物品之間的二級聯(lián)動。讓我們打起精神,一起focus下面的知識點。
mpvue定位及位置搜索
mpvue中定位及位置搜索跟小程序類似
官方拷貝下來的js放在utils下,這里要注意的是一定要將他的輸出更改為
export default QQMapWX;
這樣才可以在頁面中使用,這里配合微信小程序提供的 wx.getLocation()和 wx.chooseLocation()API使用。
import QQMapWX from "../../utils/map"; //導入剛引入的js var qqmapsdk; qqmapsdk = new QQMapWX({ key:'DHNBZ-2ZLKK-T7IJJ-AXSQW-WX5L6-A6FJZ' });
mpvue上拉加載下拉刷新
通過onPullDownRefresh和onReachBottom方法實現(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]//請求的新數(shù)據(jù),解構(gòu)出來渲染頁面 }).catch((e)=>{ console.log(e) }) }, onPullDownRefreash(){ this.isShow = !this.isShow }
mpvue中實現(xiàn)二級聯(lián)動
實現(xiàn)該功能的思路:
- 1 左到右:通過點擊左側(cè)滑欄的某一項,獲取到該元素攜帶的 id ,然后動態(tài)傳給右側(cè)滑欄的 scroll-into-view ,從而實現(xiàn)右側(cè)滑欄對應的該元素運動置頂。
- 2 右到左:通過計算整個右側(cè)滑欄滾動上去的高度 與右側(cè)滑欄中每一個分類距頂部的距離做比對,獲取到該滾動置頂?shù)姆诸惖?index 。然后用獲取到的 index 乘以左側(cè)滑欄中某一項的高度,動態(tài)賦值給左側(cè)滑欄內(nèi)的 scrollTop ,控制左側(cè)滑欄的聯(lián)動。
注意這幾點:
(1) 小程序 wxss 中使用 rpx,而 js 中 scrollTop 獲取到的值是 px,所以存在rpx 轉(zhuǎn) px 的問題。以 iPhone6 為基準,轉(zhuǎn)換公式:
// percent 為當前設(shè)備1rpx對應的px值 var percent = res.windowWidth / 750;
(2) 微信自帶scroll-view UI組件,通過 bindscroll="scroll" 綁定滾動事件;通過 scroll-top="{{scrollTop}}" 動態(tài)控制 左側(cè)滑欄的被動滾動。代碼就不一一貼出來,項目中有詳細的注釋。點這里查看
三、mpvue組件分析,組件通信
做完一個項目并不難,但做好一個項目卻要經(jīng)過無數(shù)次的思考。其中之一就是看文檔,所謂書讀百變,其義自現(xiàn)。的確,當你一遍又一遍的看文檔后你會發(fā)現(xiàn)你寫起來非常的順手,用到即來。沒事可以點擊vue文檔多看看。
組件分析
什么是組件分析?對mpvue來講,組件是構(gòu)成項目的基本單元。只要劃分好了組件,項目寫起來那是非常的快的。為了方便理解,這里定義兩類組件:頁面組件,功能組件。頁面組件就是當前你看見的這個網(wǎng)頁地址的完整顯示,他將包含幾個功能組件。
美團外賣小程序功能組件很多,大致的列幾個:
- 評分組件,需要的props的值為:星星的大小,商家的評分
- 購物車組件: 需要的props:selectFoods,deliveryPrice, minPrice等
- 公告組件:每個項目難免發(fā)布一些公告或者彈窗,把它抽出來當一個組件
- 間距split組件: 組件可以很大很多功能,也可能很少,只要在項目中經(jīng)常用的就可以抽出來當一個組件。
- swiper組件: 輪播圖作為一個組件,可以減少我們一個頁面成堆的代碼,把它抽出來當一個組件,日后也更易維護。
組件通信
一、 組件間可以通過props傳遞數(shù)據(jù),這里以選物品 -> 選擇組件 -> 購物車 -> 訂單詳情一條線來詳細描述組件間數(shù)據(jù)怎么傳遞的。
-
- 1 選擇組件
props: { food: { //接受一個food,代表選擇的是哪個商品 type: Object, } }, addCart(event) { if(!this.food.count){ this.$set(this.food, 'count', 1) //點擊事件傳遞給父組件 this.food.count = 1; }else{ this.food.count++ // 商品++ } },
- 2 購物車
通過props接受一個selectFood,這里把它放入小程序的本地中提供給訂單頁面 try { wx.setStorageSync('selectFoods', this.selectFoods) } catch (e) { console.log(e) }
- 3 訂單頁面
try { var value = wx.getStorageSync('selectFoods') //拿到存儲的數(shù)據(jù),使用同步的概念 if (value) { this.isShow = false; // 判斷訂單也是否有數(shù)據(jù),沒有數(shù)據(jù)則用v-show引用一個組件去渲染頁面 this.orderList=value; //數(shù)據(jù)渲染頁面 } } catch (e) { console.log(e) };
二、父子組件間方法的調(diào)用可以通過$on, $emit
var Event = new Vue();//相當于又new了一個vue實例,Event中含有vue的全部方法 Event.$emit('msg',this.msg);//發(fā)送數(shù)據(jù),第一個參數(shù)是發(fā)送數(shù)據(jù)的名稱,接收時還用這個名字接收,第二個參數(shù)是這個數(shù)據(jù)現(xiàn)在的位置 Event.$on('msg',function(msg){//接收數(shù)據(jù),第一個參數(shù)是數(shù)據(jù)的名字,與發(fā)送時的名字對應,第二個參數(shù)是一個方法, 要對數(shù)據(jù)的操})
---