Shulou(Shulou.com)06/01 Report--

这篇文章主要讲解了"微信小程序中怎么使用WebSocket实现长连接"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"微信小程序中怎么使用WebSocket实现长连接"吧!

项目使用的技术栈

数据请求: flyio.js- 同时支持浏览器、小程序、Node、Weex的基于Promise的跨平台http请求库。可以让您在多个端上尽可能大限度的实现代码复用

css预编译器: stylus-基于Node.js的CSS的预处理框架

数据来源:EasyMock-为测试提供模拟数据

整体框架: mpvue

地图:腾讯地图api

下载启动步骤

1、git clone

2、安装启动

# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for production and view the bundle analyzer reportnpm run build --report

3、小程序开发工具指向下面的dist目录

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

在写美团外卖小程序时，我跟大家一样步履蹒跚。总会遇到各种各样的问题以及徘徊在vue写法和mpvue写法中间不能自拔。mpvue刚出不久，有效的资源真的甚少，没有一套基本项目流程的介绍。所以我便萌发了这篇文章，通过这个完整的项目去构思整套mpvue开发。很多问题可能不能一一列举，但我会把最常见最常用的地方尽我所能的去阐述。乐于分享，帮助社区。

一、mpvue中数据请求的封装

写项目最重要的便是数据，有了数据整个页面就活起来了，数据的浇灌便需要http的请求。微信小法度榜样的就javascript运行情况和浏览器不合，页面的脚本逻辑是在JsCore中运行，JsCore是一个没有窗口对象的情况，所以不克不及裹足本中应用window，也无法裹足本中操作组件，JsCore中也没有XmlhttpRequest对象，所以jquery 、zepto、axios这些在小法度榜样中都不克不及用，而此时，fly便担任了这一重任。

1、安装flyio.js

npm install flyio

2、在util创建一个fly.js用于封装

import Vue from 'vue' var Fly=require("flyio/dist/npm/wx.js") //wx.js为flyio的微信小程序入口文件var fly=new Fly(); //创建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方法.用到请求数据的页面直接调用这个方法即可。提高代码复用率

Vue.prototype.getList = function () { wx.showLoading({ title: '加载中', }) this.$http.get('sell#!method=get').then((res)=>{ this.restaurant = res.data.data.restaurant; //商家数据 this.goods = res.data.data.goods; //商品数据 this.seller = res.data.data.seller; //商家详细数据 this.ratings= res.data.data.ratings //评论数据 wx.hideLoading(); }).catch((e)=>{ console.log(e) })}

封装好了数据的请求，我们的项目就实现了一大半了。接下来就是如何利用这些数据来填充我们的页面完成交互。

二、mpvue实用功能的详解

接下来我将会一一介绍在mpvue中如何实现定位，位置搜索，上拉加载下拉刷新，物品之间的二级联动。让我们打起精神，一起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方法实现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]//请求的新数据，解构出来渲染页面 }).catch((e)=>{ console.log(e) }) },onPullDownRefreash(){ this.isShow = !this.isShow }mpvue中实现二级联动

实现该功能的思路：

1 左到右:通过点击左侧滑栏的某一项，获取到该元素携带的 id ，然后动态传给右侧滑栏的 scroll-into-view ，从而实现右侧滑栏对应的该元素运动置顶。

2 右到左:通过计算整个右侧滑栏滚动上去的高度 与右侧滑栏中每一个分类距顶部的距离做比对，获取到该滚动置顶的分类的 index 。然后用获取到的 index 乘以左侧滑栏中某一项的高度，动态赋值给左侧滑栏内的 scrollTop ，控制左侧滑栏的联动。

注意这几点：

(1) 小程序 wxss 中使用 rpx，而 js 中 scrollTop 获取到的值是 px，所以存在rpx 转 px 的问题。以 iPhone6 为基准，转换公式：

// percent 为当前设备1rpx对应的px值var percent = res.windowWidth / 750;

(2) 微信自带scroll-view UI组件，通过 bindscroll="scroll" 绑定滚动事件;通过 scroll-top="{{scrollTop}}" 动态控制 左侧滑栏的被动滚动。代码就不一一贴出来,项目中有详细的注释。点这里查看

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

做完一个项目并不难，但做好一个项目却要经过无数次的思考。其中之一就是看文档，所谓书读百变，其义自现。的确，当你一遍又一遍的看文档后你会发现你写起来非常的顺手，用到即来。没事可以点击vue文档多看看。

组件分析

什么是组件分析？对mpvue来讲，组件是构成项目的基本单元。只要划分好了组件，项目写起来那是非常的快的。为了方便理解，这里定义两类组件：页面组件，功能组件。页面组件就是当前你看见的这个网页地址的完整显示，他将包含几个功能组件。美团外卖小程序功能组件很多，大致的列几个:

评分组件，需要的props的值为：星星的大小，商家的评分

购物车组件： 需要的props：selectFoods，deliveryPrice， minPrice等

公告组件：每个项目难免发布一些公告或者弹窗，把它抽出来当一个组件

间距split组件： 组件可以很大很多功能，也可能很少，只要在项目中经常用的就可以抽出来当一个组件。

swiper组件： 轮播图作为一个组件，可以减少我们一个页面成堆的代码，把它抽出来当一个组件，日后也更易维护。

组件通信

一、 组件间可以通过props传递数据,这里以选物品 -> 选择组件 -> 购物车 -> 订单详情一条线来详细描述组件间数据怎么传递的。

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

1 选择组件

2 购物车

通过props接受一个selectFood，这里把它放入小程序的本地中提供给订单页面 try { wx.setStorageSync('selectFoods', this.selectFoods) } catch (e) { console.log(e) }

3 订单页面

try { var value = wx.getStorageSync('selectFoods') //拿到存储的数据，使用同步的概念 if (value) { this.isShow = false; // 判断订单也是否有数据，没有数据则用v-show引用一个组件去渲染页面 this.orderList=value; //数据渲染页面 } } catch (e) { console.log(e) };

二、父子组件间方法的调用可以通过$on, $emit

var Event = new Vue();//相当于又new了一个vue实例，Event中含有vue的全部方法Event.$emit('msg',this.msg);//发送数据，第一个参数是发送数据的名称，接收时还用这个名字接收，第二个参数是这个数据现在的位置Event.$on('msg',function(msg){//接收数据，第一个参数是数据的名字，与发送时的名字对应，第二个参数是一个方法，要对数据的操})感谢各位的阅读，以上就是"微信小程序中怎么使用WebSocket实现长连接"的内容了，经过本文的学习后，相信大家对微信小程序中怎么使用WebSocket实现长连接这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.