微信開發之小程式模擬json資料實現頁面除錯
我們在專案開發時,經常會遇到Http伺服器介面和前端開發並行的情況。對於前端開發者來說,尤其是時間進度要求較高的專案,不可能一直等服務介面可除錯了再開始去開發頁面。因此,我們可以提前根據服務端介面文件,模擬http服務返回的報文內容,加快開發除錯進度。
下面舉例說明,如何在微信小程式中實現模擬資料包文進行頁面展示:
1、建立js檔案,模擬測試資料;
2、載入js檔案,呼叫測試資料;
3、頁面展示呼叫所需資料
1、新建testdata.js,內容如下:
var localData = {
"list": [
{
"data": [
{
"id": 443,
"title": "Android學習",
"content": "Android學習的主題內容資訊主題內容資訊主題內容資訊主題內容資訊主題內容資訊主題",
"from": "知乎",
"imgSrc": "/images/qd.png",
"iscollect": "1",
"datetime": "2017-09-11 10:12",
"open": true,
"others": null,
"parentNode": [
121,
232
]
},
{
"id": 412,
"title": "PHP學習論壇",
"imgSrc": "http://p1.pstatp.com/origin/37e300054cb525cf8807",
"content": "PHP,全世界最好的語言,學習提高,知識豐富",
"from": "ITEYE",
"iscollect": "0",
"datetime": "2017-06-22 8:36",
"open": true,
"others": null,
"parentNode": [
121,
232
]
}
],
"id": 1001,
"name": "5月份交易記錄",
"month": "2018年5月",
"label": "晶片備案1",
"open": true,
"parentNode": [
121
]
},
{
"data": [
{
"id": 443,
"title": "Android學習2",
"content": "Android學習的主題內容資訊主題內容資訊主題內容資訊主題內容資訊主題內容資訊主題",
"from": "知乎",
"imgSrc": "/images/qd.png",
"iscollect": "1",
"datetime": "2017-09-11 10:12",
"open": true,
"others": null,
"parentNode": [
121,
232
]
},
{
"id": 443,
"title": "Android學習2",
"content": "Android學習的主題內容資訊主題內容資訊主題內容資訊主題內容資訊主題內容資訊主題",
"from": "知乎",
"imgSrc": "/images/qd.png",
"iscollect": "1",
"datetime": "2017-09-11 10:12",
"open": true,
"others": null,
"parentNode": [
121,
232
]
}
],
"id": 1002,
"name": "4月份交易記錄",
"month": "2018年4月",
"label": "晶片備案2",
"open": true,
"parentNode": [
121
]
}
]
};
module.exports = {
postData: localData
}
2、載入、呼叫:
控制檯輸出:
3、頁面呼叫js變數,這裡需要注意這裡有個坑:WXML 中的動態資料繫結均來自對應 Page 的 data。
效果如圖:
相關文章
- 模擬微信小程式頁面Page方法微信小程式
- 微信小程式開發系列教程三:微信小程式的除錯方法微信小程式除錯
- 微信小程式開發系列七:微信小程式的頁面跳轉微信小程式
- 微信小程式開發系列 (二) :微信小程式的單步除錯和控制器實現步驟概述微信小程式除錯
- 微信開發之小程式頁面間如何傳遞引數
- 微信小程式開發系列 (四) :微信小程式的頁面跳轉路由設計微信小程式路由
- 微信開發之小程式實現倒數計時
- 微信公眾號網頁開發——實用真機除錯網頁除錯
- 微信小程式開發07-列表頁面怎麼做微信小程式
- 微信小程式開發系列3----頁面配置--WXML資料繫結+條件渲染微信小程式XML
- 微信小程式攜帶token跳轉H5頁面,模擬器沒問題,安卓真機除錯顯示許可權錯誤微信小程式H5安卓除錯
- 帝國cms微信小程式算命小程式開發之指紋算命實現方法微信小程式
- 微信小程式開發系列8----頁面配置--事件繫結微信小程式事件
- 微信小程式之匯出頁面為doc檔案微信小程式
- 微信小程式怎麼開通,小程式頁面如何開發微信小程式
- Fiddler助力微信開發除錯除錯
- 微信公眾號開發之H5頁面跳轉到指定的小程式H5
- 微信小程式之-NBA線上直播小程式開發微信小程式
- 微信小程式 webview 頁面重新整理微信小程式WebView
- 獲取微信小程式頁面路徑微信小程式
- 微信小程式左滑刪除功能開發案例微信小程式
- 如何使用微信開發者工具除錯在微信端訪問的網頁除錯網頁
- 【微信小程式開發】梔子手作花花微信小程式商城開發最佳實踐微信小程式
- 微信小程式開發微信小程式
- 深入解析微信小程式頁面中實現的儲存圖片(附程式碼)微信小程式
- 第一章 “我要點爆”微信小程式雲開發之專案建立與我的頁面功能實現微信小程式
- 記微信網頁開發單頁面返回不重新整理的實現網頁
- 微信小程式在頁面,自定義元件中使用資料監聽器微信小程式元件
- 微信小程式開發小記微信小程式
- 微信掃小程式碼實現網頁端登入網頁
- 雲原生微信小程式開發實戰微信小程式
- 10行程式碼實現微信小程式支付功能,使用小程式雲開發實現小程式支付功能(行程微信小程式
- 微信小程式頁面功能-----標籤切換微信小程式
- 微信小程式之簡單開發操作(一)微信小程式
- 安卓微信小程式開發之“藍芽”安卓微信小程式藍芽
- 微信小程式開發05-日曆元件的實現微信小程式元件
- 微信小程式元件化 快速實現可用模態窗微信小程式元件化
- 微信小程式開發2微信小程式