微信小程序结合mock.js实现后台模拟及调试

一、创建小程序项目

mock.js从https://github.com/nuysoft/Mock/blob/refactoring/dist/mock.js下载

api.js:配置模拟数据和后台接口数据，通过调试=真；//切换数据入口

让API _ HOST='http://xxx.com/xxx'；让DEBUG=true//切换数据入口var Mock=require('mock.js ')函数ajax(data=' '，fn，method='get '，header={}) { if(！DEBUG){ wx。请求(网址：配置.API_HOST数据，方法：方法？方法：“get”，data: {}，header: header？标头： { ' Content-Type ' : ' application/JSON ' }，success : function(RES){ fn(RES)；} });} else { //模拟数据var RES=模拟。mock({ ' error _ code ' : ' '，' error_msg': ' '，' data|10': [{ 'id| 1': 1，' img': '@image('200x100 '，' #4A7BF7 '，' #fff '，' pic ')，' title': '@ctitle(3，8)'，' city ' : ' @ country(true库存数量marketing _ start ' : ' @ datetime()'，' marketing_stop': '@now()'，' price': '@integer(100，2000)'，//现价，单位：分origin _ price ' : ' @ integer(100，3000)' }] }) //输出结果//控制台。日志(JSON。stringify(RES，null，2))fn(RES)；} }模块。exports={ Ajax : Ajax }索引。射流研究…页面

//index.js//获取应用实例var app=getApp()var API=require('././utils/API。js’)页面({ data : { }，OnLoad :函数(){ console。日志(' OnLoad ')var=this//使用Mock API.ajax(“”)，函数(res) { //这里既可以获取模拟的RES控制台。记录下来。setdata({ list : RES . data })})；控制台。日志(这个。数据。list)} })索引。页面结构

！索引。wxml-block wx : for=' { { list } } ' wx : key=' name ' view { { item }。title } }/查看文本{ { item }。city } }/text查看文本{ { item }。marketing _ start } }/text/view image src=' { { item。img } } '/图像/块页面显示

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。