点击右上角的红色按钮以跟随“网络秀”，让您真正出现

了解Uni-App

uni-app是使用Vue.js开发所有前端应用程序的框架。开发人员编写了一套可以发布到iOS，Android，H5、和各种小程序（微信/ alipay /百度/头条/ QQ /叮叮）和其他平台上的代码。

Uni-app即使不是跨终端的，也是更好的小程序开发框架。

uni-app由DCloud公司创建，DCloud公司有340万开发人员用户，其uni-app具有50,000+个案例，600 +个插件，50 + 微信/ qq组，以及更多百度指数高，您可以放心选择。

Vue.js的一组代码，已发布到iOS，Android，H5、和各种小程序

为什么使用Uni-App

uni-app在开发人员数量，案例，跨终端平滑度，扩展灵活性，性能体验，周围生态，学习成本和开发成本等8个关键指标中具有更强的优势。

1、更多的开发人员/案例：50,000+个案例，600+插件，50+ 微信/ qq组，更高的百度索引，更高的跨端完美性和真正提高的生产力

2、不受限制的平台功能：在跨终端时，通过条件编译+特定于平台的API调用，您可以优雅地为平台编写个性化代码并调用专有功能，而不会影响其他平台。支持本机代码混合和本机SDK集成。

3、出色的性能体验：体验更好的Hybrid框架并更快地加载新页面。应用程序支持本机weex渲染，可以支持更流畅的用户体验。 小程序终端的性能优于市场上其他框架。

4、周围的生态很丰富：丰富的插件市场，各种模板都可以使用。支持NPM，支持小程序组件和SDK，与mpvue组件和项目兼容，与weex组件兼容。微信生态的各种SDK可以直接在跨平台应用中使用。

5、学习成本低：基于通用前端技术堆栈，使用vue语法+微信小程序api，无需额外学习成本。

Vue.js一套代码，已发布到iOS，Android，H5、和各种小程序

快速入门

一、HBuilderX下载并安装

可视化方法相对简单。 HBuilderX具有内置的相关环境，可以直接使用，而无需配置nodejs。

在开始之前，开发人员需要下载并安装以下工具：

HBuilderX：HBuilderX高效的怪胎技能

HBuilderX是通用的前端开发工具，但专门为uni-app进行了增强。

二、创建项目

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

Vue.js一套代码，已发布到iOS，Android，H5、和各种小程序

选择uni-app，输入项目名称，然后您就可以从模板中喜欢的模板中体验官方示例。最后，单击创建以成功创建单应用程序项目。

Vue.js一套代码，已发布到iOS，Android，H5、和各种小程序

官方模板地址：DCloud插件市场

Vue.js一套代码，已发布到iOS，Android，H5、和各种小程序

我选择“电子商务模板min-amll”在此处创建项目

三、运行uni-app项目

1、浏览器正在运行：进入项目，单击工具栏上的“运行”->“运行到浏览器”->选择浏览器，即可在浏览器中体验H5版本的uni-app。

Vue.js一套代码，已发布到iOS，Android，H5、和各种小程序

预览：

Vue.js一套代码，已发布到iOS，Android，H5、和各种小程序

2、在真实计算机上运行：连接手机，打开USB调试，进入项目，单击工具栏上的“运行”->在真实计算机上运行->选择正在运行的设备，即可体验uni-app设备。

（1），Android手机，USB连接后，打开开发人员模式

（2），iOS手机，计算机首先下载iTunes，然后USB连接到计算机，添加受信任的设备。

Vue.js一套代码，已发布到iOS，Android，H5、和各种小程序

这里以ios为例。

3、手机上已经安装了一个名为“ HBuilder”的APP。目前，单击它不会打开。我们需要我们的ios手机->设置->常规->设备管理->添加信任。为什么是这样？由于ios需要证书，因此在发布ios时，您需要从Apple申请证书。上网后，您无需这样做。

Vue.js一套代码，已发布到iOS，Android，H5、和各种小程序

4、我们可以在手机上打开APP

Vue.js一套代码，已发布到iOS，Android，H5、和各种小程序

这是打开手机的方式。感觉很好吗？

体验原生功能

扫描代码

通过上面的图片，我们可以看到在左上角有一个扫描，但是模板仅写入事件，并且尚未实现，因此我们向其中添加了功能。

pages / index / index.vue

//点击导航栏 buttons 时触发 onNavigationBarButtonTap(e) { const index = e.index; if (index === 0) { this.$api.msg('点击了扫描'); } else if (index === 1) { // #ifdef APP-PLUS const pages = getCurrentPages(); const page = pages[pages.length - 1]; const currentWebview = page.$getAppWebview(); currentWebview.hideTitleNViewButtonRedDot({ index }); // #endif uni.navigateTo({ url: '/pages/notice/notice' }) } }

阅读：uni-app官方网站api，设备扫描代码文档。操作非常简单

uni.scanCode(OBJECT) // 调起客户端扫码界面，扫码成功后返回对应的结果。

对象：

（1)，onlyFromCameraBoolean是否只能从相机扫描代码，不允许从相册小程序中选择图片标题，不支持

（2)，scanTypeArray无扫描代码类型，参数类型为数组，二维代码为“ qrCode”，一维代码为“ barCode”，DataMatrix为“ datamatrix”，pdf417为“ pdf417”。 小程序不支持

（[3)，successFunction是成功进行接口调用的回调，有关返回内容的详细信息，请参考返回参数说明。

（4)，failFunction，接口调用的回调函数是否失败（在识别失败时触发，用户取消等）

（5)，completeFunction是用于完成接口调用的回调函数（如果调用成功或失败，将执行该函数）

onNavigationBarButtonTap(e) { const index = e.index; if (index === 0) { this.$api.msg('点击了扫描'); uni.scanCode({ success: (result) => { this.$api.msg('扫描成功' + result); }, fail: (res) => { this.$api.msg('扫描成功' + res); } }) } else if (index === 1) { ... } }

这将启用扫描功能。

Vue.js一套代码，已发布到iOS，Android，H5、和各种小程序

容易吗？想尝试的朋友可以尝试。

摘要

Dcloud公司在下面有很多产品，uni-app，wap2app（从m站快速转移到应用），mui（前端UI框架），5 +运行时（随意调用本机400,000 API），等等。感觉仍然非常强大。

如今，移动混合开发框架很多，例如Flutter，React Native，Weex，Wex5等，如何选择最佳框架？最主要的是要看您的需求，他们的生态和周围环境。如果您遇到问题，网络或官员可以帮助您及时解决问题。

如果您喜欢编辑器，或者认为编辑器的文章对您有所帮助，则可以单击关注点！同时，想要源代码的朋友可以单击下面的“了解更多”。