UniApp+Vue3实战微信小程序开发。

全栈开发：UniApp + Vue3 + 微信小程序实战

UniApp 作为跨平台开发框架，结合 Vue3 的响应式特性和微信小程序的生态，能够快速构建高性能应用。以下从项目结构、前后端交互到部署上线，详细解析全栈开发流程。

---

项目初始化与配置

使用 HbuilderX 或命令行创建 UniApp 项目：

npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue uniapp-demo

选择默认模板后，修改 manifest.json 配置微信小程序 AppID：

{
  "mp-weixin": {
    "appid": "your-wechat-appid",
    "setting": {
      "urlCheck": false
    }
  }
}

安装必要依赖：

npm install pinia axios uniview-ui

---

Vue3 组合式 API 实践

在 pages/index/index.vue 中使用组合式 API 管理状态：

<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const loading = ref(false)

const fetchData = async () => {
  loading.value = true
  await userStore.login({ username: 'admin', password: '123456' })
  loading.value = false
}
</script>

<template>
  <view class="container">
    <button @click="fetchData" :disabled="loading">
      {{ loading ? '登录中...' : '一键登录' }}
    </button>
  </view>
</template>

Pinia 状态管理示例 (stores/user.js)：

import { defineStore } from 'pinia'
import { loginAPI } from '@/api/user'

export const useUserStore = defineStore('user', {
  state: () => ({ token: '' }),
  actions: {
    async login(params) {
      const res = await loginAPI(params)
      this.token = res.data.token
    }