小程序模板網(wǎng)

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

發(fā)布時(shí)間:2018-06-26 12:12 所屬欄目:小程序開發(fā)教程


每次寫文章時(shí),總會(huì)感慨萬千。面對(duì)成功,我們總是抱以較高的期望,總想急不可耐就能得到勝利的果實(shí)??擅恳淮纬晒Σ豢赡茌p而易舉的就來到我們的面前。幾乎每一次都需要我們付出極大的耐心和勤奮,甚至于近乎偏執(zhí)狂般的傻傻堅(jiān)持。自打小程序推出以來,我便開始轉(zhuǎn)入這個(gè)市場(chǎng)。并不是因?yàn)樗臒岫榷且环N學(xué)習(xí)興趣吧,總想著去探索下新知識(shí)。也正是有了這種動(dòng)力,才能讓我一直堅(jiān)持下來。距我上一篇文章
《滴滴一夏,小程序?qū)\噥砹恕钒l(fā)表至今,已有半月之久。之間結(jié)識(shí)了好多好朋友。他們樂觀開朗,詼諧。以自己最樸實(shí)的熱忱對(duì)待他人。他們?yōu)槲业恼髀?lián)不吝惜筆墨添彩,給我鼓勵(lì)和修正。同時(shí)也感謝黃軼老師給我的面試機(jī)會(huì)還有慕課上的精彩課程?;貧w正題,今天給大家?guī)淼氖敲缊F(tuán)外賣微信小程序,基于mpvue開發(fā)。因?yàn)閙pvue推出至今也才短短3個(gè)月,所有我會(huì)詳細(xì)的講解每一個(gè)細(xì)節(jié),希望幫到在mpvue上步履艱難的你。

前言

學(xué)習(xí)就好比是座大山,人們沿著不同的路登山,分享著自己看到的風(fēng)景。你不一定能看到別人看到的風(fēng)景,體會(huì)到別人的心情。只有自己去登山,才能看到不一樣的風(fēng)景,體會(huì)更加深刻。因此建議還是一定要去實(shí)踐一波。

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

下載啟動(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目錄

效果圖

即使在優(yōu)美的語言描述,還是也抵不過圖片來的實(shí)際。一起欣賞下美團(tuán)外賣吧!

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

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

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

寫項(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ù)來填充我們的頁面完成交互。

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

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

mpvue定位及位置搜索

mpvue中定位及位置搜索跟小程序類似,大家可以先看看我上篇文章,那里又詳細(xì)的地址解析,逆地址解析,關(guān)鍵詞搜索等。


官方拷貝下來的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'
    });

mpvue上拉加載下拉刷新

通過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 
}

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

實(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)這里查看

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

做完一個(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è):

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

組件通信

一、 組件間可以通過props傳遞數(shù)據(jù),這里以選物品 -> 選擇組件 -> 購物車 -> 訂單詳情一條線來詳細(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 購物車
通過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ù)的操})

---
 

寄語

很多東西想聊出來,比如mpvue小程序中引用圖片一定要放在static文件目錄下,組件的屬性計(jì)算computed。以及vuex在全局?jǐn)?shù)據(jù)的使用等等。但是一個(gè)人的精力真的有限,本人也是一個(gè)大三的學(xué)生,最近忙于找實(shí)習(xí)公司,同時(shí)也在研究下vue底層源碼分析。所有可能到這里差不多就結(jié)束了。對(duì)其中一些內(nèi)容比較喜歡的可以去我的github上下載,慢慢研究。這里附上我項(xiàng)目的地址mpvue美團(tuán)外賣小程序。也希望有志同道和的可以加入一起討論,如果有什么不懂得可以直接評(píng)論我,或者發(fā)我qq:972774037我也會(huì)第一時(shí)間幫你解答。也希望通過這個(gè)為我找實(shí)習(xí)增添色彩吧,下期將推出更加精彩的vue項(xiàng)目,持續(xù)關(guān)注我吧?。?!



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24596.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢