微信小程序調用SAP發布的REST顯示數據列表

看了一段時間的微信小程序，感覺對一些企業來說，也是可以用起來的。哪怕只是簡單的使用。

先發布REST：參照這里：https://www.cnblogs.com/sapSB/p/9968054.html

  METHOD IF_HTTP_EXTENSION~HANDLE_REQUEST.
    DATA: LO_JSON_SER TYPE REF TO ZCL_TREX_JSON_SERIALIZER,
          LO_JSON_DES TYPE REF TO CL_TREX_JSON_DESERIALIZER,
          LV_DATA     TYPE STRING.
    DATA: JSON_STRING TYPE STRING.
    DATA:GT_T005U TYPE TABLE OF T005U.
    DATA:GW_T005U TYPE T005U.
    DATA:LV_METHOD TYPE STRING.

    LV_METHOD = SERVER->REQUEST->GET_HEADER_FIELD( NAME = '~request_method' ).
    LV_DATA = SERVER->REQUEST->IF_HTTP_ENTITY~GET_CDATA( ).

    CALL METHOD SERVER->RESPONSE->IF_HTTP_ENTITY~SET_CONTENT_TYPE
      EXPORTING
        CONTENT_TYPE = 'application/json'.

    CASE LV_METHOD.
      WHEN 'GET'.
        SELECT * INTO TABLE GT_T005U FROM T005U WHERE SPRAS = '1' AND LAND1 = 'CN'.

        CREATE OBJECT LO_JSON_SER
          EXPORTING
            DATA = GT_T005U[].

        CALL METHOD LO_JSON_SER->SERIALIZE.

        CALL METHOD LO_JSON_SER->GET_DATA
          RECEIVING
            RVAL = JSON_STRING.

        CALL METHOD SERVER->RESPONSE->SET_CDATA(
          EXPORTING
            DATA = JSON_STRING ).
*        REPLACE ALL OCCURRENCES OF ' '
        SERVER->RESPONSE->SET_STATUS( CODE = 200 REASON = 'OK' ).
      WHEN 'POST' OR 'PUT'.
        JSON_STRING = SERVER->REQUEST->IF_HTTP_ENTITY~GET_CDATA( ).
        CREATE OBJECT LO_JSON_DES.
        CALL METHOD LO_JSON_DES->DESERIALIZE(
          EXPORTING
            JSON = JSON_STRING
          IMPORTING
            ABAP = GW_T005U ).
        SERVER->RESPONSE->SET_STATUS( CODE = 200 REASON = 'OK' ).

*        MODIFY GT_T005U FROM GW_T005U.

      WHEN 'DELETE'.
      WHEN OTHERS.
    ENDCASE.


  ENDMETHOD.

然后就是微信小程序注冊了，這里就不說了，自己百度"微信小程序"然后注冊。

下面就簡單說說微信小程序里的代碼了：

整體結構：

 

 用了生成的默認代碼當作主頁：所以這里app.js就不用加代碼了。

因為我們這里加了幾個頁簽塊，所以需要在app.json里定義全局頁面：pages是所有的頁面，window是窗口屬性設置，tabBar是窗口下面的頁簽。

{
  "pages": [
    "pages/index/index",
    "pages/order/order",
    "pages/regin/regin",
    "pages/logs/logs",
    "pages/process/process"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#000000",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPtah": "image/tabBar.jpg",
        "text": "首頁"
      },
      {
        "pagePath": "pages/order/order",
        "iconPtah": "image/tabBar.jpg",
        "text": "主頁面"
      },
      {
        "pagePath": "pages/regin/regin",
        "iconPtah": "image/tabBar.jpg",
        "text": "國家地區"
      },
      {
        "pagePath": "pages/logs/logs",
        "iconPtah": "image/tabBar.jpg",
        "text": "LOGS"
      }
    ],
    "backgroundColor": "#32cd32"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": false
}

這里定義了5個頁簽塊，但是下面的list中只用了4個，所以也就只會顯示4個。

這時候全局的配置完成了。下面再看對應的每個小頁簽塊：

工單頁面：order.js

Page({
  data: {
    orderlist: [{
        object_id: "0210001233",
        process_type: "ZSV1",
        posting_date: "2019-12-30",
        status: "E0003",
        zzgroup: "TV1"
      },
      {
        object_id: "0210001234",
        process_type: "ZSV2",
        posting_date: "2019-12-30",
        status: "E0003",
        zzgroup: "TV1"
      },
      {
        object_id: "0210001235",
        process_type: "ZSV1",
        posting_date: "2019-12-30",
        status: "E0003",
        zzgroup: "TV1"
      },
      {
        object_id: "0210001236",
        process_type: "ZSV2",
        posting_date: "2019-12-30",
        status: "E0002",
        zzgroup: "AC1"
      }
    ]
  },
  //事件處理函數
  bindViewTap: function() {
    wx.navigateTo({
      url: '../regin/regin'
    })
  }
})

定義了一個orderlist數組，寫死了默認的幾條數據，下面有個切換窗口設置，

頁面控制：order.json   (隨便加就行，默認是需要有一個json類型的數據才不會報錯)

{
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

頁面XML配置：order.wxml 設置5列，循環，每列都引用前面定義的orderlist

<!--index.wxml-->
<view class="table">
  <!-- <view class="scrollview">
    <scroll-view class="scrollx" scroll-x="true" style="width:100%">-->
  <view id="title" class="tr">
    <text class="DH">單號</text>
    <text class="LX">類型</text>
    <text class="RQ">創建日期</text>
    <text class="ZT">狀態</text>
    <text class="PL">品類</text>
  </view>
  <view wx:for="{{orderlist}}" wx:for-index="idx" wx:for-item="item" id="list" class="tr">
    <text class="DH">{{item.object_id}}</text>
    <text class="LX">{{item.process_type}}</text>
    <text class="RQ">{{item.posting_date}}</text>
    <text class="ZT">{{item.status}}</text>
    <text class="PL">{{item.zzgroup}}</text>
  </view>
  <!--    </scroll-view>
  </view>-->
</view>

設置CSS:order.wxss

.table {
  border: 1rpx solid #ccc;
}

.tr {
  display: flex;
  justify-content: space-between;
  background: #ce9595;
}

.th, .th {
  border-right: 1rpx solid #000;
}

.DH {
  width: 200rpx;
  font-weight: 900;
  font-size: 30rpx;
}
.LX {
  width: 100rpx;
  font-weight: 900;
  font-size: 30rpx;
}
.RQ {
  width: 200rpx;
  font-weight: 900;
  font-size: 30rpx;
}
.ZT {
  width: 100rpx;
  font-weight: 900;
  font-size: 30rpx;
}
.XH {
  width: 200rpx;
  font-weight: 900;
  font-size: 30rpx;
}
.PL {
  width: 100rpx;
  font-weight: 900;
  font-size: 30rpx;
}

 

注*上面的orderlist是固定的值，下面的region是動態取rest的：

regin.js:

var call = require("../util/request.js")

Page({
  data: {
    orderlist: []
  },
  //事件處理函數
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad:function(){
    var that = this;
    //調用封裝的方法，為了方便我直接在頁面加載的時候執行這個方法
   // call.getData('posts/1/comments', this.shuffleSuc, this.fail);
    call.getData('zrest?sap-client=300', this.shuffleSuc, this.fail);
  },
  shuffleSuc: function (data) {
    var that = this;
    that.setData({
      orderlist: data
    })
    //我后面測試了一下，直接this.setData也可以，但是因為我在沒有使用封裝方法的時候
    //this.setData報過錯，不能直接用this，所以我在賦值的時候一般都會加上var that = this;
    //這句話算是一個不是習慣的習慣
  },
  fail: function () {
    console.log("失敗")
  },
})

regin.json

{
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

regin.wxml

<!--index.wxml-->
<view class="table">
  <!-- <view class="scrollview">
    <scroll-view class="scrollx" scroll-x="true" style="width:100%">-->
  <view id="title" class="tr">
    <text class="DH">客戶端</text>
    <text class="LX">語言</text>
    <text class="RQ">國家</text>
    <text class="ZT">省市</text>
    <text class="PL">省市描述</text>
  </view>
  <view wx:for="{{orderlist}}" wx:for-index="idx" wx:for-item="item" id="list" class="tr">
    <text class="DH">{{item.mandt}}</text>
    <text class="LX">{{item.spras}}</text>
    <text class="RQ">{{item.land1}}</text>
    <text class="ZT">{{item.bland}}</text>
    <text class="PL">{{item.bezei}}</text>
  </view>
  <!--    </scroll-view>
  </view>-->
</view>

regin.wxss

.table {
  border: 1rpx solid #ccc;
}

.tr {
  display: flex;
  justify-content: space-between;
  background: #ce9595;
}

.th, .th {
  border-right: 1rpx solid #000;
}

.DH {
  width: 200rpx;
  font-weight: 800;
  font-size: 25rpx;
}
.LX {
  width: 200rpx;
  font-weight: 800;
  font-size: 25rpx;
}
.RQ {
  width: 200rpx;
  font-weight: 800;
  font-size: 25rpx;
  text-overflow:ellipsis;
}
.ZT {
  width: 200rpx;
  font-weight: 800;
  font-size: 25rpx;
  text-overflow:ellipsis;
}
.PL {
  width: 200rpx;
  font-weight: 800;
  font-size: 25rpx;
  text-overflow:ellipsis;
}

 

這個省市的頁面是調用的接口，所以上面request了。這個是在util里新建的request.js中：

var app = getApp();
//項目URL相同部分，減輕代碼量，同時方便項目遷移
//這里因為我是本地調試，所以host不規范，實際上應該是你備案的域名信息
var host = 'https://gjyxxxxxxx.crm.hisense.com:1443/sap/';

/**
 * POST請求，
 * URL：接口
 * postData：參數，json類型
 * doSuccess：成功的回調函數
 * doFail：失敗的回調函數
 */
function request(url, postData, doSuccess, doFail) {
  wx.request({
    //項目的真正接口，通過字符串拼接方式實現
    url: host + url,
    header: {
      "content-type": "application/json;charset=GBK"
    },
    data: postData,
    method: 'POST',
    success: function (res) {
      //參數值為res.data,直接將返回的數據傳入
      doSuccess(res.data);
    },
    fail: function () {
      doFail();
    },
  })
}

//GET請求，不需傳參，直接URL調用，
function getData(url, doSuccess, doFail) {
  wx.showLoading({
    title: 'Data Loding...',
  })
  wx.request({
    url: host + url,
    header: {
      "content-type": "application/json;charset=GBK"
    },
    method: 'GET',
    success: function (res) {
      doSuccess(res.data);
      wx.hideLoading()
    },
    fail: function () {
      doFail();
      wx.hideLoading()
    },
  })
}

/**
 * module.exports用來導出代碼
 * js文件中通過var call = require("../util/request.js")  加載
 * 在引入引入文件的時候"  "里面的內容通過../../../這種類型，小程序的編譯器會自動提示，因為你可能
 * 項目目錄不止一級，不同的js文件對應的工具類的位置不一樣
 */
module.exports.request = request;
module.exports.getData = getData;

好了，下面看看效果吧：