uni-app 小程序项目运行配置

508 阅读2分钟

一、HBuilderX相关配置

首次运行配置

使用HBuilderX创建的项目,首次运行项目之前需要配置微信开发者工具的路径。工具-设置-运行设置-微信开发工具路径image.png

同时,微信开发者工具也要开启服务端口。设置-安全-服务端口 image.png

sass安装

HBuilderX 的很多功能需要安装插件,其中sass就要安装插件。如果没有安装插件,项目启动就会报错。

企业微信截图_16671862287281.png

安装步骤:

  1. 打开HBuilderX,工具-插件安装-前往插件市场安装 image.png
  2. 在插件市场搜索sass image.png
  3. 双击打开搜索的结果,并下载。 image.png
  4. 下载后,将zip包解压到HBuilderX的 plugins目录。注意:目录名字必须是compile-node-sass image.png
  5. 重启 HBuilderX 软件。重启 HBuilderX 软件。重启 HBuilderX 软件。
  6. 打开HBuilderX,工具-外部命令插件配置-compile-node-sass-package.json,对 “scss/sass编译”插件进行配置。

image.png

  1. 配置完插件后,再次重启 HBuilderX 软件。这样,当我们编写 SCSS 代码后,Ctrl+S 后,就会自动生成 CSS 文件。

参考文档:

二、微信开发者工具相关配置

微信开发者工具端口号开启

首次需要微信开发者工具开启服务端口。设置-安全-服务端口 image.png

安装企业微信小程序模拟器

  1. 安装:对于企业微信项目,需要安装企业微信模拟器。设置-拓展-模拟器插件-企业微信小程序模拟器 image.png
  2. 切换企业微信模拟器 微信开发者工具默认模拟器是小程序模式,需要切换到企业微信模拟器模式image.png

三、关于运行

运行有两种方式:

  1. HBuilder运行:运行-运行到小程序模拟器。运行成功后,会自动打开微信开发者工具。 image.png
  2. 在编译器(vscode)运行。根据package.json里的scripts配置的启动命令运行项目 image.png