微信小程序入门六: WebSocket应用

实例内容

今天主要说一下微信的WebSocket接口以及在小程序中的使用。

WebSocket是什么(简述)

微信的WebSocket接口和HTML5的WebSocket基本一样,是HTTP协议升级来的,做为一个新的Socket在B/S上使用,它实现了浏览器与服务器全双工通信。

因为这里是做小程序,所以就不对WebSocket的底层和协议做过多的说明了,只是稍微介绍一下。想了解详细的WebSocket可以参考如下:

WebSocket与Ajax 的选择

在WebSocket出来之前,实现即时通讯通常使用Ajax来实现,而Ajax是通过轮询的方式进行实时数据的获取,轮询就是在指定的时间间隔内,进行HTTP 请求来获取数据,而这种方式会产生一些弊端,一方面产生过多的HTTP请求,占用带宽,增大服务器的相应,浪费资源,另一方面,因为不是每一次请求都会有数据变化(就像聊天室),所以就会造成请求的利用率低。

而WebSocket正好能够解决上面的弊端,WebSocket是客户端与服务器之前专门建立一条通道,请求也只请求一次,而且可以从同道中实时的获取服务器的数据,所以当应用到实时的应用上时,WebSocket是一个很不错的选择。

WebSocket协议名

WebSocket的链接不是以httphttps开头的,而是以wswss开头的,这里需要注意一下。

实例:实时显示交易信息

这里类似于实时查看股票信息,这里用到了图表插件wxchart

// pages/stock/stock.js //加载插件 var wxCharts = require(‘wxcharts.js’); Page({ data: {}, onLoad: function (options) { //建立连接 wx.connectSocket({ url: “ws://localhost:12345”, }) //连接成功 wx.onSocketOpen(function() { wx.sendSocketMessage({ data: ‘stock’, }) }) //接收数据 wx.onSocketMessage(function(data) { var objData = JSON.parse(data.data); console.log(data); new wxCharts({ canvasId: ‘lineCanvas’,//指定canvas的id animation: false, type: ‘line’,//类型是线形图 categories: [‘2012’, ‘2013’, ‘2014’, ‘2015’, ‘2016’, ‘2017’], series: [{ name: ‘交易量’, data: objData,//websocket接收到的数据 format: function (val) { if (typeof val == “string”) { val = parseFloat(val); } return val.toFixed(2) + ‘万元’; } }, ], yAxis: { title: ‘交易金额 (万元)’, format: function (val) { return val.toFixed(2); }, min: 0 }, width: 320, height: 200 }); }) //连接失败 wx.onSocketError(function() { console.log(‘websocket连接失败!’); }) }, })

这里WebSocket的地址是ws://localhost,端口是12345,连接成功后,向服务器发送stock,然后服务器向小程序提供数据信息。

WebSocket的服务器端我是用PHP写的,这里贴一下,大家可以参考一下

wx.onSocketOpen(CALLBACK)

监听WebSocket连接打开事件。
wx.onSocketError(CALLBACK)

监听WebSocket错误。
wx.sendSocketMessage(OBJECT)

通过 WebSocket 连接发送数据,需要先 wx.connectSocket,并在 wx.onSocketOpen 回调之后才能发送。

微信小程序入门五: wxml文件引用、模版、生命周期

实例内容

  • wxml文件引用(include、import)
  • 模版
  • 小程序生命周期

实例一: include方式引用header.wxml文件

文件引用对于代码的重用非常重要,例如在web开发中我们可以将公用的header部分和footer等部分进行提取,然后在需要的地方进行引用。

微信小程序里面,是包含引用功能的——include、import。这两个引用文件的标签,使用基本差不多,这里先说一下include。

微信中的视图文件引用,引用过来的都是没有渲染的,基本类似于直接将引用过来的文件复制到引用位置,所以我们需要重新对其渲染。
实例说明

这里将默认创建的用户头像信息提取出到header.wxml中,做为头部引用,分别由index2.wxml和index3.wxml引用,引用方式为include。
实例代码

pages中创建common/header.wxml

index.wxml中将系统默认创建的用户信息结构复制到header.wxml中。

header.wxml代码:

<!–pages/common/header.wxml–> <view bindtap=”bindViewTap” class=”userinfo”> <image class=”userinfo-avatar” src=”{{userInfo.avatarUrl}}” background-size=”cover”></image> <text class=”userinfo-nickname”>{{userInfo.nickName}}</text> </view>

因为两个页面都要包含header.wxml,所以样式文件就不重复写了,这里直接将样式拷贝到app.wxss

app.wxss代码:

创建index/index2index/index3

index2.wxml内容:

<!–pages/index/index2.wxml–> <view class=”container”> <include src=”../common/header.wxml” /> <view class=”myBtn”> <button type=”primary” bindtap=”goIndex3″>进入index3</button> </view> </view>

因为index2.wxmlindex3.wxml都需要userInfo数据,所以这边在index2获取到数据后,使用本地存储进行存储,index3.wxml读取本地存储。

index2.js代码:

实例二: import方式引用footer.wxml文件

这个实例使用import来引用文件,import比include要强大的多,待会我再对于这两都进行一下对比。

import引用方式涉及到了微信的模版(template),这里先说一下template。
微信视图模版(template)

template也是写在.wxml中,然后使用<template>…</template>标记指定模版信息,模版下定义:

<template name=”msgItem”>
视图代码…
</template>

使用name属性,作为模板的名字。

实例说明

使用模版的方式创建footer视图代码片,然后用importtemplate进行代码的调用。

微信小程序入门四: 导航栏样式、tabBar导航栏

实例内容

  • 导航栏样式设置
  • tabBar导航栏

实例一:导航栏样式设置

小程序的导航栏样式在app.json中定义。

这里设置导航,背景黑色,文字白色,文字内容测试小程序

app.json内容

{
“pages”:[
“pages/index/index”,
“pages/login/login”,
“pages/logs/logs”
],
“window”:{
“backgroundTextStyle”:”red”,
“navigationBarBackgroundColor”: “#000”,
“navigationBarTitleText”: “测试小程序”,
“navigationBarTextStyle”:”#fff”
}
}

window中的样式说明:
属性 类型 默认值 描述
navigationBarBackgroundColor HexColor 000000 导航栏背景颜色,如”#000000”
navigationBarTextStyle String white 导航栏标题颜色,仅支持 black/white
navigationBarTitleText String 导航栏标题文字内容
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉背景字体、loading 图的样式,仅支持 dark/light
enablePullDownRefresh Boolean false 是否开启下拉刷新

效果:

实例二:tabBar导航栏

tabBar挺好的,可以放置于顶部或者底部,用于不同功能页面的切换。

tabBar同样在app.json中进行定义,看一下我在app.json中对tabBar的相关定义:

“tabBar”: {
“selectedColor”: “#1296db”,
“list”: [{
“pagePath”: “pages/index/index”,
“text”: “首页”,
“iconPath”: “images/ico-home.png”,
“selectedIconPath”: “images/ico-home-d.png”
},{
“pagePath”: “pages/setting/setting”,
“text”: “设置”,
“iconPath”: “images/ico-setting.png”,
“selectedIconPath”: “images/ico-setting-d.png”
},{
“pagePath”: “pages/help/help”,
“text”: “帮助”,
“iconPath”: “images/ico-help.png”,
“selectedIconPath”: “images/ico-help-d.png”
}]
}

效果:

tabBar相关属性定义说明:
属性 类型 必填 默认值 描述
color HexColor 是 tab 上的文字默认颜色
selectedColor HexColor 是 tab 上的文字选中时的颜色
backgroundColor HexColor 是 tab 的背景色
borderStyle String 否 black tabbar上边框的颜色, 仅支持 black/white
list Array 是 tab 的列表,详见 list 属性说明,最少2个、最多5个 tab
position String 否 bottom 可选值 bottom、top

tabBar list定义说明:
属性 类型 必填 说明
pagePath String 是 页面路径,必须在 pages 中先定义
text String 是 tab 上按钮文字
iconPath String 是 图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px
selectedIconPath String 是 选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px

tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。