完成微信小程序代码

demo2/wxapp/app.js

@@ -1,39 +1,15 @@
 //app.js
+// 本地开发模式时，websocket与RESTful API 全部指向127.0.0.1
+let localDev= true
+
 App({
   onLaunch: function () {
-    // 展示本地存储能力
-    // var logs = wx.getStorageSync('logs') || []
-    // logs.unshift(Date.now())
-    // wx.setStorageSync('logs', logs)
-
-    // // 登录
-    // wx.login({
-    //   success: res => {
-    //     // 发送 res.code 到后台换取 openId, sessionKey, unionId
-    //   }
-    // })
-    // // 获取用户信息
-    // wx.getSetting({
-    //   success: res => {
-    //     if (res.authSetting['scope.userInfo']) {
-    //       // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
-    //       wx.getUserInfo({
-    //         success: res => {
-    //           // 可以将 res 发送给后台解码出 unionId
-    //           this.globalData.userInfo = res.userInfo
-
-    //           // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
-    //           // 所以此处加入 callback 以防止这种情况
-    //           if (this.userInfoReadyCallback) {
-    //             this.userInfoReadyCallback(res)
-    //           }
-    //         }
-    //       })
-    //     }
-    //   }
-    // })
   },
   globalData: {
-    userInfo: null
+    // 初期调试时可以设置不检验合法域名，否则调用API时需要设置小程序的request、socket合法域名
+    // 本机调试需要本机运行demo2，然后将API指向127.0.0.1
+    websocketURL: localDev ? 'ws://127.0.0.1:8002' : 'wss://sh.scaugreen.cn',
+    requestHost: localDev ? 'http://127.0.0.1:8002' : 'https://sh.scaugreen.cn',
+    equipmentId: '123456'
   }
 })

demo2/wxapp/app.json

@@ -1,7 +1,7 @@
 {
   "pages":[
     "pages/index/index",
-    "pages/setting/setting"
+    "pages/setting/setting" 
   ],
   "tabBar": {
     "list": [

demo2/wxapp/jsconfig.json

@@ -0,0 +1,6 @@
+{
+	"compilerOptions": {
+		"target": "es2015",
+		"module": "commonjs"
+	}	
+}

demo2/wxapp/pages/index/index.js

@@ -1,69 +1,85 @@
 import * as echarts from '../../ec-canvas/echarts';
-
+let option = {
+  color: '#fff',
+  textStyle: {
+    color: '#fff',
+    fontWeight: 900,
+    fontSize: 24
+  },
+  title: {
+    text: '实时温度',
+    textStyle: {
+      color: '#fff'
+    }
+  },
+  xAxis: {
+    type: 'category',
+    data: []
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [{
+    type: 'line',
+    data: []
+  }]
+};
+let myChart = null
 const app = getApp();
 
+// 给echart插入新数据
+function updateMyChart(time, value) {
+  option.xAxis.data.push(time)
+  option.series[0].data.push(value)
+  // 如果数据超过10个，把第一个数据删除。
+  if (option.xAxis.data.length > 10) {
+    option.xAxis.data.shift()
+    option.series[0].data.shift()
+  }
+  if (myChart){
+    myChart.setOption(option);
+  }
+}
+
+function initWebsocket(){
+  wx.connectSocket({
+    url: app.globalData.websocketURL
+  })
+
+  wx.onSocketOpen(function (res) {
+    //建立连接时，先发送equipmentId，以接收设备实时数据
+    let data = JSON.stringify({
+      equipmentId: app.globalData.equipmentId
+    })
+    wx.sendSocketMessage({data:data})
+  })
+
+  wx.onSocketMessage(function (msg) {
+    console.log('receive:', msg)
+    try {
+      // 将JSON字符串反转为JSON对象
+      let data = JSON.parse(msg.data)
+      data.forEach(d => {
+        //将接收到的数据 更新到echart图表里
+        updateMyChart(d.time, d.value)
+      });
+    } catch (error) {
+      console.log('error:', error)
+    }
+  })
+}
+
+
+
+
 function initChart(canvas, width, height) {
   const chart = echarts.init(canvas, null, {
     width: width,
     height: height
   });
   canvas.setChart(chart);
-
-  var option = {
-    title: {
-      text: '测试下面legend的红色区域不应被裁剪',
-      left: 'center'
-    },
-    color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
-    legend: {
-      data: ['A', 'B', 'C'],
-      top: 50,
-      left: 'center',
-      backgroundColor: 'red',
-      z: 100
-    },
-    grid: {
-      containLabel: true
-    },
-    tooltip: {
-      show: true,
-      trigger: 'axis'
-    },
-    xAxis: {
-      type: 'category',
-      boundaryGap: false,
-      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
-      // show: false
-    },
-    yAxis: {
-      x: 'center',
-      type: 'value',
-      splitLine: {
-        lineStyle: {
-          type: 'dashed'
-        }
-      }
-      // show: false
-    },
-    series: [{
-      name: 'A',
-      type: 'line',
-      smooth: true,
-      data: [18, 36, 65, 30, 78, 40, 33]
-    }, {
-      name: 'B',
-      type: 'line',
-      smooth: true,
-      data: [12, 50, 51, 35, 70, 30, 20]
-    }, {
-      name: 'C',
-      type: 'line',
-      smooth: true,
-      data: [10, 30, 31, 50, 40, 20, 10]
-    }]
-  };
-
   chart.setOption(option);
+  myChart = chart;
   return chart;
 }
 
@@ -81,7 +97,40 @@ Page({
       onInit: initChart
     }
   },
-
-  onReady() {
+  openLED:function(){
+    wx.request({
+      url: app.globalData.requestHost + '/led/' + app.globalData.equipmentId,
+      data: {
+        action: 'open'
+      },
+      header: {
+        'content-type': 'application/json' // 默认值
+      },
+      method:'POST',
+      success(res) {
+        console.log('open led',res.data)
+      }
+    })
+  },
+  closeLED: function () {
+    wx.request({
+      url: app.globalData.requestHost + '/led/' + app.globalData.equipmentId,
+      data: {
+        action: 'close'
+      },
+      header: {
+        'content-type': 'application/json' // 默认值
+      },
+      method: 'POST',
+      success(res) {
+        console.log('close led', res.data)
+      }
+    })
+  },
+  onShow() {
+    initWebsocket()
+  },
+  onHide(){
+    wx.closeSocket()
   }
 });

demo2/wxapp/pages/index/index.wxml

@@ -26,6 +26,11 @@
     <view class='block' style='height:200px;margin-top:5vh;'>
       <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
     </view>
+
+    <view style='display:flex;margin-top:10px;'>
+      <button type="primary" bindtap='openLED'>开灯</button>
+      <button bindtap='closeLED'>关灯</button>
+    </view>
   </view>
 </view>
 

demo2/wxapp/pages/index/index.wxss

@@ -1,4 +1,8 @@
 /**index.wxss**/
+button{
+  width: 40%;
+  display: inline;
+}
 .background{
   position: absolute;
   width: 100%;

demo2/wxapp/pages/setting/setting.js

@@ -1,11 +1,15 @@
-//logs.js
+//setting.js
 const util = require('../../utils/util.js')
-
+const app = getApp();
 Page({
   data: {
-    logs: []
+    logs: [],
+    equipmentId: app.globalData.equipmentId
+  },
+  bindKeyInput:function(e){
+    // console.log(e.detail.value)
+    app.globalData.equipmentId = e.detail.value
   },
   onLoad: function () {
-    console.log("do nothing.")
   }
 })

demo2/wxapp/pages/setting/setting.wxml

@@ -1,5 +1,6 @@
 <!--setting.wxml-->
 <view>
-  <text>setting page</text>
-
+  <text>设置设备ID：</text>
+  <input value="{{equipmentId}}" bindinput="bindKeyInput" style='border:1px solid #ccc;' placeholder='123456'/>
+  <text style='font-size:12px;color:#ccc;'>默认设备ID：123456,由模拟客户端产生的实时数据，其它设备ID需要自行连接硬件才能产生实时数据。</text>
 </view>

demo2/wxapp/project.config.json

@@ -4,7 +4,7 @@
 		"ignore": []
 	},
 	"setting": {
-		"urlCheck": true,
+		"urlCheck": false,
 		"es6": true,
 		"postcss": true,
 		"minified": true,