uniapp v3 搭建项目使用官方推荐命令

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

或者是使用 uniapp官方gitee 模板库

在项目启动前UI调用，建议使用 扩展组件（uni-ui）里面有很多组件，不能满足需求自己可以手动修改 uni_modules 为在插件市场下载出来的插件目录（uni-app官方维护的组件库,能够兼容vue3）

需要安装插件

自动引用components文件夹里面的组件，解放双手 （编译到小程序会有BUG,必须要手动引用）

npm install unplugin-vue-components
1

需要在 vite.config.ts 文件里面配置

import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { resolve } from 'path';
export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, '.', 'src') // 设置 @ 指向 src
    }
  },
  plugins: [
    uni(),
    Components({// 按需引入
      dts: true,
      dirs: ['src/components'], // 按需加载的文件夹
      resolvers: [ElementPlusResolver()] // ElementPlus按需加载
    }),
  ],
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

官方的cli 脚手架默认是 vuex 建议使用 pinia（官方推荐的状态管理）

区分开发环境和测试环境

---

新建 .env.development 文件（开发环境）

文件内容

VITE_APP_BASE_URL=后端域名
1

新建 .env.production 文件 （正式环境）

VITE_APP_BASE_URL=正式环境
1

---

在 package.json 文件修改

开发环境

 "dev:h5": "uni"  替换  "dev:h5": "uni development",
1

正式环境

 "build:h5": "uni build", 替换  "build:h5": "uni build production",
1

关于components文件夹里面命名

不知道是uni-app的BUG还是编辑器的BUG

当时组件文件夹命名为 xf-choose-data/index 或者 xf-choose-data/xf-choose-data 会导致编译不出小程序代码，导致小程序代码只有默认代码，不会有编译代码

建议使用驼峰命名或者是xx-xx，.vue文件使用index.vue

关于 Vue3 + script setup + TS 和什么时候使用 setup 函数

由于使用的是uni-app 里面有些BUG导致所有页面不能都使用 Vue3 + script setup + TS 这个模式，只能页面没有组件的情况。
有组件的情况要使用，setup 函数，不然在小程序平台，组件编译不上，或者是对应JS文件里面没有JS代码

关于自定义导航和问题

建议使用 uni-nav-bar 组件

自定义导航与小程序胶囊对齐方式

关于微信获取手机码号

个人小程序账户是获取不了用户手机号码，必须要认证为企业，然后再去微信认证（需要交纳300的认证费）

关于测试环境请求不了数据接口

除了真机调试都需要开启开发者模式才能能正常的请求接口
真机调试

关于正式环境和开发工具

在开发工具能够正常访问接口，以及正常请求数据

这个是应为在工具里面勾选了，如果不勾选就不能请求数据

明明在工具能够请求数据，怎么到了正式环境就请求不了数据了

1. 需要登录 微信公众平台
2. 找到开发管理
3. 找到开发设置
4. 设置 request 请求域名 如果有文件上传或者是其他的请求，需要添加对应的请求域名，（*注需要需要备案，并且需要https）
5. 设置完成后，打开正式环境就能够正常请求数据了
6. 如果在工具取消了合法域名验证，同时在微信公众平台设置了安全域名还是请求不了数据
   在工具中刷新下就可以了