uniApp+Vue3+Vite微信小程序开发指南

一、前期准备

需要的IDE包括：webstorm、HBuildeX、微信开发者工具，同时需要安装nodejs。

webstorm 下载地址：https://www.jetbrains.com/webstorm/

HBuildeX下载地址：https://www.dcloud.io/hbuilderx.html

微信开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

nodejs下载地址：https://nodejs.org/en/download/package-manager

二、通过WIN命令行进行环境搭建、启动

1、安装Node.js

2、指定npm源，可以百度搜索国内镜像源。

使用npm命令有可能报错证书过期。根据我的经验，一般是检查一下npm源是不是有问题，可以尝试更换别的源试试。

 # 设置国内镜像源
 npm config set registry https://registry.npmmirror.com
 # 更新npm
 npm install -g npm

3、安装pnpm。

# 安装pnpm
npm install -g pnpm

1、安装vue脚手架。

# 安装vue
npm install -g @vue/cli

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

# 创建项目
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

3、安装依赖并运行在浏览器中。

#安装依赖
pnpm i
#安装指定依赖
pnpm add
#查看是否安装pnpm
pnpm -v
#启动开发环境并在浏览器中查看
pnpm dev:h5

三、IDE安装、配置与使用

1、安装webstorm，HbuilderX,和微信开发者工具。

2、打开HbuilderX,运行-运行到小程序或模拟器-运行设置-设置微信开发者工具路径。

3、打开微信开发者工具，选择设置-安全设置。将服务端口号选择为开启。

4、打开webstorm，安装汉化插件、安装uniappTool工具，并在uniappTool工具中配置XBuilder、微信开发者工具路径。

5、webstorm 可以配置启动、打包等快捷操作。

四、生命周期

4.1、应用生命周期

仅可在App.vue中监听，在页面监听无效；App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素，也就是。

函数名	说明	平台兼容
onLaunch	当uni-app 初始化完成时触发（全局只触发一次），参数为应用启动参数，同 uni.getLaunchOptionsSync 的返回值
onShow	当 uni-app 启动，或从后台进入前台显示，参数为应用启动参数，同 uni.getLaunchOptionsSync 的返回值
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发	app-uvue 不支持
onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯	app-uvue 不支持
onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数（2.8.1+ app-uvue 暂不支持）	app-uvue 不支持
onPageNotFound	页面不存在监听函数	app-uvue 不支持
onThemeChange	监听系统主题变化	app-uvue 不支持
onLastPageBackPress	最后一个页面按下Android back键，常用于自定义退出	app-uvue-android 3.9+
onExit	监听应用退出	app-uvue-android 3.9+

4.2、页面生命周期

支持vue标准的生命周期函数，同时新增了很多其他的生命周期函数；在page目录下配置的页面文件中监听才能生效；uni-app会将pages.json==>pages配置项中的第一个页面，作为当前工程的首页（启动页）

函数名	说明	平台差异说明	最低版本
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad	百度小程序	3.1.0+
onLoad	监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例。
onShow	监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用，注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	App、微信小程序、快手小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项	微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
onShareAppMessage	用户点击右上角分享	微信小程序、QQ小程序、支付宝小程序、抖音小程序、飞书小程序、快手小程序、京东小程序
onPageScroll	监听页面滚动，参数为Object	nvue不支持
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object	App、H5
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack；详见	app、H5、支付宝小程序
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	App、H5	1.6.0
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。	App、H5	1.6.0
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）	App、H5	1.6.0
onShareTimeline	监听用户点击右上角转发到朋友圈	微信小程序	2.8.1+
onAddToFavorites	监听用户点击右上角收藏	微信小程序、QQ小程序	2.8.1+

4.3、组件生命周期

uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期：

函数名	说明	平台差异说明	最低版本
beforeCreate	在实例初始化之前被调用。详见
created	在实例创建完成后被立即调用。详见
beforeMount	在挂载开始之前被调用。详见
mounted	挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。详见	仅H5平台支持
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见	仅H5平台支持
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。详见
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见

五、项目搭建

5.1、2.2创建项目

# 创建项目
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

注意：后续命令均可在webstorm中执行运行。

5.2、自动引入插件配置

github文档：https://github.com/unplugin/unplugin-auto-import

实现在使用函数时，无需import引入

# 需要安装一个相关插件
pnpm i unplugin-auto-import

在vite.config.ts 文件中进行配置

# 导入安装的插件
import AutoImport from 'unplugin-auto-import/vite'
# 进行插件配置
export default defineConfig({
	plugins: [
	AutoImport({
		dts:'src/typings/auto-imports.d.ts',
		imports:['vue', 'uni-app', 'pinia'],
		dirs:['src/composables']
	})
	],
});

5.3、vue语法糖支持

可查阅官方文档：https://vue-macros.dev/features/reactivity-transform.html

安装插件

# cmd
pnpm add -D @vue-macros/reactivity-transform

开启语法糖

// vite.config.ts
import ReactivityTransform from '@vue-macros/reactivity-transform/vite'

export default defineConfig({
  plugins: [ReactivityTransform()],
})

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["@vue-macros/reactivity-transform/macros-global" /* ... */]
  }
}

5.3、使用pinia进行在状态管理

pinia 官网：https://pinia.vuejs.org/

pinia 中文手册：http://pinia.cc/

安装插件

# cmd 安装
pnpm i pinia@2.0.30 pinia-plugin-persistedstate@3.0.2 -S

main.ts 引入Pinia

// main.ts
import { createPinia } from 'pinia';
import { createSSRApp } from 'vue';
import { createPersistedState } from 'pinia-plugin-persistedstate';
import App from './App.vue';

import 'uno.css';

// 引入Pinia和持久缓存的设置
const pinia = createPinia().use(
  createPersistedState({
    storage: {
      getItem(key: string) {
        return uni.getStorageSync(key);
      },
      setItem(key: string, value: string) {
        uni.setStorageSync(key, value);
      },
    },
  })
);

export function createApp() {
  const app = createSSRApp(App).use(pinia);
  return {
    app,
  };
}

5.4、测试pinia

src根目录新建composables目录（用于放置Pinia配置文件）

持续更新中…