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


Posted in Javascript onMarch 28, 2019

一、创建小程序项目

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

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

api.js:配置模拟数据和后台接口数据,通过DEBUG = true;//切换数据入口

let API_HOST = "http://xxx.com/xxx";
let DEBUG = true;//切换数据入口
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 {
    // 模拟数据
    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)',//库存数量 
        'marketing_start': '@datetime()',
        'marketing_stop': '@now()',
        'price': '@integer(100,2000)',//现价,单位:分 
        'original_price': '@integer(100,3000)'
      }] 
    })
    // 输出结果
    // console.log(JSON.stringify(res, null, 2))
    fn(res);
  }
}
module.exports = {
  ajax: ajax
}

index.js页面

//index.js
//获取应用实例
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>

页面显示

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
细品javascript 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
Javascript之Number对象介绍
Jun 07 Javascript
再谈javascript注入 黑客必备!
Sep 14 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 Javascript
ES6中class类用法实例浅析
Apr 06 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
通过javascript实现段落的收缩与展开
Jun 26 Javascript
JavaScript的变量声明与声明提前用法实例分析
Nov 26 Javascript
详解webpack4.x之搭建前端开发环境
Mar 28 #Javascript
详解Vue.directive 自定义指令
Mar 27 #Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 #Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 #Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 #Javascript
vue中多个倒计时实现代码实例
Mar 27 #Javascript
JavaScript偏函数与柯里化实例详解
Mar 27 #Javascript
You might like
PHP设计模式 注册表模式
2012/02/05 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
crontab无法执行php的解决方法
2016/01/25 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
javascript真的不难-回顾一下基础知识
2013/01/15 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
vue-cli3 引入 font-awesome的操作
2020/08/11 Javascript
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
Python实现的中国剩余定理算法示例
2017/08/05 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
快速创建python 虚拟环境
2020/11/28 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
生物制药毕业生自荐信
2013/10/16 职场文书
心理健康心得体会
2014/01/02 职场文书
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
出纳担保书范文
2014/04/02 职场文书
计算机专业毕业生自荐书
2014/06/02 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
2015年音乐教学工作总结
2015/07/22 职场文书