uni app的快速发展

这是一种使用VueJs为跨平台App开发前端框架的方法。开发人员编写了一组代码，可以编译到多个平台，如iOS、Android、H5和小程序。

uni-app框架由Digital Paradise（Beijing）Network Technology Co.，Ltd.推出，主要产品包括Web开发IDE Hbuiler、HbuilderX、前端框架mui、uni-app.和增强型移动浏览器引擎H5plus。

1、 环境建设

使用HBuilderX可视化界面快速创建项目。HBuilderX内置了相关环境依赖项的处理。

HBuilderX:IDE

微信开发者工具：调试预览工具。

2、 创建uni-app项目

单击工具栏中的文件->新建->项目：

选择uni-app，输入项目名称，例如hello uniapp，然后单击Create以成功创建uni-app。单击模板中的Hello uni app，体验官方示例。

1.真机操作：连接手机，启用USB调试，进入hello uniapp项目，单击工具栏上的运行->真机操作->选择正在运行的设备，在设备中体验uni app。

2.浏览器运行：进入hello uniapp项目，单击工具栏上的运行->运行到浏览器->选择一个浏览器，在浏览器中体验uni app的H5版本。

3.在微信开发者工具中运行：进入hello uniapp项目，点击工具栏上的Run（运行）->Run to Applet Simulator（运行到Applet模拟器）->WeChat开发者工具，即可在微信开发工具中体验uni app。

进入uni app项目，然后单击工具栏上的“运行”->“运行到浏览器”->“选择Chrome”将uniApp运行到浏览器。你可以参考它。将其运行到浏览器后，您可以像普通web项目一样预览和调试它。

注意：Chrome调试只能确保样式一致，并且不支持某些本机功能。

单击Chrome控制台的源栏以调试js。

在Page下的webpack中找到项目目录，直接找到相应的vue页面进行断点调试；或按Ctrl+P搜索文件名，进入页面调试；您还可以单击控制台上的日志信息以进入相应的页面进行调试。

形象

形象

uniApp运行到微信网络开发工具，可以在控制台上查看控制台信息、网络请求和其他信息。

注意：您可以使用微信开发者工具调试App或微信小程序。

页面样式调试与常规web项目相同。通过调试箭头选择元素，查看相应的节点和样式，如下图所示：

uniApp

调试js时，您需要切换到Sources列，选择要调试的页面的js，然后进行调试（如果js代码被压缩，右下角的｛｝以格式化代码），如下图所示：

uniApp

在HBuilderX工具栏上，单击发布并选择本机App云打包，如下所示：

出现以下界面。单击“打包”。

uniApp支持离线打包。您可以在HBuilderX中生成离线打包资源，然后引用（或参考其他用户编写的）它们进行离线打包。

在HBuilderX工具栏上，单击发布，选择本地打包，如下图所示，然后单击以生成脱机打包资源。

1.在清单上，Json配置发布后的路径（在网站的根目录中发布时无法配置）。例如，发布网站的路径在manifest中编辑json文件中的h5节点，并将base属性添加到路由器下的html5，如下图所示：

2.在HBuilderX工具栏上，单击发布，选择网站-H5 Mobile，如下图所示，单击生成H5相关资源文件，并将其保存在解压缩目录中。

按照以下步骤将uniApp发布到微信小程序：

1.申请微信小程序AppID，请参阅

2.在HBuiderX中，打开清单。json，并配置applet AppID，如下图所示

3.单击HBuilderX顶部菜单中的“运行”；“运行到Applet模拟器”--->“微信开发工具”，等待uni app项目的成功编译并自动启动微信开发人员工具

4.在微信开发者工具中，测试项目代码正常运行后，单击“上传”按钮，然后单击“提交审核”-->“发布”小程序的标准流程，一步一步，查看详细信息

6、 项目代码

反馈星是一个使用uniapp开发的报告工具项目。

发送文本、图片、音频和视频内容，你会得到意想不到的反馈。

Github下载：