uniapp的main.js变化

Question

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

Answer 1

引入 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