一、开发环境搭建

uni-app官方推荐用Hbuilder作为开发IDE，我习惯用vscode，下面是基本操作。

1. 用cli生成uni-app vue3+ts 项目：

npx degit dcloudio/uni-preset-vue#vite-ts hello-uniapp

我这边初始化失败，来自github的依赖包存在网格问题，官方提供gitee上的备选模板库，直接下载解压使用即可。
gitee
具体node版本要求和其它库依赖参考uniapp官网说明。

2. 用vscode打开项目 hello-uniapp 并安装uniapp vscode扩展
   
3. 打开项目package.json文件，看看有哪些依赖和命令并 npm i安装依赖
   

二、开发调试

1. 运行命令 npm run dev:mp-weixin实时编译vue3项目到微信小程序项目dist；

2. 去微信小程序网站注册开发者帐号，申请appid，下载官方IDE；

3. 安装微信官方ide并打开，导入uniapp项目的构建目录dist下的微信小程序项目；
   

4. 在vscode中修改vue组件，会自动编译，微信ide中会实时更新预览效果；
   

5. 点开预览功能可以用手机扫描实现真机调试。
   

6. 如果真机显示效果和预览效果不一致，报错信息如下：

servicewechat.com:0 SystemError (jsEnginScriptError)
Can't find variable: __wxAppCode__
ReferenceError: Can't find variable: __wxAppCode__
recurseUsingComponents@https://lib/WASubContext.js:1:423414
injectComponentsRecursively@https://lib/WASubContext.js:1:427253
es@https://lib/WASubContext.js:1:420454
At@https://lib/WASubContext.js:1:465048
create@https://lib/WASubContext.js:1:464603
@https://lib/WASubContext.js:1:472883
@https://lib/WASubContext.js:1:438130
@https://lib/WASubContext.js:1:474673
@https://lib/WASubContext.js:1:438130
@https://lib/WASubContext.js:1:482025
@https://lib/WASubContext.js:1:438130
wr@https://lib/WASubContext.js:1:482967
@https://lib/WASubContext.js:1:437204
@https://lib/WAServiceMainContext.js:1:927212
emitInternal@https://lib/WAServiceMainContext.js:1:1639246
p@https://lib/WAServiceMainContext.js:1:1173049
b@https://lib/WAServiceMainContext.js:1:1217469
D@https://lib/WAServiceMainContext.js:1:2721343
@https://lib/WAServiceMainContext.js:1:2722570
@https://lib/WAServiceMainContext.js:1:2723038
@https://lib/WAServiceMainContext.js:1:1179492
@https://lib/WAServiceMainContext.js:1:927311
emit@https://lib/WAServiceMainContext.js:1:1639157
@https://lib/WAServiceMainContext.js:1:1290736
@https://lib/WAServiceMainContext.js:1:1173506
@https://lib/WAServiceMainContext.js:1:1588355
@https://lib/WAServiceMainContext.js:1:394271
_emit@https://lib/WAServiceMainContext.js:1:394187
emit@https://lib/WAServiceMainContext.js:1:394217
emit@[native code]
emit@https://lib/WAServiceMainContext.js:1:393463
subscribeHandler@https://lib/WAServiceMainContext.js:1:401929
dispatchBridgeMessages@https://lib/WAServiceMainContext.js:1:43945
@https://lib/WAServiceMainContext.js:1:3155691
@https://lib/WAServiceMainContext.js:1:44127
K@https://lib/WAServiceMainContext.js:1:332589
@https://lib/WAServiceMainContext.js:1:332815
S@https://lib/WAServiceMainContext.js:1:302201
servicewechat.com:0 Tue Jan 27 2026 14:52:44 GMT+0800 (中国标准时间) Page route 错误(system error)

可能是真机依赖微信小程序的sdk没有推送到手机。在本地设置中点击推送后一般能解决。