微信小程序调用SAP发布的REST显示数据列表
生活随笔
收集整理的這篇文章主要介紹了
微信小程序调用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;
好了，下面看看效果吧：
總結
以上是生活随笔為你收集整理的微信小程序调用SAP发布的REST显示数据列表的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 「Note」数论方向 - 组合数学
- 下一篇： 武威达府社区附近哪些可以给宝宝打防疫针