微信小程序API_WebSocket会话API_图片处理API

# WebSocket会话API

        >WebSocket会话用来创建一个会话连接，创建完会话连接后可以相互通信，像微信聊天和QQ聊天一样

        >它共涉及7个API的使用

                >wx.connectSocket(OBJECT)

                                >创建一个会话连接

wx.connectSocket参数

属性	类型	必填	说明
url	string	是	开发者服务器 wss 接口地址
header	Object	否	HTTP Header，Header 中不能设置 Referer
protocols	Array.<string>	否	子协议数组
tcpNoDelay	boolean	否	建立 TCP 连接的时候的 TCP_NODELAY 设置
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失 败都会执行）

                        >并发数

                                >1.7.0 及以上版本，最多可以同时存在 5 个 WebSocket 连接

                                >1.7.0 以下版本，一个小程序同时只能有1个 WebSocket 连接，如果当前已存在一个 WebSocket 连接，会自动关闭该连接，并重新创建一个 WebSocket 连接

                        示例代码：

wx.connectSocket({
    url: 'wss://example.qq.com',
    header:{
        'content-type': 'application/json'
    },
    protocols: ['protocol1'],
    method:"GET"
})

                >wx.onSocketOpen(CallBack)

                        >监听 WebSocket 连接打开事件

                        >参数：

                                >function callback：WebSocket 连接打开事件的回调函数

                                >Object res

属性	类型	说明	最低版本
header	object	连接成功的 HTTP 响应 Header	2.0.0

                >wx.onSocketError(CallBack)

                        >监听WebSocket错误

                        >参数：

                                >function callback：WebSocket 错误事件的回调函数

                >wx.sendSocketMessage(OBJECT)

                        >通过 WebSocket 连接发送数据

                        >需要先 wx.connectSocket，并在wx.onSocketOpen 回调之后才能发送

wx.sendSocketMessage参数

属性	类型	必填	说明
data	string/Arra yBuffer	是	需要发送的内容
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

                >wx.onSocketMessage(CallBack)

                        >监听WebSocket接收到服务器的消息事件

                        >参数：

                                >function callback：WebSocket接受到服务器的消息事件的回调函数

                                >Object res

属性	类型	说明
data	string/ArrayBuffer	服务器返回的消息

                >wx.closeSocket()

                        >关闭WebSocket连接

属性	类型	说明
code	number	一个数字值表示关闭连接的状态号，表示连接被关闭的原因。
reason	string	一个可读的字符串，表示连接被关闭的原因。这个字符串必须是不长于 123 字节的 UTF-8 文本（不是字符）。
success	function	接口调用成功的回调函数
fail	function	接口调用失败的回调函数
complete	function	接口调用结束的回调函数（调用成功、失败都会执行）

                        示例代码：

wx.connectSocket({
    url: 'test.php'
})
    //注意这里有时序问题，
    //如果 wx.connectSocket 还没回调 wx.onSocketOpen，而先调用wx.closeSocket，那么就做不到关闭 WebSocket 的目的。
    //必须在 WebSocket 打开期间调用 wx.closeSocket 才能关闭。
wx.onSocketOpen(function() {
    wx.closeSocket()
})
wx.onSocketClose(function(res) {
    console.log('WebSocket 已关闭！')
})

                >wx.onSocketClose(CallBack)

                        >监听WebSocket连接关闭事件

                        >参数：

                                >function callback：WebSocket 连接关闭事件的回调函数

                                >Object res

属性	类型	说明	最低版本
header	object	连接成功的 HTTP 响应 Header	2.0.0

#图片处理API

        >wx.chooseImage选择图片

                >从本地相册选择图片或使用相机拍照来选择图片

属性	类型	必填	说明
count	number	否	最多可以选择的图片张数
sizeType	Array.<string>	否	所选的图片的尺寸
sourceType	Array.<string>	否	选择图片的来源
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

                示例代码：

wx.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success (res) {
    // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
    }
})

        >wx.previewImage预览图片

                >用来预览多张图片以及设置默认显示的图片

                >预览的过程中用户可以进行保存图片、发送给朋友等操作

属性	类型	必填	说明
urls	Array.<string>	是	需要预览的图片链接列表。2.2.3 起支 持云文件ID。
current	string	否	当前显示图片的链接
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

                示例代码：

Page({
    onload:function(){
        wx.previewImage({
            current: ‘bye.jpg', // 当前显示图片的http链接
            urls: [“bye.jpg”,”location.png”] // 需要预览的图片http链接列表
        })
    }
})

        >wx.getImageInfo获取图片信息

                >用来获取图片信息

                >包括图片的宽度、高度以及返回路径

属性	类型	必填	说明
src	string	是	图片的路径，可以是相对路径、临时文件路径、 存储文件路径、网络图片路径
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

属性	类型	说明
width	number	图片原始宽度，单位px。不考虑旋转。
height	number	图片原始高度，单位px。不考虑旋转。
path	string	图片的本地路径
orientation	string	拍照时设备方向
type	string	图片格式

                示例代码：

 

//.wxml

<view class="weui-panel">
    <view class="weui-panel__bd">
        <image mode='widthFix' src="{{src}}" style='width: 300px;'></image>
        <button bindtap="getImageInfo">getImageInfo</button>
    </view>
</view>
<view wx:if="{{!!info}}" class='result'>
    <text space="nbsp">{{info}}</text>
</view>

//.js

Page({
    data: {
        src: ‘微信图标.png',
        info: '',
    },
    getImageInfo() {
        wx.getImageInfo({
            src: this.data.src,complete: (res) => {
                this.setData({
                    info: this.format(res)
                    })
            }
        })
    },
    format(obj) {
        return '{\n' +Object.keys(obj).map(function (key) { return ' '+ key + ': ' + obj[key] + ',' }).join('\n') + '\n' + '}'
    }
})

        >wx.saveImageToPhotosAlbum保存图片到相册

                >将图片保存到系统相册里

                >此操作需要用户授权

属性	类型	必填	说明
filePath	string	是	图片文件路径，可以是临时文件路径或永久 文件路径，不支持网络图片路径
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

                示例代码：

Page({
    onload:function(){
        wx.saveImageToPhotosAlbum({
            success (res) { }
        })
    }
})

 ...持续学习完善中。

---

#学无止境#