uni-app打包运行到安卓端后Mockjs失效

uni-app打包运行到安卓端后Mockjs失效

详细问题描述

不使用任何框架，只使用vue集成mockjs，在浏览器及app（安卓，ios）测试接口功能都正常。将MockJs移植到uni-app项目（使用官网新闻模板创建）中后，在浏览器模拟环境中正常，但是 通过hbuilderX运行到“手机或模拟器”，或通过HbuilderX云打包到安卓和ios就失效报错。

[内容]

重现步骤

  1. 下载附件源码。
  2. 解压，并导入项目到HbulderX，因为使用mockjs。所以先在项目根目录运行 命令： npm install mockjs --save 安装mockjs。
  3. 通过hbuilderX 的菜单“运行” 》》 运行到手机或模拟器，等app安装到安卓手机并启动。
  4. 在app的主界面，点击下方的“mock测试” 路由到 mock数据测试界面.
  5. 在mock数据测试界面，点击 “拉取数据”。

[结果]

发生错误：{“line”:17788,“column”:40,“sourceURL”:"(global function)"}

[期望] 拦截请求地址，并获取service中的mock数据。（即效果同hbuilderx >>运行>>运行到浏览器 >>chrome 操作执行结果）

[如果语言难以表述清晰，拍一个视频或截图，有图有真相]

IDE运行环境说明

IDE版本号 HBuilderX 版本:1.9.9.20190522
windows版本号 windows7 旗舰版 Service Pack 1

uni-app运行环境说明

运行端是h5 uni-app 以h5方式功能正常。
运行端版本号 Google Chrome 版本：72.0.3626.109（正式版本）（64位）
项目以HBuilderX创建，且使用官方新闻模板 HBuilderX 版本:1.9.9.20190522
编译模式 自定义组件模式。

App运行环境说明

Android版本号 6.0.1
iOS版本号 否
手机型号 SM919
模拟器型号 直接通过hbuilderX 运行到手机（安卓）

附件

uni-app-news-0001.zip

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志，点右键打开文件所在目录，将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段，你补充的细一点，问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]


更多关于uni-app打包运行到安卓端后Mockjs失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

15 回复

查看了你使用的Mockjs的源码（https://github.com/nuysoft/Mock/blob/refactoring/src/mock/xhr/xhr.js），Mockjs是通过重写window.XMLHttpRequest实现的拦截和伪造数据，在uni-app的非H5端是没有XMLHttpRequest对象的，不能用此种方式来实现拦截。
帮你百度找了另一个，你试试：https://github.com/webx32/WxMock

更多关于uni-app打包运行到安卓端后Mockjs失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


用了上面说的这个url里的mock， h5可以，app不行

var Mock = require("./static/lib/mock");

Mock.mock(/deleteAll/,{ “code”:200, “message”:“删除成功”, “success”: true })

回复 DCloud_UNI_GSQ: 替换了还是不行，H5端可以，App上不行。报：request:fail invalid url “/about/list”

回复 DCloud_UNI_GSQ: 相关源码：https://github.com/jsonwu5/test-uniapp-mock

不错，可以用

您好 你们怎么了吗

uni-app不存在window和document，没有标准的ajax，有可能无法支持mockjs，可以尝试使用5+APP项目

“app-plus”: { “usingComponents”:true //是否启用自定义组件模式，为true表示新的自定义组件模式 ，否则为template模板模式 } 此参数不管设置成true还是false。（自定义组件模式或非自定义组件模式） 在 运行到 浏览器（运行>>运行到浏览器>> chrome）都是正常的。但是，通过HbulderX 打包到 安卓手机（或云打包再下载安装）上，功能直接就报错。应该是HbuilderX 打包过程中的一些处理导致的。

备注：同样的功能，在纯vue+mockjs 项目，使用cordova 打包到安卓是正常的。所以，肯定是Hbuilder X 打包uni-app 为安卓平台上的安装包过程，做过什么处理导致的。因为不知道你们具体的打包原理，所以麻烦看一下具体问题，项目源码头已经提交，谢谢。

回复 x***@qq.com: 您好 您已经解决了 MOckjs问题吗

uniapp打包APP使用的跟小程序一样的机制没有window和document的

您好 楼主解决了吗MOckjs

在uni-app中使用Mockjs在安卓端失效的问题，通常是由于运行环境差异导致的。以下是关键分析：

  1. 环境差异：
  • 浏览器环境有完整的DOM和BOM API支持
  • 安卓端(包括模拟器)是运行在JavaScriptCore环境中，缺少部分浏览器API
  1. 常见原因：
  • Mockjs依赖的XMLHttpRequest在移动端可能被uni-app的请求机制拦截
  • 移动端环境对某些ES6+语法支持不完全
  1. 解决方案建议： (1) 改用uni-app的mock方案：
  • 使用uni-app的拦截器uni.addInterceptor
  • 或配置manifest.json中的networkTimeout

(2) 条件编译处理：

// #ifdef H5
const Mock = require('mockjs')
// 配置mock
// #endif
回到顶部