背景最近做了一个微信小程序的即时通讯功能,之前我也做过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}} ...