【小程序开发】uni-app开发微信小程序基础笔记

一、开发环境搭建

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'tfindvariable: __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 Jan27202614:52:44 GMT+0800(中国标准时间)Page route 错误(system error)

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

三、开发一个小程序游戏DEMO

// TODO