zoukankan      html  css  js  c++  java
  • 微信小程序 + 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>

    页面显示

     
  • 相关阅读:
    【新特性速递】卡片式表格,Yeah~~~
    6个最佳DevOps播客
    在裸金属服务器Bare Metal上Kubernetes
    保护Java应用程序不被窃取数据和源代码2
    家政服务行业动态
    15个免费数据集数据科学项目
    性能测试工具
    利用Apache Pulsar的实时边缘计算
    软件开发的八个误解
    如何防止范围蔓延
  • 原文地址:https://www.cnblogs.com/xzma/p/7591090.html
Copyright © 2011-2022 走看看