現實需求

在專案中需求，有時候現場裝置發生故障，需要遠端的人員知道。除了郵件方式，以微信小程式的方式也很好。今天進行嘗試，並製作了一個demo版本。

1.微信小程式申請製作前端

1.1lists檔案（利用模板和資料繫結迴圈顯示資料）

lists.wxml

<!--lists.wxml-->
<view class="warp">
  <!--列表模板-->
  <template name="lists">
    <navigator url="../../pages/detail/detail?id={{id}}" hover-class="navigator-hover">
      <view class="imgs">
        <image src="/images/1.png" class="in-img" background-size="cover" modal="scaleToFill"></image>
      </view> 
      <view class="infos">
        <view class="title">{{mingcheng}}</view>
        <view class="neirong">{{neirong}}</view>
        <view class="date">{{DateTimee}}</view>
      </view>
    </navigator>
  </template>
  <!--列表模板結束-->
  <!--迴圈輸出列表-->
  <view wx:for="{{newsList}}" wx:for-item="news" class="list">
    <template is="lists" data="{{...news}}" />
  </view>
</view>
 

lists.js

注：url: 'https://***.top/default.aspx?method=getdata',該後臺連結必須為https，通過json傳送給微信前端。

//lists.js
const app = getApp()

Page({
  data: {
    newsList: [
    ]
  },
  //事件處理函式
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    var that = this
    wx.request({
      url: 'https://***.top/default.aspx?method=getdata', //僅為示例，並非真實的介面地址
      header: {
        'Content-Type': 'application/json'
      },
      success(res) {
        that.setData({
          newsList: res.data
        })
        console.log(res.data)
      }
    })
  }

})

 

2.阿里雲域名，空間申請

CDN

關於域名申請，和空間就不贅敘，比較簡單。主要注意，由於本人申請的是便宜的共享型主機，不能使用阿里雲免費的SSL證書，故而，給主機申請了CDN服務，曲線實現了HTTPS（微信後臺必須採用HTTPS）。

關於這塊可以參考這篇博文：

3.編寫後臺對接微信小程式

微信小程式使用JSON資料，進行前後臺數據傳遞。使用c#進行後臺程式設計，將JSON傳遞給前端即可。

4.結果測試

基本通過測試，ifix語音報警後，通過ODBC將資料上傳到阿里雲資料庫中，然後，微信小程式中進行顯示。

補充：在ifix編寫後臺排程時，上傳水質資料時，需要及時將其sql指令碼精度設定在兩位數。

update shuizhi set datetime='"+StrD+"",PH=Convert(decimal(10,2),'"+AR_1+"'),COD=convert(decimal(10,2),'"+AR_2+'")

不足：無法實現新報警出現後，自動推送給使用者，待解決。