如何使用WebSocket实现微信小程序中的长连接（包括完整源代码）

项目使用的技术栈数据请求: flyio.js- 同时支持浏览器、小程序、Node、Weex的基于Promise的跨平台http请求库。可以让您在多个端上尽可能大限度的实现代码复用css预编译器: stylus-基于Node.js的CSS的预处理框架数据来源:EasyMock-为测试提供模拟数据整体框架: mpvue地图:腾讯地图api

下载汇海步骤1、git clone https://github.com/WsmDyj/mpvue.git2、安装汇海# 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 --report3、小程序开发工具指向下面的dist目录

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

当我写美国团体外卖小程序时，我走的路和每个人一样。总是有各种各样的问题，你不能在vue和mpvue之间自拔。 Mpvue刚刚问世，实际上很少有有效的资源，并且没有介绍基本的项目流程。所以我发布了这篇文章并使用这个完整的项目来构思整个mpvue开发。许多问题可能没有逐一列出，但我将尽我所能解释最常见和最常见的地方。乐于分享和帮助社区。

一、mpvue中数据请求的封装

编写项目最重要的是数据。使用这些数据，整个页面将处于活动状态，数据将需要为http。 微信关于javascript运行情况和浏览器的小程序示例不一样，页面脚本逻辑在JsCore中运行，JsCore是一个没有window对象的情况，所以无法覆盖应用程序窗口，不能包装在这个操作组件中，JsCore也没有XmlhttpRequest对象，所以jquery，zepto，axios不能用在小规模的例子中，而此时，fly已经完成了这项重要任务。

1.安装flyio.jsnpm install flyio2，在util中创建一个fly.js，从'vue'封装导入Vue var Fly=require（'flyio/dist/npm/wx.js'）//wx.js是flyio 微信小程序 entry file var fly=new Fly（）; //创建fly实例//添加拦截器fly.interceptors.request.use（（config，promise）=＆gt; {config.headers ['X-Tag']='Flyio'; //为所有人添加自定义标头返回配置请求;}）//配置请求基地址fly.config.baseURL='https://www.easy-mock.com/mock/5aded45053796b38dd26e970/'Vue.prototype.$http=fly //在vue上挂载以获取全局使用导出默认值飞

3.将getList方法封装在根目录的main.js中。可以通过请求数据的页面直接调用此方法。提高代码重用率

Vue.prototype.getList=function（）{wx.showLoading（{title:'Loading in，}} this。$ http.get（'sell＃！method=get'）。then（（res）=＆gt; {This .restaurant=res.data.data.restaurant; //商业数据this.goods=res.data.data.goods; //产品数据this.seller=res.data.data.seller; //商业详情数据。 rating=res.data.data.ratings //评论数据wx.hideLoading（）;}）。catch（（e）=＆gt; {console.log（e）}）}

随着数据的打包，我们的项目已经实现了一半以上。下一步是如何使用此数据填充页面以完成交互。

二、mpvue实用功能的详解

接下来，我将介绍如何实现定位，位置搜索，上拉负载下拉刷新以及mpvue中项之间的二级链接。让我们站起来，专注于下面的知识点。

Mpvue位置和位置搜索

mpvue中的定位和位置搜索类似于小程序

正式复制的js放在utils下。这里需要注意的重要一点是你必须将输出更改为

导出默认QQMapWX;

这可以在页面中使用，这里使用微信小程序提供的wx.getLocation（）和wx.chooseLocation（）API。

从'././utils/map'导入QQMapWX; //导入新引入的js var qqmapsdk; qqmapsdk=新的QQMapWX（{key:'DHNBZ-2ZLKK-T7IJJ-AXSQW-WX5L6-A6FJZ'}）; mpvue上拉负载下拉刷新

通过onPullDownRefresh和onReachBottom方法实现mpvue小程序下拉加载和上拉刷新

//部分打开下拉刷新，位于main.js文件

下 导出默认值{config: {'enablePullDownRefresh': true，}} onReachBottom（）{let nextPage=this.page +1; //定义每个页面，刷新新页面+1 this.page=nextPage //更新页面。$ http.get（'sell＃！method=get'）。then（（res）=＆gt; {this.restaurant=[. res.data.data.restaurant， this.restaurant] //请求新数据，解构以呈现页面}）。catch（（e）=> {console.log（e）}） }，onPullDownRefreash（）{this.isShow=！this.isShow} mpvue实现辅助链接

实现此功能的想法：

1从左到右:通过单击左滑块中的项目，获取元素携带的id，然后动态传输到右滑块的滚动视图，从而实现与右滑块对应的元素移动。配料。 2从右到左:通过将整个右滑块滚动的高度与右滑块中每个排序条顶部的距离进行比较，可以获得滚动顶部类别的索引。然后将获得的索引乘以左滑块中项目的高度，并将其动态分配给左滑块中的scrollTop以控制左滑块的链接。

请注意以下几点：

（1）小程序在wxss中使用rpx，而js中scrollTop获得的值是px，因此rpx到px存在问题。转换基于iPhone6的公式：

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

（2）微信附带滚动视图UI组件，通过bindscroll='scroll'绑定滚动事件;通过scroll-top='{{scrollTop}}'动态控制左滑块的被动滚动。代码不是逐个发布的，项目中有详细的注释。点击此处查看

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

完成一个项目并不困难，但做一个项目必须经过无数次的思考。其中之一是看文件，即所谓的图书阅读改变，其含义不言而喻。实际上，当你一遍又一遍地看文档时，你会发现你非常方便并且使用它。没有什么可以点击vue文档来查看更多信息。

成分分析

什么是成分分析？对于mpvue，组件是组成项目的基本单元。只要组件被划分，项目写入速度就非常快。为了便于理解，这里定义了两种类型的组件：页面组件，功能组件。页面组件是您看到的当前Web地址的完整显示，它将包含多个功能组件。美国集团外卖小程序具有很多组件，大致列出了几个:

评分组件，道具所需的价值：明星的大小，商家购物车组件的评级：所需的道具：selectFoods，deliveryPrice，minPrice和其他公告组件：每个项目都不可避免地发布一些公告或弹出窗口，绘制它当组件间距拆分组件时：组件可以或多或少地起作用，只要它经常在项目中用于将其作为组件提取。 Swiper组件：作为一个组件，轮播可以减少我们在页面上的代码量，将其作为一个组件绘制出来，并在将来更容易维护。组件通信

首先，组件可以通过道具数据传递，这里选择项目 - >选择组件 - >购物车 - >订单详细说明一行，详细说明如何传递组件之间的数据。

1选择组件道具: {food: {//接受表示选择了哪个项目的食物类型:对象，}}，addCart（event）{if（！this.food.count）{this。$ set（this。食物，'count'，1）//点击事件传递给父组件this.food.count=1; } else {this.food.count ++ //merchandise ++}}，2购物车通过道具接受selectFood，这里把它放在本地小程序并提供给订单页面试试{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（）; //相当于一个新的vue实例，Event包含vue Event的所有方法。$ emit（'msg'，this.msg）; //发送数据，第一个参数是发送的数据，在收到时也会以此名称收到。第二个参数是数据的当前位置。 Event。$ on（'msg'，function（msg）{//接收数据，第一个参数是数据的名称。对应于发送时的名称，第二个参数是操作数据的方法} ）

---

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。