二、手把手教你撸一个uniapp的开发框架--开发篇（一）

前置依赖：

• Node：>= 18.x
• Vue：3.x
• Pnpm：8.x推荐使用9.4+
• 编辑器：推荐使用VS Code
• 辅助工具：HBuilderX（打包App时使用）

创建项目

• 创建以 typescript 开发的工程（如命令行创建失败，请直接访问 gitee 下载模板）

 npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

安装第三方依赖

安装上一篇文档中提到的第三方依赖

pnpm i @uni-helper/unocss-preset-uni @uni-helper/vite-plugin-uni-pages @uni-helper/vite-plugin-uni-manifest @uni-helper/vite-plugin-uni-layouts unplugin-uni-router @uni-helper/uni-network

创建uno.config.ts

在项目更目录下创建uno.config.ts文件，配置unocss

import { defineConfig } from "unocss";
import { presetUni } from "@uni-helper/unocss-preset-uni";

export default defineConfig({
  presets: [presetUni()],
});

创建page.config.ts

调整vue.config.ts配置文件

import { defineConfig } from 'vite'
import Uni from '@dcloudio/vite-plugin-uni'
import UniPages from '@uni-helper/vite-plugin-uni-pages'

export default defineConfig({
  plugins: [
  	// ...
  	// 重点是下面这行代码
  	UniPages(),
  	// ....
 ],
})

配置page.config.ts文件

在项目根目录下创建page.config.ts，配置自动生成page.json文件，支持分包配置

import { defineUniPages } from "@uni-helper/vite-plugin-uni-pages";

export default defineUniPages({
  middleware: ["global"],
  pages: [],
  globalStyle: {
    navigationBarTextStyle: "black",
    navigationBarTitleText: "@uni-helper",
  },
  // tabbar 配置
  // tabbar:{
  // 	color:"",
  //	selectedColor:"",
  // 	list:[]
  // }
  //
  easycom: {
    custom: {},
  },
});

可配置项

key	类型	描述	默认值
dts	boolean/string	为页面路径生成 TypeScript 声明	true
homePage	string	设置默认路由入口	pages/index
dir	string	扫描的目录	src/pages
subPackages	string[]	分包扫描的目录
outDir	string	输出pages.json的目录	src
exclude	string[]	相对于dir和subpackages，需要排除的页面	['**/components/**/*.*]
routeBlockLang	json5/json/yaml/yml	路由配置文件的语言	json5

使用方式

默认会自动扫描生成，若需要针对页面进行个性配置，可在页面中增加<route> 节点进行配置

<route lang="json5">
{
	style:{
		navigationBarTitleText:"我是标题"
	}
}
</route>

更多用法请参考uniHelper官方文档

创建mainfest.config.ts

调整vue.config.ts配置文件

import Uni from '@dcloudio/vite-plugin-uni'
import UniManifest from '@uni-helper/vite-plugin-uni-manifest'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
  	// 重点是下面这一行
  	UniManifest(),
    Uni()
  ],
})

创建manifest配置文件

在项目根目录下创建manifest.config.ts

import { defineManifestConfig } from "@uni-helper/vite-plugin-uni-manifest";
export default defineManifestConfig({
  name: "",
  appid: "",
  description: "",
  versionName: "1.0.0",
  versionCode: "100",
  transformPx: false,
  "mp-weixin": {
    appid: "",
    setting: {
      urlCheck: false,
      es6: true,
      minified: true,
      postcss: true,
    },
    usingComponents: true,
    darkmode: true,
  },
  uniStatistics: {
    enable: false,
  },
  h5: {
    darkmode: true,
  },
  vueVersion: "3",
  "app-plus": {
    darkmode: true,
    distribute: {
      ios: {
        dSYMs: false,
      },
      sdkConfigs: {
        ad: {},
      },
    },
  },
});

可配置内容参考uniapp官方文档

创建layout目录

调整vue.config.ts配置文件

// vite.config.ts
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import UniLayouts from '@uni-helper/vite-plugin-uni-layouts'

export default defineConfig({
  plugins: [
  	//.....
  	// 重点是下面这行内容
  	UniLayouts(), 
  	// .....
  ],
})

创建布局

在src/layouts下创建布局

• 默认布局default.vue

// default.vue
<template>
	<slot>default</slot>
</template>

• 具名布局login.vue

// login.vue
<template>
	<slot>我是登录页面布局</slot>
</template>

布局的使用

在页面文件中的route节点中增加layout配置

<route>
// 使用具名布局
layout:login

// 禁用布局
// layout:false
</route>

更多用法请参考uni helper官方文档

全局路由拦截

在我们开发业务时，往往需要指定某些页面登录后才能访问，有些页面可以不需要登录就能访问。基于这种情况，通过uniapp-router-next来实现了全局路由跳转的拦截。

具体实现

• 配置vue.config.ts启用插件

// vite.config.ts
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import UniRouter from "unplugin-uni-router/vite";

export default defineConfig({
  plugins: [
  	// 重点:这个配置必须在最上面，否则可能会出现启动失败的情况app.config.globalComponents.$router 为 null
  	UniRouter(),
  	//.....
  ],
})

• 修改入口文件main.ts

// main.ts
import { createSSRApp } from 'vue'
import router from '@/route/router'
import App from './App.vue'

export function createApp() {
  const app = createSSRApp(App)
  //重点：下面这行代码
  app.use(router)
  return {
    app,
  }
}

• 编写全局拦截文件src/route/router.ts

import { createRouter } from "uniapp-router-next";
//@ts-ignore
import routes from "uni-router-routes";

const router = createRouter({
  routes: [
    ...routes,
    {
      path: "*",
      redirect: () => {
        return { name: "404" };
      },
    },
  ],
  //@ts-ignore
  platform: process.env.UNI_PLATFORM,
  h5: {},
});

// 可以查看打印信息，感觉就跟写 vue 普通项目无差
router.beforeEach((_to, _form, next) => {
  console.log(_to, _form, "beforeEach");
  next(); // 这个一定要写，不要就跳转不了了哈
});

router.afterEach((to, form) => {
  console.log(to, form, "afterEach");
});

export default router;

请自行在router.beforeEach和router.afterEach中完善拦截判断和跳转登录业务处理

• 具体跳转方法需用如下方式替代

import { useRouter } from 'uniapp-router-next'

const router = useRouter()

import { useRouter } from 'uniapp-router-next'

const router = useRouter()


router.navigateTo({
  path: '/pages/index/index',
  //参数
  query: {
    name: 'name'
  }
})
router.navigateTo...
router.reLaunch...
router.redirectTo...
router.switchTab..
router.navigateBack...

运行项目

h5 或小程序类运行

# h5开发环境
pnpm dev:h5
# 微信小程序
pnpm dev:weixin

未完待续~~