uni-app plus初始化原理及plus is not defined，mui is not defined 错误汇总

发布于 1周前 作者 zlyuanteng 来自 Uni-App

uni-app plus初始化原理及plus is not defined，mui is not defined 错误汇总

关于plus是哪里来的问题

plus是5+Runtime的内部对象。 就像chrome浏览器里有chrome.开头的一些对象方法，5+runtime内部内置了plus对象。

因为plus和mui不一样，plus是引擎级别的，不需要前端框架。而mui是前端框架，所以是要引入mui.js才能使用的。

不要在没有plus和mui的环境下调用相关API

普通浏览器里没有plus环境，只有HBuilder真机运行、打包后、或流应用环境下才能运行plus api。 在普通浏览器里运行时plus api时控制台必然会输出plus is not defined错误提示。 mui作为一个前端框架，你必须保证当前页面引入了mui.js。否则也会出现mui is not defined。

不要在plus和mui未完成初始化时调用相关API

就像在dom初始化完成前(DOMContentLoaded)去操作dom，就会报错是一样的道理。 plus和mui都需要初始化，在初始化完成后调用再调用。

document.addEventListener('plusready',function () {  
    // 在这里调用plus api  
},false);

执行更高效的写法是这样，如果plus已经存在，就直接使用

function plusReady(){  
    // 在这里调用plus api  
}  
if(window.plus){  
    plusReady();  
}else{  
    document.addEventListener('plusready',plusReady,false);  
}

mui框架对此进行了封装，写法更简单：

mui.plusReady(function(){  
     // 在这里调用plus api  
});

事实上，mui作为一个框架，也有初始化的过程，但mui的初始化过程在DOMContentLoaded完毕后就结束了。 mui ready的写法是这样，但一般无需使用。

mui.ready(function () {  

})

关于加载顺序

plus的ready的时间，在2016年12月后的ios版本上，其实是随时可用状态，不需要plus ready概念，但为了保持向下兼容，也仍然存在plus的ready事件；而安卓版本，plus的ready的时间是可以调节的。具体参考http://ask.dcloud.net.cn/article/921

而mui的ready一般伴随DOMContentLoaded而完成。 详细的启动时序参考这里：http://ask.dcloud.net.cn/article/571


Harmonyos Next教程
1 回复

在uni-app中，uni-app plus 指的是 uni-app 框架中的扩展API，这些API主要用于调用原生功能，如文件系统、设备信息等。uni-app 初始化原理主要涉及页面生命周期、事件监听和原生模块加载。当遇到 plus is not defined 或 mui is not defined 错误时，通常是因为相关模块没有被正确加载或者调用时机不正确。

uni-app 初始化原理简述

uni-app 框架在启动时，会先加载 main.js，然后根据页面的路由配置加载对应的页面脚本和样式。在加载过程中，uni-app 会自动处理页面生命周期函数，如 onLaunch、onShow、onHide 等，同时也会监听系统事件和原生模块的事件。

示例代码

以下是一个简单的 uni-app 项目结构示例，以及如何在 main.js 和页面中调用 plus API 的示例。

项目结构

├── pages
│   ├── index
│   │   ├── index.vue
│   └── ...
├── main.js
├── manifest.json
└── ...

main.js

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

// 确保 plus 对象在平台支持的情况下使用
if (window.plus) {
    console.log('plus API 已加载');
    // 可以在这里初始化一些 plus API 相关的设置
} else {
    console.error('plus API 未定义，请确保在支持 plus API 的平台上运行');
}

index.vue

<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello uni-app'
    }
  },
  mounted() {
    // 确保在 mounted 钩子中调用 plus API，因为此时页面已经加载完成
    if (window.plus) {
      plus.device.getInfo((info) => {
        console.log('设备信息:', info);
        this.message = `设备型号: ${info.model}`;
      });
    } else {
      console.error('在页面中 plus API 未定义');
    }
  }
}
</script>

错误处理

  • 确保你的应用是在支持 plus API 的平台上运行，如 5+ App（HBuilderX 打包的 App）。
  • 在调用 plus API 前，先检查 window.plus 是否存在。
  • 对于 mui 相关的错误，同样需要确保在支持 mui 的环境中运行，并检查 window.mui 是否存在。

通过上述方法，你可以有效地避免 plus is not defined 和 mui is not defined 错误，并确保你的 uni-app 应用能够正确调用原生功能。

回到顶部