Uniapp全栈微信小程序开发实战

Uniapp全栈微信小程序开发：Vue3后台实战指南

Uniapp作为跨平台开发框架，结合Vue3和微信小程序生态，能够快速构建全栈应用。以下内容将从项目搭建、核心功能实现到后台对接，通过代码示例展示完整开发流程。

---

项目初始化与配置

创建Uniapp项目时需选择Vue3模板：

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

修改manifest.json配置微信小程序AppID：

"mp-weixin": {
  "appid": "your-wechat-appid",
  "setting": {
    "es6": true,
    "minified": true
  }
}

配置vite.config.js添加别名：

resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src')
  }
}

---

Vue3组合式API应用

用户模块使用setup语法：

// userStore.js
import { ref } from 'vue'
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', () => {
  const token = ref('')
  const login = async (formData) => {
    const res = await uni.request({
      url: '/api/login',
      method: 'POST',
 formData
    })
    token.value = res.data.token
  }
  return { token, login }
})

页面组件中使用Store：

<script setup>
import { useUserStore } from '@/stores/user'
const user = useUserStore()
</script>