uni-app新手指南

uni-app官网

链接: uni-app官网.

uni-app功能框架图

uni-app 环境搭建

使用uni-app需要安装 HBuilder X 开发者工具，可在HBuilder X 中开发与运行项目，也可以使用VScode、WebStorm等软件开发，最后用HBuilder X 运行。

HBuilder X 开发者工具的下载与使用

下载地址：https://www.dcloud.io/hbuilderx.html

HBuilder X有标准版和App开发版。

1. 标准版
   可直接用于Web开发、MarkDown、字处理场景、小程序等，开发App，则需要手动安装插件。

2. App开发版
   预置开发App所需的插件，开箱即用。

如果只是开发小程序和H5，则安装标准版即可。

创建项目

打开HBuilder X，选择“文件”→“新建”→“1.项目”命令
图1.1创建项目
弹出“新建项目”对话框，如图1.2所示：
图1.2 “新建项目”对话框
项目创建成功之后的项目目录如下图1.3所示

1.3项目目录

以“浏览器运行模式”为例：选择“运行”→“运行到浏览器”命令，选择浏览器，即可在浏览器中体验uni-app的H5版。

uni-app微信小程序调试

uni-app开发小程序非常方便，其开发效率远远高于原生小程序开发。

要开发小程序，必须下载对应小程序的开发者工具。本文章以微信小程序为例

1. 下载微信小程序开发者工具，建议下载稳定版 。
   链接: https://www.csdn.net/
2. 下载完成后，进行安装，根据提示操作即可。
3. 安装完成后，打开微信小程序开发者工具的服务端口，进入微信小程序开发者工具，选择“设置”→“安全设置”命令，打开如图2.13所示的窗口，将“服务端口”改为打开状态。
4. 运行项目：打开HBuilder X，进入项目，选择“运行”→“运行到小程序模拟器”→“微信开发者工具”命令，即可在微信小程序开发者工具中体验uni-app
   注意：第一次使用，需要配置小程序的相关路径才能运行成功。
   选择“运行”→运行到小程序模拟器→“运行设置”命令，如下图，在对应位置输入微信小程序开发者工具的安装路径。
   
   5.发行小程序：发行微信小程序必须有微信小程序AppID，可在微信公众号平台注册账号（小程序注册页操作步骤），账号注册之后，进入小程序管理后台，选择“开发”→“开发设置”命令，即可在打开的页面中获取微信小程序AppID。
   
   
   稍等片刻，系统会自动启动微信小程序开发者工具。如果没有自动启动，则需要手动打开微信小程序开发者工具。导入项目，项目路径在根目录unpackage/dist/build/mp-weixin 文件中，项目导入后单击“上传”按钮，按照“提交审核”→“发布”小程序标准流程逐步操作即可。

VScode等开发工具编译

以运行、发布微信小程序为例，输入以下命令：
运行微信小程序

npm run dev:mp-weixin 

发布微信小程序

npm run build:mp-weixin 

这样即可运行、发布微信小程序。当然，运行微信小程序必须先安装微信小程序开发者工具。