标签：运行 创建 app 模板 微信 uni HBuilderX

一、创建uni-app项目

（1）第一种方式：

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

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

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

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

        

差别是：HBuilderX创建的项目根目录就是源码，可直接编辑。dist在unpackage目录下。uni-app的编译器在HBuilderX的插件目录下，跟随HBuilderX升级而一起升级。

而cli创建的项目，源码在src下。uni-app的编译器也安装在项目下，不会跟随HBuilderX版本升级而升级，需要自己手动npm update。

（2）第二种方式：

通过vue-cli命令行创建

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

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

2.使用alpha版（对应HBuilderX最新alpha版）

alpha版相当于尝鲜版本，比最新正式版本多出许多功能。

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

3.选择模板

执行了上面命令之后，会提示选择项目模板，这里选择了默认模板

 

 4.运行、发布uni-app

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

%PLATFORM% 可取值如下：这里选取了常用的3种

 二、运行uni-app项目

1.浏览器运行：进入uniDemo1项目，点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，即可在浏览器里面体验uni-app 的 H5 版。

 

 2.运行App到手机或模拟器：连接手机，开启USB调试，进入uniDemo1项目，点击工具栏的运行 -> 真机运行 -> 选择运行的设备，即可在该设备里面体验uni-app。

 

 如手机无法识别，请点击菜单运行-运行到手机或模拟器-真机运行常见故障排查指南。

3.在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。

 

 注意：如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。

 

 注意：微信开发者工具需要开启服务端口 在微信工具的设置->安全中。

4.在支付宝小程序开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 支付宝小程序开发者工具，即可在支付宝小程序开发者工具里面体验uni-app。

 

 5.在百度、字节跳动、QQ、快应用（分联盟和华为）、快手、飞书、360、京东等小程序开发工具里运行：内容同上，不再重复。

 

标签：运行,创建,app,模板,微信,uni,HBuilderX
来源： https://www.cnblogs.com/czhowe/p/16551154.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。