众所周知 Hbuilder X 是uniapp 的标配,而 vscode 作为宇宙第一编辑器怎么能不行呢,那么如何让uniapp的项目在 vscode 中开发、运行呢?一起来探索一下吧!!!
vscode配置
安装插件: uni-helper
支持 vscode 中编写并实时更新 HBuilderX 的代码和预览
cli 创建项目
根据 uniapp 官方介绍的 vue-cli 命令行创建方法
全局安装 vue-cli 3.x(如已安装请跳过此步骤)
npm install -g @vue/cli
创建uni-app项目
vue create -p dcloudio/uni-preset-vue uniapp-demo
选择默认模板 项目创建完成
运行、发布 项目
npm run dev:%PLATFORM%
npm run build:%PLATFORM%
package.json 中的命令:
npm run serve // h5 浏览器运行
npm run dev:mp-weixin // 微信小程序
在本地运行小程序时会自动打包出一个 dist 文件,首次运行小程序需要在微信开发中工具中导入项目。
一键运行 npm 脚本
或者使用 npm 脚本 手动执行项目的打包运行,一键运行 npm 更便捷
将 资源管理器下的 npm 脚本栏打开
在侧边栏npm脚本下会生成项目对应的 npm 操作,点击运行即可执行对应的操作
为什么使用 cli 模式创建项目呢?
如果想用其他ide开发uni-app,只能使用cli模式
因为其他ide没有内置uni-app的编译器,所以其他ide开发uni-app,只能把编译器安装在项目下,也就是cli创建的项目格式。
HBuilderX可视化创建、运行、发布项目,底层调用的也是npm的run、build等命令。只是编译器不在项目下,而是在HBuilderX的目录下。
运行 cli 命令行报错
拉取 git 代码到本地
执行命令行时替换成项目地址,运行即可创建
vue create -p D:\Project\uniapp\uni-preset-vue uni_demo
vscode 中运行小程序
VSCode跟Hbuilder x 不同的是,VSCode不会自动在微信开发者工具导入项目并打开,我们需要手动导入项目,仅在首次运行小程序时需要手动导入。
-
vscode中运行小程序的项目 yarn run build:mp-weixin 在执行过程中会自动将项目打包到 dist 文件下
-
在微信开发者工具中导入小程序项目(在项目导入之前需要先打包)
需要注意的是 开发者工具选择的 appId,则需要与 manifest.json 文件中的 appId 保持一致,否则开发者工具会报错
若选择项目后出现无法找到项目对应的 app.json 或 project.config.json 文件的提示,需要找到项目打包后的 dist 文件
app.json 或 project.config.json 文件 位于dist 目录下: …/dist/dev/map-weixin
项目导入成功!!!
导入后若页面为空白,打开控制台查看是否存在报错
检查发现报错提示为: window.WeixinJSBridge.beforeinvoke is not a function
解决方案: 调整 基础库的版本
将基础版本库下调至 2.24.2
此时项目能运行,但仍有报错 仍为版本库问题,可能需要升级 微信开发者工具版本
按照提示更新版本
版本升级后不会再出现运行报错