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>
    复制代码

    页面显示

     
  • 相关阅读:
    SharePoint Framework (SPFx) 开发入门教程
    SharePoint 2013 Designer 入门教程
    SharePoint 2013 开发教程
    SharePoint 2013 入门教程
    SharePoint Online 部署SPFx Web部件
    SharePoint Online SPFx Web部件绑定数据
    SharePoint Online 创建SPFx客户端Web部件
    SharePoint Online 配置框架(SPFx)开发环境
    SharePoint Online 创建应用程序目录
    SharePoint Online 启用 IRM
  • 原文地址:https://www.cnblogs.com/lguow/p/9138094.html
Copyright © 2011-2022 走看看