• QQ
  • nahooten@sina.com
  • 常州市九洲新世界花苑15-2

微信开发

常州微信小程序-顶部提示,canvas,webSocket

原创内容,转载请注明原文网址:http://homeqin.cn/a/wenzhangboke/jishutiandi/weixinkaifa/2019/0103/304.html

常州微信小程序-顶部提示,canvas,webSocket


11.jpg (16.27 KB, 下载次数: 39)

下载附件

2017-3-22 00:28 上传

 
 
webSocket示例代码:
[AppleScript] 纯文本查看 复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
// pages/index/index.js
let app = getApp();
let socketOpen = false;
let inputValue = "";
Page({
  data:{
    thevalue: "",
    msglist : []
  },
  onLoad:function(options){
    const that = this;
    app.getUserInfo(function(userInfo){
      //常州微信公众平台更新数据
      that.setData({
        userInfo:userInfo
      })
      //链接
      wx.connectSocket({
        url: 'ws://www.flydiv.com:8888/',
        data:{
          nickName: that.data.userInfo.nickName,
          avatarUrl: that.data.userInfo.avatarUrl
        },
        header:{
          'content-type': 'application/json'
        },
        method:"GET"
      });
      //打开'
      wx.onSocketOpen(function(res) {
        socketOpen = true
        console.log("------open-----")
      })
      //接收
      wx.onSocketMessage(function(data) {
        that.data.msglist.push(JSON.parse(data.data));
        inputValue = "";
        that.setData({
          thevalue: "",
          msglist : that.data.msglist
        })
        console.log("------onmsg-----")
      })
    })
  },
  input : function(e){
    inputValue = e.detail.value
  },
  send : function(e){
    const that = this;
    if((e.detail.value || inputValue) == ""){
      return;
    }
    if(socketOpen){
      wx.sendSocketMessage({
       "data" : JSON.stringify({
          "content" : e.detail.value || inputValue,
          "avatarUrl" : that.data.userInfo.avatarUrl
       })
      })
    }else{
      wx.showToast({
        icon : "loading",
        title : "常州网站开发建设未打开WS!"
      })
    }
  }
})

[AppleScript] 纯文本查看 复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
<view id="maininpitbox">
    <input id="maininpit" type="text" bindconfirm="send" bindinput="input" value="{{thevalue}}"/>
    <view class="sendbtn" bindtap="send">
        send
    </view>
</view>
 
<view class="content">
    <!-- 群消息[包括我的消息] -->
    <block wx:for="{{msglist}}">
        <view class="msgbox {{item.avatarUrl==userInfo.avatarUrl?'mymsg':''}}">
            <view class="portrait">
                <image src="{{item.avatarUrl}}"></image>
            </view>
            <view class="msg">
                {{item.content}}
            </view>
        </view>
    </block>
</view>


上篇:上一篇:常州微信小程序-canvas绘制地图和简单拖动
下篇:下一篇:常州游戏开发培训-微信小程序-动手Flypy Bird