1***@qq.com
1***@qq.com
  • 发布:2019-05-23 09:54
  • 更新:2021-07-21 18:01
  • 阅读:11973

uni-app mock数据

分类:uni-app

uni-app 如何 mock 数据

2019-05-23 09:54 负责人:无 分享
已邀请:
zzdev

zzdev

如果是小程序(微信、支付宝),开发者工具已经自带了

  • y***@foxmail.com

    试了下,这个mock只是针对小程序提供的api(比如getLocation(), requestPayment之类的),而不是用户的业务api

    2022-08-11 14:59

z***@163.com

z***@163.com

我也想找,暂无发现有大神做出来了~
那个WxMock.js试过了也不行,估计只能在原生小程序上用

z***@163.com

z***@163.com

亲测可用!!
昨晚又想了一下,然后修改了下项目代码,找到了个uniapp项目底下能使用mock的方法,遂再来答一次这个提问。
由于mock.js的机制问题,在uniapp的小程序模式底下无法正常拦截请求,但是它的各种生成随机数据的方法依然可用,于是只要找到方法代替拦截请求即可,在发送请求的时候修改为uniapp条件编译并加上是否使用mock数据的标识来判断是返回mock数据还是发送请求,附以下代码:

// /mock/user.js - mock数据  
import Mock from 'mockjs'  

const loginStatus = function (){//login状态的返回数据格式  
    let flag = Mock.Random.boolean()  
    return {  
        userId:Mock.Random.string(32),  
        status:flag?'success':'failed',  
        msg:flag?'':'后端返回的错误提示的信息!'  
    }  
}  

export {loginStatus}  

// /mock/index.js - 处理mock数据-仅在H5端生效   
import Mock from 'mockjs'  
import {contextPath} from '../api/index.js'  
import {loginStatus} from './user'  

if(contextPath == ''){//判断是否使用mock数据  
     Mock.mock(/loginOut/,function(options) {  
        return Mock.mock(loginStatus)  
    })  
}  

//  /api/index.js请求部分  
// #ifndef H5  
import {loginStatus} from '../mock/user.js'  
// #endif  

//网站绝对路径配置  
export let contextPath = ''  

export const loginOut = params => {//登出  
  return new Promise((resolve, reject)=>{  
        // #ifndef H5  
        let status = loginStatus()  
        if(contextPath == '') resolve(status)//我这里使用contextPath判断是使用mock数据,还是发送请求,请根据自己项目需要自行修改这个判断条件  
        else  
        // #endif  
    flyio.post('/appUser/app/loginOut', params).then(res => resolve(res)).catch((err) => {reject('loginOut flyio err:' + err);})  
  })  
}  

这样就完美在uniapp上全端通用mock假数据了,但要注意一点:mock.js原本的“数据模板定义”不可用;即“'@string(32)'”等不可用,只能使用“Mock.Random.string(32)”,切记!

  • jtshushu

    你好 有正常的文件DOM吗 求发给我,邮箱

    jtshushu@qq.com

    2020-04-25 14:13

StarSky

StarSky - 前端工程师

在微信小程序端报错,VM520:1 TypeError: Cannot read property 'split' of undefined
at Object.placeholder (mock.js:543)
at Object.string (mock.js:456)
at Object.Handler.gen (mock.js:209)
at Object.object (mock.js:380)
at Object.Handler.gen (mock.js:209)
at Object.Mock.mock (mock.js:106)
at VueComponent.onLoad (index.vue:31)
at invokeWithErrorHandling (mp.runtime.esm.js:1868)
at VueComponent.Vue.__call_hook (mp.runtime.esm.js:5868)
at ve.pageOptions.methods.onLoad (index.js:1437)

H5端APP端数据模拟是没问题的,不知道什么原因

囧粉

囧粉

小程序的模拟可以用 better-mock 这个库

  • StarSky

    没必要,直接本地koa搭建开启允许跨域就可以

    2020-05-22 16:40

该问题目前已经被锁定, 无法添加新回复