微信小程序中如何使用WebSocket實(shí)現(xiàn)長(zhǎng)連接(含完整源碼)

項(xiàng)目使用的技術(shù)棧

• 數(shù)據(jù)請(qǐng)求: flyio.js- 同時(shí)支持瀏覽器、小程序、Node、Weex的基于Promise的跨平臺(tái)http請(qǐng)求庫(kù)?？梢宰屇诙鄠€(gè)端上盡可能大限度的實(shí)現(xiàn)代碼復(fù)用
• css預(yù)編譯器: stylus-基于Node.js的CSS的預(yù)處理框架
• 數(shù)據(jù)來(lái)源:EasyMock-為測(cè)試提供模擬數(shù)據(jù)
• 整體框架: mpvue
• 地圖:騰訊地圖api

下載啟動(dòng)步驟

• 1、git clone https://github.com/WsmDyj/mpvue.git
• 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目錄

mpvue與小程序擦出的火花(采坑之旅)

在寫美團(tuán)外賣小程序時(shí)，我跟大家一樣步履蹣跚?？倳?huì)遇到各種各樣的問題以及徘徊在vue寫法和mpvue寫法中間不能自拔。mpvue剛出不久，有效的資源真的甚少，沒有一套基本項(xiàng)目流程的介紹。所以我便萌發(fā)了這篇文章，通過(guò)這個(gè)完整的項(xiàng)目去構(gòu)思整套mpvue開發(fā)。很多問題可能不能一一列舉，但我會(huì)把最常見最常用的地方盡我所能的去闡述。樂于分享，幫助社區(qū)。

一、mpvue中數(shù)據(jù)請(qǐng)求的封裝

寫項(xiàng)目最重要的便是數(shù)據(jù)，有了數(shù)據(jù)整個(gè)頁(yè)面就活起來(lái)了，數(shù)據(jù)的澆灌便需要http的請(qǐng)求。微信小法度榜樣的就javascript運(yùn)行情況和瀏覽器不合，頁(yè)面的腳本邏輯是在JsCore中運(yùn)行，JsCore是一個(gè)沒有窗口對(duì)象的情況，所以不克不及裹足本中應(yīng)用window，也無(wú)法裹足本中操作組件，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ù)的頁(yè)面直接調(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)了一大半了。接下來(lái)就是如何利用這些數(shù)據(jù)來(lái)填充我們的頁(yè)面完成交互。

二、mpvue實(shí)用功能的詳解

接下來(lái)我將會(huì)一一介紹在mpvue中如何實(shí)現(xiàn)定位，位置搜索，上拉加載下拉刷新，物品之間的二級(jí)聯(lián)動(dòng)。讓我們打起精神，一起focus下面的知識(shí)點(diǎn)。

mpvue定位及位置搜索

mpvue中定位及位置搜索跟小程序類似

官方拷貝下來(lái)的js放在utils下,這里要注意的是一定要將他的輸出更改為

export default QQMapWX;

這樣才可以在頁(yè)面中使用，這里配合微信小程序提供的 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'
    });

mpvue上拉加載下拉刷新

通過(guò)onPullDownRefresh和onReachBottom方法實(shí)現(xiàn)mpvue小程序下拉加載和上拉刷新

// 局部開啟下拉刷新,就在文件下的main.js

export default {
  config: {
    "enablePullDownRefresh": true,
  }
}

 onReachBottom() {
        let nextPage = this.page +1; //定義每一頁(yè)page，下來(lái)刷新新的一頁(yè)+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)出來(lái)渲染頁(yè)面
        }).catch((e)=>{
        console.log(e)
        })
    },
onPullDownRefreash(){
  this.isShow = !this.isShow 
}

mpvue中實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)

實(shí)現(xiàn)該功能的思路：

• 1 左到右:通過(guò)點(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 右到左:通過(guò)計(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組件，通過(guò) bindscroll="scroll" 綁定滾動(dòng)事件；通過(guò) scroll-top="{{scrollTop}}" 動(dòng)態(tài)控制 左側(cè)滑欄的被動(dòng)滾動(dòng)。代碼就不一一貼出來(lái),項(xiàng)目中有詳細(xì)的注釋。點(diǎn)這里查看

三、mpvue組件分析，組件通信

做完一個(gè)項(xiàng)目并不難，但做好一個(gè)項(xiàng)目卻要經(jīng)過(guò)無(wú)數(shù)次的思考。其中之一就是看文檔，所謂書讀百變，其義自現(xiàn)。的確，當(dāng)你一遍又一遍的看文檔后你會(huì)發(fā)現(xiàn)你寫起來(lái)非常的順手，用到即來(lái)。沒事可以點(diǎn)擊vue文檔多看看。

組件分析

什么是組件分析？對(duì)mpvue來(lái)講，組件是構(gòu)成項(xiàng)目的基本單元。只要?jiǎng)澐趾昧私M件，項(xiàng)目寫起來(lái)那是非常的快的。為了方便理解，這里定義兩類組件：頁(yè)面組件，功能組件。頁(yè)面組件就是當(dāng)前你看見的這個(gè)網(wǎng)頁(yè)地址的完整顯示，他將包含幾個(gè)功能組件。
美團(tuán)外賣小程序功能組件很多，大致的列幾個(gè):

1. 評(píng)分組件，需要的props的值為：星星的大小，商家的評(píng)分
2. 購(gòu)物車組件： 需要的props：selectFoods，deliveryPrice， minPrice等
3. 公告組件：每個(gè)項(xiàng)目難免發(fā)布一些公告或者彈窗，把它抽出來(lái)當(dāng)一個(gè)組件
4. 間距split組件： 組件可以很大很多功能，也可能很少，只要在項(xiàng)目中經(jīng)常用的就可以抽出來(lái)當(dāng)一個(gè)組件。
5. swiper組件： 輪播圖作為一個(gè)組件，可以減少我們一個(gè)頁(yè)面成堆的代碼，把它抽出來(lái)當(dāng)一個(gè)組件，日后也更易維護(hù)。

組件通信

一、 組件間可以通過(guò)props傳遞數(shù)據(jù),這里以選物品 -> 選擇組件 -> 購(gòu)物車 -> 訂單詳情一條線來(lái)詳細(xì)描述組件間數(shù)據(jù)怎么傳遞的。

• • 1 選擇組件

  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++  // 商品++
        }
    },

• 2 購(gòu)物車

通過(guò)props接受一個(gè)selectFood，這里把它放入小程序的本地中提供給訂單頁(yè)面
 try {
            wx.setStorageSync('selectFoods', this.selectFoods)
        } catch (e) {   
            console.log(e) 
        }

• 3 訂單頁(yè)面

 try {
    var value = wx.getStorageSync('selectFoods') //拿到存儲(chǔ)的數(shù)據(jù)，使用同步的概念
    if (value) {
      this.isShow = false; // 判斷訂單也是否有數(shù)據(jù)，沒有數(shù)據(jù)則用v-show引用一個(gè)組件去渲染頁(yè)面
      this.orderList=value; //數(shù)據(jù)渲染頁(yè)面
    }
  } catch (e) {
    console.log(e)
  };

二、父子組件間方法的調(diào)用可以通過(guò)$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ù)的操})

---