微信小程序对接显示阿里云数据库数据

现实需求

在项目中需求，有时候现场设备发生故障，需要远程的人员知道。除了邮件方式，以微信小程序的方式也很好。今天进行尝试，并制作了一个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+'")

不足：无法实现新报警出现后，自动推送给用户，待解决。