WebStorm 快速上手 Uni-App 项目：微信小程序 + 移动端全攻略

2023-10-05 22:32:27

WebStorm 中 Uni-App 项目入门指南

在当今移动开发领域，跨平台应用框架正变得越来越流行。Uni-App 是一个广受认可的框架，它允许开发者使用单一代码库构建适用于多个平台的应用，包括 iOS、Android 和微信小程序。本教程将指导你使用 WebStorm 入门 Uni-App 项目，一个流行的开发环境。

准备工作

在开始之前，你需要确保安装了以下软件：

WebStorm
Uni-App CLI
微信开发者工具
HBuilder

如果你还没有安装这些软件，请前往相应官方网站下载并安装。

配置 DCloud APPID 和微信小程序 APPID

打开微信开发者工具，并使用你的微信账号登录。
点击开发 > 新建项目 ，选择 空白项目 。
在项目名称和项目目录中输入你的项目名称和目录路径，然后点击确定。
在项目中找到 manifest.json 文件，并将其打开。
在 manifest.json 文件中，找到 appid 字段，并将其替换为你自己的 DCloud APPID。
保存 manifest.json 文件。

创建 Uni-App 项目

打开 WebStorm，并创建一个新的项目。
在 项目类型 中选择 Uni-App ，然后点击创建。
在 项目名称 和 项目目录 中输入你的项目名称和目录路径，然后点击确定。
在弹出的对话框中，选择 默认模版 ，然后点击确定。

配置运行环境

在 WebStorm 中，打开运行 > 编辑配置 。
在名称字段中输入你的项目名称，然后选择 Uni-App 作为 运行方式 。
在 Uni-App CLI 字段中输入你的 Uni-App CLI 的安装路径。
在 项目路径 字段中输入你的项目路径。
在 HBuilder 字段中输入你的 HBuilder 的安装路径。
点击确定。

启动并运行项目

在 WebStorm 中，点击运行 > 运行。
项目将开始运行，并在 HBuilder 中打开。
在 HBuilder 中，点击运行 > 运行到模拟器 。
项目将在模拟器中运行。

代码示例

// App.vue
<template>
  <div id="app">
    <p>Hello, Uni-App!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello, Uni-App!'
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>