uniapp最新创建的main.js改动
一个月没玩,最近创建一个uniapp发现main.js改的我不认识了,谁来说一下
import App from './App'
// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
try {
function isPromise(obj) {
return (
!!obj &&
(typeof obj === "object" || typeof obj === "function") &&
typeof obj.then === "function"
);
}
// 统一 vue2 API Promise 化返回格式与 vue3 保持一致
uni.addInterceptor({
returnValue(res) {
if (!isPromise(res)) {
return res;
}
return new Promise((resolve, reject) => {
res.then((res) => {
if (res[0]) {
reject(res[0]);
} else {
resolve(res[1]);
}
});
});
},
});
} catch (error) { }
const app = new Vue({
...App
})
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
// #endif
引入 App 组件,并通过 import 导入语法引入;
根据不同的 Vue 版本进行不同的处理,这里使用的是条件编译指令 #ifndef 和 #ifdef 来实现;
在 Vue2 中,使用 Vue 的构造函数创建一个 Vue 实例,并将 App 组件作为其根组件,然后将该实例挂载到页面上;
在 Vue2 中,通过 uni.addInterceptor() 方法对返回结果进行拦截,并将其转换为 Promise 形式返回,以保持与 Vue3 API 的返回格式一致;
在 Vue3 中,使用 createSSRApp() 方法创建一个 SSR 应用程序,并将 App 组件作为其根组件,然后将该应用程序作为一个对象导出,以供 SSR 渲染使用。
需要注意的是,这段代码中的 uni.addInterceptor() 方法是针对 uni-app 框架中的 API 进行的拦截,用于将其返回结果转换为 Promise 形式。如果使用的是其他框架或原生开发,可能需要使用不同的方式来实现类似的功能。
// 引入 App 组件
import App from './App'
// #ifndef VUE3
// 如果运行环境不是 Vue3,则使用 Vue2
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app' // 将 App 组件的类型设置为 app
try {
// 判断一个对象是否是 Promise 对象
function isPromise(obj) {
return (
!!obj &&
(typeof obj === "object" || typeof obj === "function") &&
typeof obj.then === "function"
);
}
// 统一 vue2 API Promise 化返回格式与 vue3 保持一致
// 对 uni-app API 的返回结果进行拦截,并将其转换为 Promise 形式
uni.addInterceptor({
returnValue(res) {
if (!isPromise(res)) { // 如果返回结果不是 Promise 对象
return res; // 直接返回结果
}
return new Promise((resolve, reject) => { // 否则将其转换为 Promise 对象
res.then((res) => { // 在 Promise 对象的回调函数中处理结果
if (res[0]) { // 如果结果的第一个元素不为空,则表示出现了错误
reject(res[0]); // 将错误信息作为 Promise 的 reject 值返回
} else {
resolve(res[1]); // 将结果的第二个元素作为 Promise 的 resolve 值返回
}
});
});
},
});
} catch (error) { }
// 创建一个 Vue 实例,将 App 组件作为其根组件,然后将该实例挂载到页面上
const app = new Vue({
...App
})
app.$mount()
// #endif
// #ifdef VUE3
// 如果运行环境是 Vue3,则使用 createSSRApp 方法创建一个 SSR 应用程序
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App) // 将 App 组件作为 SSR 应用程序的根组件
return {
app
}
}
// #endif
就是加了vue3环境判断 的不同写法