背景最近做了一个微信小程序的即时通讯功能，之前我也做过node.js的websocket服务，不过是在web端应用的socket.io服务。小程序本身对http、websocket等连接均有诸多限制，所以这次项目选择了node.js自带的ws模块。服务端初始化一个node.js项目，引入ws模块const webSocket = require(ws);创建websocket实例，并设置监听端口const wss = new webSocket.Server({port: 3001 });定义wss实例方法，实现socket监听和信息发布。下面贴上简...
mpvue使用# 全局安装 vue-cli $ npm install --global vue-cli# 创建一个基于 mpvue-quickstart 模板的新项目 $ vue init mpvue/mpvue-quickstart my-project# 安装依赖 $ cd my-project $ npm install # 启动构建 $ npm run dev vant使用yarn add vant# 将node_modules下的vant-weapp下的dist目录复制到static下的vant目录即可调用 vant调用main.json中调用{"navigationBarTitleText": "Home","usingComponents": {"van-button": ...
本文实例讲述了微信小程序拍照和摄像功能实现方法。分享给大家供大家参考，具体如下： 拍照 原先的想法是使用微信的camera组件来实现，并且模拟发朋友圈的样子来进行相机的设置，其实就是将camera组件的大小设置成根屏幕一样大，并在上面使用一个cover-image组件来给用户进行点击，可是实际上的情况是第一，cover-image组件有时候会消失，第二，整个流程实现起来很僵硬，页面跳转也是卡的要死，后来无意间发现了另一个API：wx.choo...
微信代码片段点这里, 该功能需要添加appid才能进行正常的测试。 在小程序的文档中我们得知，wx.saveImageToPhotosAlbum 是用来保存图片到相册的。 但是仔细一看会发现这个接口的filePath参数只接受临时文件路径或永久文件路径，不支持网络图片路径，意味着我们不能直接调用这个接口。。 因此先需要把该文件下载至本地，使用 wx.downloadFile 。 但值得注意的是小程序只可以跟指定的域名与进行网络通信，也就是说下载图片之前，我们...
本文实例讲述了微信小程序实现的动态设置导航栏标题功能。分享给大家供大家参考，具体如下： 场景 当从一个分类列表页面进入到一个详情页面的时候，由于这个详情页面是公用的，为了区分页面，就会设置该页面的导航用以区分。就需要开发者在页面加载的时候进行动态设置导航标题！ 实现API wx.setNavigationBarTitle(OBJECT) 语法 wx.setNavigationBarTitle({title: 当前页面, //页面标题success: () => {}, //接口调用成功的回调函...
本文实例讲述了微信小程序常用简易小函数。分享给大家供大家参考，具体如下： 最近一直在写微信小程序，而且由于是第二次写了，所以针对很多通用的情况封装了一些函数，建议你们放在app.js中，方便全局去调用。 提示类函数 微信有一种原生的API用于显示提示类结果的wx.showToast，而且其中的图片是可以自定义的，所以为了保证全部一致性，而且方便调用，所以我将其全部封装在了app.js中： // 成功 showSuccess: function (message)...
本文实例为大家分享了微信小程序实现顶部导航的具体代码，供大家参考，具体内容如下 之前Android开发时，顶部导航用到viewPage，微信小程序里想要达到同样的效果，可用swiper来实现，先看效果图上代码： 1.swiperTab.js Page({data: {// tab切换 currentTab: 0,},swichNav: function (e) {console.log(e);var that = this;if (this.data.currentTab === e.target.dataset.current) {return false;} else {that.setData({currentTab...
一、前言 做复杂的小程序就与web页面的区别原来越小了，一些web页面的功能会被要求添加到微信小程序页面中。 二、功能 页面在滑动的时候顶部页面导航跟随滑动，当点击导航中的任意一项时返回页面顶部。 三、实现 wxml代码： <view class=container> <view class=navigation {{pageVariable.isFloat == true ? "float-navigation":""}}><view class={{policyFilter.curSelectNavigationItemFormate(pageVariable.curSelectedItemId,...
今天给大家带来一个微信小程序的弹出是菜单效果，老规矩先上效果图。(录制的gif动画有点卡，实际真机或是模拟器上很顺畅)先简单说下思路： 1、首先在屏幕的某个位置放几个悬浮按钮，放几个看你需要的功能 2、点击最上层(wxml中最后一个就是最上层)的的按钮后增加背景遮罩，这个遮罩在我前面自定义modal弹框时有用到 3、分别对按钮做旋转和移动动画和透明度，造成动画差异就是位移的动画距离不同 4、收起的时候回到原来位置并且让透...
小程序商品展示需要导航栏的商品分类进行滑动，供大家参考，具体内容如下 效果图：首先是滑动的效果： <scroll-view scroll-x="true" style="width: 100%;white-space:nowrap;"> </scroll-view>小程序使用</scroll-view>,横向移动即可 WXML:这里面我将导航栏显示类目定义为5个，每个20%,当超出5个分类，也就是index>4的时候，导航栏下面的省略号加上（因为tab-nac的border-bottom只能显示到第五个分类） <scroll-view scroll-x="tr...
本文实例讲述了微信小程序使用map组件实现路线规划功能。分享给大家供大家参考，具体如下： 效果图实现原理 1. 通过map组件标记起始点和绘制路线图； 2. 通过高德地图API获取不同类型的路线坐标点，以及耗费时间和路程。 WXML <view class="flex-style"><view class="flex-item {{status == car ? active : }}" data-status="car" bindtouchstart="goTo">驾车</view><view class="flex-item {{status == walk ? active : }}" data-...
本文实例讲述了微信小程序全局变量功能与用法。分享给大家供大家参考，具体如下： 全局变量的作用在微信小程序开发中，会遇到一个很实际的应用场景，就是一个变量会在多个页面进行使用。例如： 1. 在微信小程序开发中使用高德地图的微信小程序开发，其中key值就需要在多个页面使用； 2. 在微信小程序开发电商平台时同样，比如客服电话，就需要在多个页面使用。在以上两种类似的场景中，开发者就需要使用全局变量，当然也有开发者说...
本文实例讲述了微信小程序使用map组件实现解析经纬度功能。分享给大家供大家参考，具体如下： 声明 bug： 页脚的详细地址在真机测试是会出现不显示问题？ 造成原因：在小程序map组件的同一区域，map组件的视图层比普通的文本视图层要高，所以在真机会遮挡！ 解决办法：将该文本视图采用cover-view，放在map中。 感谢： 感谢Lrj_estranged指出问题！ 效果图实现原理 1. map组件实现定位标记或者指定定位标记，并保存location。 2. 采...
本文实例讲述了微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能。分享给大家供大家参考，具体如下： 效果图实现原理采用高德地图微信小程序开发API（getWeather），如果 city 属性的值为空（或者没有city属性），默认返回定位位置的天气数据；如果 city 不为空，则返回 city 指定位置的天气数据。WXML <view class="map-weather"><view><text>城市：</text>{{address}}</view><view><text>天气：</text>{{weat...
本文实例为大家分享了微信小程序实现九宫格抽奖的具体代码，适用于年会抽奖，供大家参考，具体内容如下 效果图比较卡顿，真实运行效果是旋转的用到的素材：实现步骤： 实现原理 改变每一项的透明度实现选中效果。利用setTimeOut时间使旋转速度越来越慢。达到慢慢停止的效果。实际应用中可以将9张奖品图片和中奖项均通过接口返回。以方便奖品的调整。 1.布局绘制 <view class="container">停止位置:<input value={{luckPosition}} ...