微信小程序結(jié)合mock.js實現(xiàn)后臺模擬及調(diào)試
一、創(chuàng)建小程序項目

mock.js 從 https://github.com/nuysoft/Mock/blob/refactoring/dist/mock.js 下載
api.js:配置模擬數(shù)據(jù)和后臺接口數(shù)據(jù),通過DEBUG = true;//切換數(shù)據(jù)入口
let API_HOST = "http://xxx.com/xxx";
let DEBUG = true;//切換數(shù)據(jù)入口
var Mock = require('mock.js')
function ajax(data = '', fn, method = "get", header = {}) {
if (!DEBUG) {
wx.request({
url: config.API_HOST + data,
method: method ? method : 'get',
data: {},
header: header ? header : { "Content-Type": "application/json" },
success: function (res) {
fn(res);
}
});
} else {
// 模擬數(shù)據(jù)
var res = Mock.mock({
'error_code': '',
'error_msg': '',
'data|10': [{
'id|+1': 1,
'img': "@image('200x100', '#4A7BF7','#fff','pic')",
'title': '@ctitle(3,8)',
'city': "@county(true)",
'stock_num': '@integer(0,100)',//庫存數(shù)量
'marketing_start': '@datetime()',
'marketing_stop': '@now()',
'price': '@integer(100,2000)',//現(xiàn)價,單位:分
'original_price': '@integer(100,3000)'
}]
})
// 輸出結(jié)果
// console.log(JSON.stringify(res, null, 2))
fn(res);
}
}
module.exports = {
ajax: ajax
}
index.js頁面
//index.js
//獲取應(yīng)用實例
var app = getApp()
var API = require('../../utils/api.js')
Page({
data: {
},
onLoad: function () {
console.log('onLoad')
var that = this
// 使用 Mock
API.ajax('', function (res) {
//這里既可以獲取模擬的res
console.log(res)
that.setData({
list:res.data
})
});
console.log(this.data.list)
}
})
index.wxml
<!--index.wxml-->
<block wx:for="{{list}}" wx:key="name">
<view>{{item.title}}</view>
<text>{{item.city}}</text>
<view>
<text>{{item.marketing_start}}</text>
</view>
<image src='{{item.img}}'></image>
</block>
頁面顯示

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript css在IE和Firefox中區(qū)別分析
我們討論的主題CSS網(wǎng)頁布局,最令大家頭疼的問題就是瀏覽器兼容性,雖然52CSS.com介紹過很多這方向的知識,但依然讓很多開發(fā)人員暈頭轉(zhuǎn)向,今天的這篇文章,將列出css和javascript在IE和Firefox中二十三個不同點,希望對大家的學(xué)習(xí)有所幫助。2009-02-02
用JavaScript玩轉(zhuǎn)游戲物理(一)運動學(xué)模擬與粒子系統(tǒng)
也許,三百年前的艾薩克·牛頓爵士(Sir Issac Newton, 1643-1727)并沒幻想過,物理學(xué)廣泛地應(yīng)用在今天許多游戲、動畫中。2010-06-06
直接拿來用的頁面跳轉(zhuǎn)進度條JS實現(xiàn)
這篇文章主要為大家分享了一款直接拿來用的頁面跳轉(zhuǎn)進度條,由javascript實現(xiàn),可以直接跳轉(zhuǎn)到相應(yīng)頁面,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-01-01
js 阻止子元素響應(yīng)父元素的onmouseout事件具體實現(xiàn)
本文為大家介紹下js阻止子元素響應(yīng)父元素的onmouseout事件,具體實現(xiàn)如下,感興趣的朋友可以參考下2013-12-12
js獲取下拉列表框<option>中的value和text的值示例代碼
本篇文章主要是對js獲取下拉列表框<option>中的value和text的值示例代碼進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01
前端HTTP發(fā)POST請求攜帶參數(shù)與后端接口接收參數(shù)的實現(xiàn)
近期在學(xué)習(xí)的時候,碰到一個關(guān)于post的小問題,故拿出來分享一下,下面這篇文章主要給大家介紹了關(guān)于前端HTTP發(fā)POST請求攜帶參數(shù)與后端接口接收參數(shù)的相關(guān)資料,需要的朋友可以參考下2022-10-10
js+for循環(huán)實現(xiàn)字符串自動轉(zhuǎn)義的代碼(把后面的字符替換前面的字符)
這段代碼是從網(wǎng)上看到的一段不錯的代碼,用for命令實現(xiàn)字符串的轉(zhuǎn)移,而且使用的是for循環(huán)直接將后面的字符替換成前面的字符,這個邏輯以前沒試過2020-12-12

