如何创建开发uniapp微信小程序项目？详细步骤教程

推荐阅读：

微信小程序如何上传代码、提交审核、发布代码操作？怎样登录微信公众号平台的小程序和微信公众号后台？_南北极之间的博客-CSDN博客_微信小程序上传根据资料一步步往下做即可。资料在后面：我是扫码登陆的。因为我之前断断续续注册过。我扫描之后。系统让我选择之前注册的账号。在手机上选择好了之后。网页上自动就登陆跳转了。因为我之前已经设置好了。所以这里收起了。可以点开看详情。这里可以设置小程序基本信息，包括名称、头像、介绍及服务范围，开发设置中的服务器域名设置等微信开发者工具下载地址：稳定版 Stable Build | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/devtoohttps://blog.csdn.net/qq_22182989/article/details/116589066

1.创建uni-app

2种创建方法：

第一种方法：HBuilderX可视化界面

具体方法：

利用HbuilderX初始化项目

• 点击HbuilderX菜单栏文件>项目>新建

• 选择uni-app,填写项目名称，项目创建的目录

uni-app支持通过 可视化界面、vue-cli命令行 (opens new window)两种方式快速创建项目。

可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。

开始之前，开发者需先下载安装如下工具：

• HBuilderX：官方IDE下载地址(opens new window)

HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。

下载App开发版，可开箱即用；如下载标准版，在运行或发行uni-app时，会提示安装uni-app插件，插件下载完成后方可使用。

如使用cli方式创建项目，可直接下载标准版，因为uni-app编译插件被安装到项目下了。

#创建uni-app

在点击工具栏里的文件 -> 新建 -> 项目：

选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。

uni-app自带的模板有 Hello uni-app ，是官方的组件和API示例。还有一个重要模板是 uni ui项目模板，日常开发推荐使用该模板，已内置大量常用组件。

#运行uni-app

浏览器运行：进入hello-uniapp项目，点击工具栏的运行 -> 选择自己想运行的环境即可：

发布：

也是按照自己的需求选择：

第二种方法：使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目

• 使用正式版（对应HBuilderX最新正式版）

  vue create -p dcloudio/uni-preset-vue my-project
  

• 使用alpha版（对应HBuilderX最新alpha版）

  vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project
  

• 使用Vue3/Vite版

  • 创建以 javascript 开发的工程（如命令行创建失败，请直接访问 gitee (opens new window)下载模板）

    npx degit dcloudio/uni-preset-vue#vite my-vue3-project
    

  • 创建以 typescript 开发的工程（如命令行创建失败，请直接访问 gitee (opens new window)下载模板）

    npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

此时，会提示选择项目模板（使用Vue3/Vite版不会提示，目前只支持创建默认模板），初次体验建议选择 hello uni-app 项目模板，如下所示：

自定义模板

选择自定义模板时，需要填写 uni-app 模板地址，这个地址其实就是托管在云端的仓库地址。以 GitHub 为例，地址格式为 userName/repositoryName，如 dcloudio/uni-template-picture 就是下载图片模板。

例子：我们这里使用正式版命令：

vue create -p dcloudio/uni-preset-vue my-project

具体步骤：

1.需要电脑提前全局安装vue-cli

环境安装

全局安装vue-cli

npm install -g @vue/cli@4

安装好了之后，继续下一步：

2.打开cmd选择好要安装的目录之后。执行以下命令：

vue create -p dcloudio/uni-preset-vue my-project

3.选择hello uni-app 项目模板

不同模板的区别：

安装好了之后，

4.进入到my-project目录

cd my-project

5.运行项目：

以下2个命令都行

npm run dev
npm run serve

6.查看项目的网页效果

点击网址，就可以查看我们创建的uniapp项目了！

 

7.打包、发布uni-app

npm run dev:%PLATFORM%
npm run build:%PLATFORM%

 8.微信开发者工具里面运行

如果想在微信开发者工具里面运行的话：

首先要先安装好微信开发者工具，配置好之后，

可以在hbuilder x里打开，或者直接在微信开发者工具里导入项目都可以运行。

如果是在hbuilder x里，点击运行到微信开发者工具即可：

效果：

 

使用cli创建项目和使用HBuilderX可视化界面创建项目有什么区别

编译器的区别

• cli 创建的项目，编译器安装在项目下。并且不会跟随HBuilderX升级。如需升级编译器，可以使用 @dcloudio/uvm (opens new window)管理编译器的版本，如 npx @dcloudio/uvm。
• HBuilderX可视化界面创建的项目，编译器在HBuilderX的安装目录下的plugin目录，随着HBuilderX的升级会自动升级编译器。
• 已经使用cli创建的项目，如果想继续在HBuilderX里使用，可以把工程拖到HBuilderX中。注意如果是把整个项目拖入HBuilderX，则编译时走的是项目下的编译器。如果是把src目录拖入到HBuilderX中，则走的是HBuilderX安装目录下plugin目录下的编译器。
• cli版如果想安装less、scss、ts等编译器，需自己手动npm安装。在HBuilderX的插件管理界面安装无效，那个只作用于HBuilderX创建的项目。

开发工具的区别

• cli创建的项目，内置了d.ts，同其他常规npm库一样，可在vscode (opens new window)、webstorm (opens new window)等支持d.ts的开发工具里正常开发并有语法提示。
• 使用HBuilderX创建的项目不带d.ts，HBuilderX内置了uni-app语法提示库。如需把HBuilderX创建的项目在其他编辑器打开并且补充d.ts，可以在项目下先执行 npm init，然后npm i @types/uni-app -D，来补充d.ts。
• 但vscode等其他开发工具，在vue或uni-app领域，开发效率比不过HBuilderX。详见：https://ask.dcloud.net.cn/article/35451(opens new window)
• 发布App时，仍然需要使用HBuilderX。其他开发工具无法发布App，但可以发布H5、各种小程序。如需开发App，可以先在HBuilderX里运行起来，然后在其他编辑器里修改保存代码，代码修改后会自动同步到手机基座。
• 如果使用cli创建项目，那下载HBuilderX时只需下载23.31M的标准版即可。因为编译器已经安装到项目下了。
• 对 cli 使用有疑问，欢迎扫码加入 uni-app 微信交流群讨论：

注意：HBuilderX创建的项目，一样可以使用npm