uni-app 添加原型方法真机运行无效

信息类别	详情
产品分类	uniapp/App
PC开发环境	Mac
操作系统版本	mac
HBuilderX类型	正式
HBuilderX版本	3.98
手机系统	Android
手机系统版本	Android 10
手机厂商	华为
手机机型	安卓
页面类型	vue
vue版本	vue2
打包方式	云端
项目创建方式	HBuilderX

示例代码：

1、将附件中的js文件在main.js中导入到Vue模型上
import jsBlock from 'utils/jsBlock/jsBlock.js'
const app = new Vue({
jsBlock,
jsViewBlock,
...App
})
app.$mount()

2、在web(浏览器)上运行没有任何问题  

2、真机运行。在页面中使用，调用接口返回数据遍历处理数据，直接异常报错，找不到addObject()方法
getProjectListApi() {
let e = {
diseaseId: this.selectedData.id,
page: this.pageIndex - 1,
size: this.pageSize,
sort: 'create_time,desc'
}
let self =  this  
getProjectList(e).then(r => {  
let slist = []  

res.forEach(element => {  
……element进行处理数据后添加到数组中  
slist.addObject(element)  
});  
self.loadDone = true  
self.dataList = slist  
uni.hideLoading()  
}).catch(err=>{  
uni.hideLoading()  
console.log('getProjectList 异常' + 'apiparams = ' + JSON.stringify(e) + 'error=' + JSON.stringify(err))  
})  
},

操作步骤：

1、将附件中的js文件在main.js中导入到Vue模型上
import jsBlock from 'utils/jsBlock/jsBlock.js'
const app = new Vue({
jsBlock,
jsViewBlock,
...App
})
app.$mount()

2、在web(浏览器)上运行没有任何问题  

2、真机运行。在页面中使用，调用接口返回数据遍历处理数据，直接异常报错，找不到addObject()方法

预期结果：

正常使用原型扩展方法！！！

实际结果：

真机无法运行。直接报错！！！！web正常！！！！

bug描述：

//给数组添加原型方法，用以替换list.push(e) Object.defineProperty(Array.prototype, “addObject”, { enumerable: false, value: function(item) { return this.push(item); }, }); 页面使用时list.addObject(e)

yibo5220 1楼•4 天前

这个问题我遇到了。原因应该是UNI把数组的原型改了。我今天遇到问题。分别打印了下数据的proto和[].proto。一个是“{}”,一个是"[]"。这才导致访问不了。在安卓端被改成了一个伪数组。下面是我的代码。可以看看

zlyuanteng 2楼•4 天前

在 uni-app 中添加原型方法时，如果真机运行无效，可能是由于以下原因导致的。以下是一些常见的排查步骤和解决方案：

1. 确保原型方法正确添加

在 main.js 或 App.vue 中添加原型方法时，确保代码正确。例如：

// main.js
import Vue from 'vue';

// 添加原型方法
Vue.prototype.$myMethod = function () {
  console.log('This is a custom method');
};

在组件中使用时：

export default {
  mounted() {
    this.$myMethod(); // 调用原型方法
  }
};

2. 检查真机环境

在真机运行时，某些功能可能受到限制或与开发环境不同。确保原型方法在真机环境中可用。

在真机调试时，使用 console.log 或 debugger 检查方法是否被调用。
确保真机环境支持 ES6+ 语法（如果使用了箭头函数、let、const 等）。

3. 检查打包配置

如果原型方法在开发环境有效，但在真机运行无效，可能是打包配置问题。

确保 main.js 被正确打包到真机环境中。
检查 vue.config.js 或 manifest.json 是否有影响原型方法的配置。

4. 避免异步问题

如果原型方法依赖于异步操作（如网络请求），确保在调用时异步操作已完成。例如：

Vue.prototype.$fetchData = async function () {
  const response = await fetch('https://api.example.com/data');
  return response.json();
};

在组件中调用时：

export default {
  async mounted() {
    const data = await this.$fetchData();
    console.log(data);
  }
};

5. 检查 Vue 版本

确保使用的 Vue 版本支持原型方法。uni-app 默认使用 Vue 2.x，如果升级到 Vue 3.x，原型方法的添加方式有所不同。

Vue 2.x：Vue.prototype.$myMethod
Vue 3.x：app.config.globalProperties.$myMethod

6. 真机调试工具

使用真机调试工具（如 Chrome DevTools 或 uni-app 自带的调试工具）检查是否有报错或警告信息。

7. 清理缓存

有时真机缓存可能导致代码未更新。尝试以下操作：

清理 HBuilderX 的编译缓存。
在真机上卸载并重新安装应用。

8. 检查平台差异

某些平台（如小程序）可能对原型方法的支持有限。确保目标平台支持 Vue 的原型方法。

示例代码

以下是一个完整的示例：

// main.js
import Vue from 'vue';
import App from './App.vue';

// 添加原型方法
Vue.prototype.$greet = function (name) {
  console.log(`Hello, ${name}!`);
};

new Vue({
  render: h => h(App),
}).$mount('#app');

<!-- App.vue -->
<template>
  <div>
    <button @click="sayHello">Click Me</button>
  </div>
</template>

<script>
export default {
  methods: {
    sayHello() {
      this.$greet('World'); // 调用原型方法
    }
  }
};
</script>

uni-app 添加原型方法 真机运行无效