uni-starter创建新页面踩坑

原创已于 2025-03-24 17:47:25 修改 · 207 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #uni-app #uni-starter

于 2025-03-24 17:46:29 首次发布

在新建uni-starter项目后，和往常一样新建页面，但无法打开新页面，main.js:25 [Vue Router warn]: No match found for location with path "/pages/test"

uni-app默认在 pages.json 配置路由，无需其他操作

原因：新建页面HBuilderX默认把新页面加在 pages 数组末尾，而末尾有一个条件编译，运行环境导致此页面没有编译。

移到条件编译外即可

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Sucrapipple

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

阿里云开发uniapp之uni-starter

GLimerence的博客

05-09

2030

uni-starter使用

基于Kafka+Flink+ClickHouse打造轻量级点击流实时数仓

热门推荐

283301717的博客

08-23

4万+

解决 vue 刷新浏览器 [Vue Router warn]: No match found for location with path 警告

uni-starter和uni-admin搭配使用的时候，为什么文章在uniadmin里不能显示呢？

pvmsmfchcs的博客

04-03

1801

1，uniapp的搭建我们用hbuilde 2，创建项目unistarter，创建项目uniadmin 3，unistarter关联云空间，uniadmin关联关联其他项目云空间，保证两个项目在同一个云空间既就是多个项目同一个云空间， 4，用自带的初始化json初始化数据库，数据库的读取一定是在云端，但是云函数的调用可以在本地，目的是为了运行时候加快运行速度 5，添加文章列表插件到uniadmin服务器上去，按照安装的插件的步骤进行安装设置，即可从后台端读取到前台的数据，我一般添加的文章后台是如图的

uni-starter创建App项目最全流程（日后还有其他功能会不断更新）

GLimerence的博客

05-18

1694

关于使用uni-starter创建App的流程

uni-starter：云端一体应用快速开发的新选择

chenchuang0128的博客

06-24

1338

通过uni-starter，开发者可以快速构建出功能完善、性能优越的应用，并快速迭代和上线。通过uni-admin，开发者可以方便地管理应用的升级、推送、权限等设置，而uni-starter则负责实现这些设置的具体功能。一个应用有很多通用的功能，比如登录注册、个人中心、设置、权限管理、拦截器、banner... ，uni-starter将这些功能都已经集成好。登录注册（用户名密码登录、手机号验证码登录、APP一键登录、微信登录、Apple登录、微信小程序登录、手机微信扫码登录、微信公众号内登录）

uni-starter开源项目学习

weixin_46398352的博客

10-09

2104

uni-starter开源项目学习

uniapp之uni-starter小程序多端研发框架搭建与项目实践

JINGWHALE

06-23

1740

随着移动互联网的飞速发展，无数移动APP琳琅满目；在移动App的发展的基础上，衍生了小程序、轻应用技术，它随时可用，但又无需安装卸载。uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序等多个平台。AIPHD科技文教专注于科技文教，基于uni-app，研发了AIPHD英语、AI智能古诗、AIPHD科技心理等具有独立功能的APP产品矩阵，同时将AIMANT星球作为情感辅助。

使用 uni-starter 和 uni - admin 搭建APP（小程序）和后台管理系统，15分钟搞定，开局完成50% ，前后端包括云服务一键搞定（目前免费使用阿里云版本，腾讯云也有免费）

烟溪彭于晏的博客

07-23

1万+

本次我们搭建的项目是APP（uni-app支持多端运行，包括微信小程序、支付宝小程序、安卓App、iOSApp等等）和APP的后台管理系统（适应手机和PC端）。每一个都可以当全栈，只要有编程基础，当然了解vue最好啦我们选择基于uni-app的uni-starter开发app，后台系统选择基于uni-app的uni-admin为什么选uni-starter和uni-admin？uni-starter是一个集成了大量商用项目常见功能的，云端一体应用快速开发基本项目模版。+..................

【uni-app】uni从入门到放弃之踩坑集合

12-21

1.使用vue-cli创建的uni-app的静态资源必须存放在static文件夹下，尝试了绝对路径，相对路径都报错，找了半个多小时才度娘出来，根据：https://ask.dcloud.net.cn/question/76738 2.vue组件数据单向流设计模式今天使用uni写组件的试试，怪自己学识短浅遇到了这个vue的注意事项，就是vue父子组件数据单向流的原则。比如说父组件传入一个value ，子组件props：{value}接收，如果要更改传过来的value这样属于违背了vue 的设计原则，如果value是基本类型vue会报错，如果value是引用类型则不会报错，因为引用类型

uni-starter(六)数据库

sinat_26699091的博客

08-31

327

下面是统计方便的数据库设计，表格有许多，但是用得不多。

uni-starter 体验笔记

wenxi2367的博客

07-09

2204

uni-starter和uni-admin初始化

寬真

04-11

881

uni-admin似乎无法直接关联到uni-starter的服务空间，会一直提示需要初始化数据库，所以选择在同一个服务空间初始化数据库后再让uni-admin关联到uni-starter的服务空间下，这样貌似才能够同步用户数据。最新的一次，直接先下载的uni-starter，然后关联到云空间，初始化database，将数据库这些上传到了云空间，新建了uni-id文件夹及其config.json。，这样运行uni-admin竟然没有报任何错误，新建账号也可以和uni-starter互通。

uni-starter V2.1.4分析备忘录(一)

sinat_26699091的博客

08-17

602

uni-starter是uniapp的得意之作，与uni-admin一起组成了uni程序的根骨。学习和应用uniapp,当先了解uni-starter。然而uni-starter的版本太多，更新又太快，所以我们只能以当前（2023-8-16）的最新版V2.1.4为例，说明之。

uni-starter V2.1.4(三)登录逻辑

sinat_26699091的博客

08-21

1708

现在我们来分析这个uni-starter的核心逻辑，这个核心逻辑当然就是登陆了。这个例子项目的主要功能就是演示如何登录！一、uniIdRouter自动路由 uniIdRouter 是一个运行在前端的、对前端页面访问权限路由进行控制的方案。大多数应用，都会指定某些页面需要登录才能访问。以往开发者需要写不少代码。现在，只需在项目的 pages.json内配置登录页路径、需要登录才能访问的页面等信息，uni-app框架的路由跳转，会自动在需要登录且客户端登录状态过期或未登录时跳转到登录页面。结合以下代码及注释了

uni-starterV2 使用常见问题

技术分享

11-01

2848

uni-starter v2 开发使用常见问题

【uni-app踩坑记录】uni-starter本地微信一键授权登录失败 - Invalid uni-id config file

Kuroko's Development Notes

03-22

7675

uni-starter 云端一体项目模板本地微信一键授权登录失败 loginByWeixin 报错 [uni-id-co] Invalid uni-id config file 或者 `Error: errCode: 40013 | errMsg: invalid appid`

关于 [Vue Router warn]: No match found for location with path 的解决方法（转）

lllnana

12-07

1万+

添加段代码即可找到路由配置文件，我的路径是。

将uni-starter改造成自习室预约小程序

04-25

<think>好的，我现在需要帮助用户将uni-starter模板改造成自习室预约小程序。首先，我需要回顾用户提供的引用内容，尤其是关于uni-starter和uni-admin的信息。用户提到uni-starter已经集成了很多通用功能，比如登录注册、权限管理等，这对快速开发很有帮助。同时，用户想了解如何基于uni-starter进行改造，具体涉及配置、组件修改和功能实现。首先，我需要明确用户的需求。用户的目标是自习室预约系统，所以需要将uni-starter原有的功能（如登录、个人中心）与预约功能结合起来。可能需要调整现有的用户认证模块，添加自习室相关的数据模型，以及实现预约、签到、座位状态管理等功能。接下来，我需要考虑如何利用uni-starter现有的结构。根据引用[1]和[2]，uni-starter已经支持前端直接调用数据库生成页面，这可能简化数据管理。但自习室预约需要特定的数据表，比如座位信息、预约记录，可能需要扩展现有的数据库结构。用户可能需要修改或新增云函数来处理预约逻辑，比如冲突检测、状态更新等。用户之前的回答中提到过使用Redis进行状态同步和WebSocket实时通信，但在uniCloud环境下，可能需要使用uni-push或云数据库的实时监听功能。此外，引用[3]提到静默登录，用户可能需要调整登录方式，避免使用uni-starter的一键登录，转而使用微信静默登录，这需要修改云函数mp-weixin-login。在功能模块方面，用户可能需要以下步骤： 1. 配置项目：修改manifest.json启用相关权限，比如定位、蓝牙等。 2. 数据库设计：创建自习室、座位、预约等集合，可能需要使用uniCloud的数据库。 3. 修改用户认证：将uni-starter的默认登录替换为微信静默登录，调整用户表结构，绑定学号等信息。 4. 开发预约功能：创建座位选择页面，使用地图或列表展示座位状态，实现预约逻辑，包括时间选择、冲突检测等。 5. 集成实时状态：利用uniCloud的实时数据库或云函数触发器更新座位状态，确保前端及时同步。 6. 添加管理功能：使用uni-admin搭建后台，管理座位信息、处理预约异常等。 7. 测试与优化：进行兼容性测试，确保多端运行正常，优化性能，处理高并发情况。可能遇到的问题包括如何实现实时座位状态更新，uniCloud是否支持WebSocket，或者是否需要轮询。根据uniCloud的文档，可以使用watch方法实时监听数据库变化，这可能比WebSocket更适合。另外，预约冲突检测需要在云函数中进行，确保并发请求下的数据一致性，可能需要使用数据库的事务操作。还需要考虑用户权限管理，比如学生和管理员的不同视图，uni-starter的权限管理模块可能需要扩展。自习室预约可能涉及时间段管理，比如允许预约未来几天的时间，需要配置预约规则，这些可以在uni-admin后台进行设置。最后，需要参考用户之前的回答中的技术方案，比如使用Redis和分布式锁，但在uniCloud环境下可能需要使用云函数和数据库自带的事务机制来处理并发。同时，引用[3]中的云函数示例可以用于处理微信登录，将用户信息与自习室预约系统的学号绑定，确保身份验证。</think>#### 基于uni-starter改造自习室预约小程序的分步指南 --- ### 一、基础配置调整 1. **项目初始化** ```bash # 创建新项目（选择uni-starter模板） vue create -p dcloudio/uni-preset-vue#uni-starter my-study-room ``` - 修改`manifest.json`启用微信小程序权限（定位、蓝牙等） - 配置`uni-starter.config.js`关闭不需要的模块（如商城、社交功能） 2. **数据库设计** ```javascript // uniCloud/database/seat.schema.json { "bsonType": "object", "required": ["seat_id", "status"], "properties": { "seat_id": { "bsonType": "string" }, // 如"A1-001" "zone": { "bsonType": "string" }, // 静音区/普通区 "status": { "bsonType": "int", "enum": [0,1,2], // 0空闲 1预约中 2使用中 "defaultValue": 0 }, "device_id": { "bsonType": "string" } // 关联物联网设备 } } ``` --- ### 二、核心模块改造 #### 1. 用户认证改造 ```javascript // 修改uni-id配置（uniCloud/uni-id/config.json） { "wx": { "appid": "your_wechat_appid", "silentLogin": true // 启用静默登录[^3] } } // 前端调用（改造原登录页面） uni.login({ provider: 'weixin', success: async (res) => { const { code } = res; const { token } = await uniCloud.callFunction({ name: 'mp-weixin-login', data: { code } }); uni.setStorageSync('uni_id_token', token); } }); ``` #### 2. 预约功能实现 ```javascript // 云函数：check-seat-availability 'use strict'; const db = uniCloud.database(); exports.main = async (event) => { const { seat_id, start_time, end_time } = event; // 冲突检测：检查时间段重叠的预约 const coll = db.collection('reservation'); const conflict = await coll.where({ seat_id, status: 0, // 只检查有效预约 end_time: db.command.gt(start_time), start_time: db.command.lt(end_time) }).count(); return { available: conflict.total === 0 }; }; ``` --- ### 三、关键组件开发 #### 1. 可视化座位地图 ```vue  <template> <view class="seat-grid"> <view v-for="seat in seats" :key="seat.seat_id" :class="['seat', statusClass[seat.status]]" @click="selectSeat(seat)" > {{ seat.seat_id }} </view> </view> </template> <script setup> const db = uniCloud.database(); const seats = ref([]); // 实时监听座位状态变化 const watcher = db.collection('seat').watch({ onChange: (snapshot) => { seats.value = snapshot.docs; }, onError: (err) => console.error(err) }); </script> ``` #### 2. 预约状态管理 ```javascript // store/seat.js (Pinia状态管理) export const useSeatStore = defineStore('seat', { state: () => ({ currentReservation: null }), actions: { async reserveSeat(seatId, duration) { const res = await uniCloud.callFunction({ name: 'create-reservation', data: { seat_id: seatId, duration } }); this.currentReservation = res.result; } } }); ``` --- ### 四、管理后台搭建 1. **使用uni-admin扩展** ```bash # 安装uni-admin模块 npm install @dcloudio/uni-admin ``` ```javascript // admin/pages/seatManage.vue export default { data() { return { searchForm: { zone: '', status: 0 } } }, methods: { forceRelease(seatId) { uniCloud.database().collection('seat').doc(seatId) .update({ status: 0 }); } } } ``` --- ### 五、高级功能集成 1. **物联网设备对接** ```javascript // 云函数：handle-device-status exports.main = async (event) => { const payload = parseMQTT(event.payload); // 解析硬件上报数据 await db.collection('seat').doc(payload.seat_id) .update({ status: payload.is_occupied ? 2 : 0 }); }; ``` 2. **智能推荐算法** ```javascript // 基于用户历史记录推荐 const history = await db.collection('reservation') .where(`user_id == $env.uid`) .field('seat_id').get(); const recommend = await db.collection('seat') .aggregate() .match({ zone: { $in: userPref.zones } }) .sample({ size: 5 }) .end(); ``` --- ### 六、调试与部署 1. **本地调试** ```bash # 启动H5端调试 npm run dev:h5 # 编译微信小程序 npm run build:mp-weixin ``` 2. **云服务部署** ```bash # 部署云函数 cd uniCloud/cloudfunctions uni-cli deploy --all ``` ---