uni-app vue3+ts+vite开发小程序采坑说明-Toy模板网

这篇具有很好参考价值的文章主要介绍了uni-app vue3+ts+vite开发小程序采坑说明。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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

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

需要安装插件

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

npm install unplugin-vue-components

需要在 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按需加载
    }),
  ],
})

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

区分开发环境和测试环境

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

文件内容

VITE_APP_BASE_URL=后端域名

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

VITE_APP_BASE_URL=正式环境

在 package.json 文件修改

开发环境

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

正式环境

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

关于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的认证费）
uni-app vue3+ts+vite开发小程序采坑说明

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

除了真机调试都需要开启开发者模式才能能正常的请求接口
真机调试
uni-app vue3+ts+vite开发小程序采坑说明

uni-app vue3+ts+vite开发小程序采坑说明

关于正式环境和开发工具

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

这个是应为在工具里面勾选了，如果不勾选就不能请求数据
uni-app vue3+ts+vite开发小程序采坑说明

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

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

关于小程序打开外部链接（webivew）

小程序内部可以使用webivew 打开，但是有限制
web-view
基础库 1.6.4 开始支持，低版本需做兼容处理。
功能描述
承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用。

客户端 6.7.2 版本开始，navigationStyle: custom 对 web-view 组件无效

当链接打不开，出现下面截图内容

uni-app vue3+ts+vite开发小程序采坑说明
需要登录微信公众平台找到开发管理》开发设置，下面有一个《业务域名》添加对应业务域名后需要下载校验文件放置对应服务器根域名即可 * （可能存在缓存，建议删除小程序后重新加载），注意不要更改文件名
uni-app vue3+ts+vite开发小程序采坑说明

如果配置后还打不开文章来源地址https://www.toymoban.com/news/detail-486828.html

检查提示绑定业务域名是否跟在小程序后台绑定的域名相同
在开发工具中刷新一下，（有可能是配置后业务域名没有通过到开发工具上面）
在跳转到webivew 页面使用 encodeURIComponent(xx) 来序列化参数到webivew 页面使用 decodeURIComponent（），因为有可能是参数传输后url 地址转译了，所以建议使用使用前面二个函数来处理