移动端
edit | blame | history | raw

掌控智飞

npm install pnpm -g
pnpm install
pnpm run dev

node：16.18.0
npm：更换为淘宝镜像
pnpm：8.6.12

h5更新步骤

打开软件,发行,自定义发行，选择对应的环境

然后把代码拷贝到服务器上
测试
/software/service/drone/web/drone-app
正式
/app/service/drone/web/drone-app

app更新步骤

修改 /src/config 里面的development的参数，改为对应环境的对应变量

小程序app更新步骤

  1. 修改 /src/config 里面的development的参数，改为对应环境的对应变量
  2. hbuild里面点击运行 =》到小程序 =》自动打开了小程序 =》
  3. 调试好=》上传 =》微信公众号 =》 提交审核

开发者文档

  • 本项目大量采用webview方式开发，只有登录页是原生的uniapp，其他的都是webview
  • 登录了之后在userStore里面存了用户信息（包括token）
  • 每个页面都会走WebViewPlus组件
  • WebViewPlus里面有个属性src都会走getWebViewUrl方法
  • WebViewPlus会监听webview发送给app的消息，统一处理
  • getWebViewUrl方法里面 会把 路径自动拼接上userInfo（包括token）和一些其他参数

  • 然后到webview这里的 permission.js会去自动接收这些参数并存储到stroe里面

webview跟app通信

h5或app的webview

webview
const transmitData = { data: { type: 'submitSuccess', fun: 'add' } }
uni.postMessage(transmitData)

app 接收到了 然后再跳页面

uni.switchTab({
      url: `/pages/work/index?addLog=111`,
});

微信小程序的webview 只能在微信里面直接跳，postMessage无效

webview

// 跳转到小程序页面
wx.miniProgram.navigateTo({ url: '/pages/xxx/xxx' })
 
// 重定向到小程序页面
wx.miniProgram.redirectTo({ url: '/pages/xxx/xxx' })
 
// 切换Tab页
wx.miniProgram.switchTab({ url: '/pages/xxx/xxx' })
 
// 返回上一页
wx.miniProgram.navigateBack({ delta: 1 })
 
// 退出小程序
wx.miniProgram.exit()
 
// 获取小程序环境信息
wx.miniProgram.getEnv(function(res) {
  console.log(res.miniprogram) // true
})

uniapp 团队协作开发实践模板(Vue3)

GitHub Repo stars
GitHub forks
node version
pnpm version
GitHub package.json version (subfolder of monorepo)
GitHub License

使用uniapp+vite+vue3+typescript+uview-plus+unocss 搭建的适合团队协作的快速开发模版

uview-plus官方文档

本项目集众多项目的优点，打造最适合团队协作开发的项目模板。

国内仓库地址：https://gitee.com/ouyang/uniapp-vue3-template

在线预览地址：https://oyjt.github.io/uniapp-vue3-template/

特性

  • [x] 集成uview-plus3.0 ui库
  • [x] 支持多环境打包构建
  • [x] 使用pinia状态管理
  • [x] 封装网络请求，并支持Typescript
  • [x] 支持路径别名
  • [x] 支持自动加载组件和API
  • [x] 自动校验git提交代码格式
  • [x] 集成ESLint、StyleLint、EditorConfig代码格式规范
  • [x] Typescript支持
  • [x] 集成UnoCSS
  • [x] 集成iconify图标库
  • [x] 集成z-paging下拉刷新功能
  • [x] 添加页面跳转拦截，登录权限校验
  • [x] 支持token无感刷新
  • [x] 项目分包
  • [x] 集成小程序隐私协议授权组件
  • [x] 项目构建自动删除本地图片并替换本地图片路径为线上图片
  • [x] 集成包体积视图分析插件
  • [x] 支持国际化
  • [x] 集成alova网络请求（具体使用请切换到 feature/alova 分支）
  • [x] 集成axios网络请求（具体使用请切换到 feature/axios 分支）
  • [x] 支持新的wot-design-uni库（具体使用请切换到feature/wot-design-uni分支），wot-design-uni官方文档
  • [x] 支持新的shadcn-ui库（具体使用请切换到feature/shadcn-ui分支），shadcn-ui官方文档
  • [x] 更好的 AI 支持，适配cursor和trae规则，集成MCP插件

uniapp插件推荐

目录结构

项目中采用目前最新的技术方案来实现，目录结构清晰。
uniapp-vue3-project ├ build vite配置统一管理 │ ├ config │ └ plugins ├ env 环境变量 ├ scripts 一些脚本 │ ├ post-upgrade.js 依赖库清理 │ └ verify-commit.js git提交检验 ├ src │ ├ api 接口管理 │ ├ components 公共组件 │ ├ hooks 常用hooks封装 │ ├ locale 国际化语言管理 │ ├ pages 页面管理 │ ├ plugins 插件管理 │ ├ router 路由管理 │ ├ static 静态资源 │ ├ store 状态管理 │ ├ utils 一些工具 │ ├ App.vue │ ├ main.ts │ ├ manifest.json 项目配置 │ ├ pages.json 页面配置 │ └ uni.scss 全局scss变量 ├ types 全局typescript类型文件 │ ├ auto-imports.d.ts │ ├ components.d.ts │ ├ global.d.ts │ └ module.d.ts ├ LICENSE ├ README.md ├ cz.config.js cz-git配置 ├ eslint.config.js eslint配置 ├ index.html ├ package.json ├ pnpm-lock.yaml ├ stylelint.config.js stylelint配置 ├ tsconfig.json ├ uno.config.ts unocss配置 └ vite.config.ts vite配置

vite插件管理

build
├ config            vite配置
│  ├ index.ts       入口文件
│  └ proxy.ts       跨域代理配置
└ plugins           vite插件
   ├ autoImport.ts  自动导入api
   ├ cleanImage.ts  自动清理图片文件
   ├ component.ts   自动导入组件
   ├ index.ts       入口文件
   ├ replaceUrl.ts  自动替换图片地址为CDN地址
   ├ unocss.ts      unocss配置
   └ visualizer.ts  包体积视图分析

接口管理

api
├ common       通用api
│  ├ index.ts
│  └ types.ts
├ user         用户相关api
│  ├ index.ts
│  └ types.ts
└ index.ts     入口文件

hooks管理

hooks
├ use-clipboard  剪切板
│  └ index.ts
├ use-loading    loading
│  └ index.ts
├ use-modal      模态框
│  └ index.ts
├ use-permission 校验权限
│  └ index.ts
├ use-share      分享
│  └ index.ts
└ index.ts       入口文件

页面管理

pages
├ common           公共页面（分包common）
│  ├ login
│  │  └ index.vue
│  └ webview
│     └ index.vue
└ tab              主页面（主包）
   ├ home
   │  └ index.vue
   ├ list
   │  └ index.vue
   └ user
      └ index.vue

状态管理

store
├ modules
│  ├ app          app状态
│  │  ├ index.ts
│  │  └ types.ts
│  └ user         用户状态
│     ├ index.ts
│     └ types.ts
└ index.ts        入口文件

工具方法

utils
├ auth                token相关方法
│  └ index.ts
├ common              通用方法
│  └ index.ts
├ modals              弹窗相关方法
│  └ index.ts
├ request             网络请求相关方法
│  ├ index.ts
│  ├ interceptors.ts
│  ├ status.ts
│  └ types.ts
└ index.ts            入口文件

使用方法

# 安装依赖
pnpm install

# 启动H5
pnpm dev:h5

# 启动微信小程序
pnpm dev:mp-weixin

发布

# 构建开发环境
pnpm build:h5
pnpm build:mp-weixin

# 构建测试环境
pnpm build:h5-test
pnpm build:mp-weixin-test

# 构建生产环境
pnpm build:h5-prod
pnpm build:mp-weixin-prod

更新uniapp版本

更新uniapp相关依赖到最新正式版
bash pnpx @dcloudio/uvm@latest
或者执行下面的命令
bash pnpm uvm

在升级完后，会自动添加很多无用依赖，执行下面的代码减小保体积
pnpm uvm-rm

v3 代码块

在 vue 文件中，输入 v3 按 tab 即可快速生成页面模板，可以大大加快页面生成。

原理：基于 VSCode 代码块生成。

登录鉴权

  1. 页面如果需要登录才能访问，只需在 pages.json 文件中需要鉴权的页面下设置 needLogin 属性设置为 true 即可，比如
    { "pages": [ { "path": "pages/test/test", "needLogin": true, "style": { "navigationBarTitleText": "", }, } ] }

  2. 如果有tab页面需要登录才能访问，上面的设置在小程序中点击tabbar时无效，因为在小程序中点击tabbar不会触发uni.switchTab方法，下面是官方给出的回复及解决方案。

拦截uni.switchTab本身没有问题。但是在微信小程序端点击tabbar的底层逻辑并不是触发uni.switchTab。所以误认为拦截无效，此类场景的解决方案是在tabbar页面的页面生命周期onShow中处理。

可参考pages/tab/user/index.vue中的代码，核心代码如下：
```

```

注意事项

  1. 微信小程序开发者工具中内置的打包分析不准确，本项目使用了rollup-plugin-visualizer来分析小程序包体积，默认不开启，有需要的移除相关注释即可
  2. 自动构建处理本地图片资源，使用了vite-plugin-clean-build和vite-plugin-replace-image-url这两个插件，默认不开启相关功能，如果需要使用再build/vite/plugins/index.ts文件中移除相关注释即可

  3. 使用vite-plugin-replace-image-url插件，想要图片自动替换生效，需要在项目中使用绝对路径引入图片资源，如下示例所示。

    示例一：style中的图片使用
    <template> <view :style="`background-image: url('${bgImg}')`"> ... </view> </template> <script setup lang="ts"> import bgImg from '@/static/images/bg_img.png'; </script>

    示例二：js中的图片使用

    <script setup lang="ts">
import walletIcon from '@/static/images/icon_wallet.png';
const menuList = [
  {
    name: 'wallet',
    title: '钱包',
    icon: walletIcon,
  },
  ...
];
</script>

    示例二：css中的图片使用
    <style lang="scss"> .icon { background-image: url('@/static/images/icon.png') } </style>

  4. 部分用户构建微信小程序如下错误，原因是微信开发者工具缺失了对应的依赖。
    This @babel/plugin-proposal-private-property-in-object version is not meant to be imported.
    此时升级微信开发者工具，或者安装@babel/plugin-proposal-private-property-in-object依赖即可解决问题。

  5. shadcn-ui 分支采用最新的 tailwindcss v4.1 版本，因为现阶段的 unocss 对于最新版 tailwindcss 支持还不够完善。
    shadcn-ui并不太适合移动端使用，如果不喜欢可以移除，只保留纯净的框架。

README 12 KB view | edit | raw | blame | history