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

现实需求

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

})