要使用 uni-app 和原生 App 进行混合开发之前，要先确认要用 uni-app 还是原生 App 代码作为主体。

接下来，我们通过刚刚下载的 HBuilderX 开发者工具创建一个 uni-app 项目，要跟着一起操作哦。点击工具栏中的文件->新建->项目：会出现一个弹窗，接下来我们需要选择 uni-app 类型，输入项目名称，修改项目路径，选择合适的模板，点击创建，项目就创建成功啦。选择模板的时候，有几个模板选项。分别是：默认模板：不会内置常用组件，想要自己安装组件可以使用该模板。uni-ui 项目：内置很多常用的组件，日常开发推荐使用该模板。Hello uni-app：安装了官方的组件和 API 示例，初次体验的话可以使用该模板。

uni-app 原生插件包含两种扩展模式：module 模式、component 模式，下面来讲讲这两种扩展方式的 uni-app 原生插件是如何开发和调用的。

在开发完 uni-app 原生插件之后，接下来我们来看一下如何在 uni-app 框架中调用这些原生插件。调用之前要在原生插件项目中先注册一下插件，具体位置在原生插件App 项目的 Module 根目录下，assets/dcloud_uniplugins.json文件中。在nativePlugins节点下添加要注册的 Module 插件或者 Component 插件。实例：{ "nativePlugins": [ { "plugins": [ { "type": "module", "name": "ImoocModulePlugin", "class": "TestModulePlugin" } ] }, { "plugins": [ { "type": "component", "name": "ImoocComponentPlugin", "class": "TestComponentPlugin" } ] } ]}要注意 name 属性的设置，这个很重要，我们在 uni-app 框架中调用的时候，不管开发的时候插件用的什么名字，调用的时候，都要用 name 属性定义的名字来调用。下面我们来看看如何调用这些插件。

uni-app 框架的技术团队对比过 wepy/mpvue/taro/uni-app/原生小程序的性能，测试项目包括长列表加载、组件状态更新这两个比较容易出现性能问题的实例。最终得出的结论是 uni-app 性能更优，具体结果如下：微信原生开发手工优化,uni-app>微信原生开发未手工优化,taro > wepy > mpvue官网性能对比的文章：小程序开发：用原生还是选框架（wepy/mpvue/taro/uni-app）链接：https://ask.dcloud.net.cn/article/35947我们可以看到 uni-app 不管从开发维护还是项目性能来讲，都是更优的。还有很多其他的优点，比如：uni-app 项目支持在更多的平台上面发布上线、生态更加完善等，这些都是我们更建议选择 uni-app 框架的原因。下面我们来看看如果将mpvue 项目转换成 uni-app 项目吧。

如果我们主体采用 uni-app 进行开发，只是部分功能的实现使用原生开发，这样可以找一些原生项目的插件用来配合开发。目前更多项目是使用原生插件扩展的方式来进行开发的。这样代码实现就不只是通过 uniapp 框架来实现的了，而是通过原生 API 实现的，uniapp 只是负责调用一下。这里需要注意的是，如果想要将项目离线打包，就不应该使用原生 SDK，而应该使用 App 离线 SDK。App 离线打包 SDK，是把 App 运行环境（runtime）封装为原生开发调用接口，开发者可以在自己的 Android 及 iOS 原生开发环境配置工程使用。参考资料：https://nativesupport.dcloud.net.cn/AppDocs/README接下来我们举个自定义扫码的例子，看看如何在 uni-app 中如何扩展 5+ 的原生界面控件。在 uni-app 开发中，平台其实给我们提供的扫码 API，但是并不能满足我们所有扫码的需求，比如想要自己自定义扫码框的颜色。实例：// uni-app 中的扫码功能直接调用 plus API就可以了，而扩展5+的原生界面控件要等 plusready 后再调用 plus API。var plusReady = function (callback) { if (window.plus && window.plus.isReady) { callback(); } else { document.addEventListener('plusready', function () { callback(); }, false); }};//创建 Barcode 实例对象，可以自定义扫码框的位置大小和颜色var barcode = plus.barcode.create('barcode', options.types, options.styles);

原生插件开发就是用原生语言进行插件开发，对于 uni-app 原生插件来说，原生语言包括 android 或者 ios 代码。我们使用 android、 ios 代码开发的插件，可以在 uni-app 框架中通过 vue 代码调用，这就是 uni-app原生插件了。

直接在 HbuilderX 中创建项目，点击菜单栏-文件-新建-项目，出现创建项目的界面，选择 uni-app 项目，并选择默认模板。当然如果已经安装了 vue 运行环境，也可以使用 cli 方式创建项目，执行 vue create -p dcloudio/uni-preset-vue uniappPro 即可创建。

了解 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创建项目的过程中会提示选择项目模板，一般选择默认模板就可以了。如果想要选择自定义模板，需要先填写一个 uni-app 模板地址，这个地址可以是托管在 GitHub 上面的仓库地址，地址格式为 userName/repositoryName，比如 dcloudio/uni-template-picture 就是下载图片模板。更多的下载方式，可以参考这个插件的说明：download-git-repo

uni-app 和原生小程序混合开发问题 uni-app 官网已经描述的很清楚了，我们直接查看官网资料就可以。参考资料：https://uniapp.dcloud.io/hybrid

当下进行开发的时候，特别是前端开发，之前我们需要根据各个平台的特性单独开发一套代码，对于开发还是维护来说都是很大的工作量，大大消耗了我们的时间和精力。如果使用 uni-app 框架开发就不需要考虑这些了，用一套代码就可以部署到多个平台上面。下面来看一下 uni-app 为什么值得我们去学习使用。

mpvue 框架和uni-app 框架都是使用 vue 语法来开发小程序，为什么我们会更加推荐用 uni-app 框架来开发项目呢？下面我们来具体看一下。

uni-app 项目的视图层和逻辑层是分离开的，虽然我们在开发项目过程中，将 html、js 代码都写在同一个文件中，但是实际运行的时候是分离开的。视图层负责进行页面渲染，也就是用户能看到的页面，用来展示数据的，包括页面结构代码 <template> 部分、页面样式代码 <style> 部分。逻辑层负责执行后端的业务逻辑，用户看不到这部分的逻辑，用来处理数据的，包括页面逻辑代码 <script> 部分，以及其他 .js 文件。视图层和逻辑层分离，减少了项目的耦合程度，并且逻辑层的运算不会影响到视图层的渲染，窗体动画会比较稳。而两层分离也有一个缺点，就是这两层互相通信会有损耗。我们下面进行的性能优化，都是基于uni-app 运行原理来操作的，下面来具体看一下。

创建项目时，选择 Hello uni-app 项目模板，项目创建完成后，会帮我们生成下面的项目目录。其中有几个文件与 uni-ui 项目目录重复了，作用都是一样的。各文件的作用如下：文件名称作用 common 是存放公共 js 和 css 的文件夹 components 是用来存放组件的文件夹 hybrid 是存放本地网页 .html 文件的文件夹 pages 是用来存放所有页面的文件夹 platforms 是存放各平台专用页面的文件夹，如果想把各平台的页面文件更彻底的分开，可以 platforms 目录中创建子目录，存放不同平台的页面文件 static 是存放静态资源的文件夹 store 是 vuex 状态管理文件夹，在 uni-app 项目内置了 vuex，使用时直接在 main.js 里面配置一下就可以了 wxcomponents 存放小程序组件的目录，详见 2.1unpackage 打包目录 App.vue 页面入口文件 main.js 项目入口文件 manifest.json 应用配置文件 package.json 是项目的主配置文件，里面包含了 uni-app 项目的基本描述信息、项目所依赖的各种第三方库以及版本信息、以及可执行的脚本信息 pages.json 全局配置文件 template.h5.html 是 h5 端的网页模板文件 uni.scssuni-app 的样式包

如果主体采用原生 App 代码，只有部分功能需要通过 uni-app 实现，这样可以在原生 App 里集成 uni 小程序的 SDK，也就是原生 SDK。uni 小程序 SDK，是为原生 App 打造的可运行基于 uni-app 开发的小程序前端项目的框架，从而帮助原生App快速获取小程序的能力。参考资料:https://nativesupport.dcloud.net.cn/README主体采用原生 App 代码，也可以直接跳转 uni-app 编译为 H5 页面。

我们在不改变代码，只修改项目配置的情况下，可以将 mpvue 开发的小程序直接转变为 uni-app，为开发者进行框架的切换提供了很大的便利。下面我们来看看具体步骤：

我们平时开发的时候，没有在 HBuilderX 工具中注册登录，不应写我们平时的开发和测试，但是如果想在 HBuilderX 工具中打包 uni-app 项目的话，是需要先注册登录到 HBuilderX 工具中的，不然没有办法操作。

“project” 配置项用来配置代码块在什么项目类型下生效。可取值有：uni-app、Web、App、Wap2App。如果不设置，说明该代码块在所有的项目类型下都生效。比如我们设置 "project": "uni-app"，说明该代码块只在 uni-app 项目下生效。如果我们设置"project": “uni-app,Web”，说明该代码快在uni-app 和 Web 项目下面生效，两个项目类型之间用英文逗号（,）隔开

在前面的小节中，我们已经对 uni-app 做了简单的介绍，相信大家都对 uni-app 有了一定的了解。本小节带领大家创建第一个 uni-app 项目。创建 uni-app 项目有两种方式：第一种是通过官方的开发者工具 HBuilder 来创建，第二种是通过 vue-cli 命令行创建。

uni-app 混合开发是我们学习 uni-app 框架时候的难点，有些功能仅仅使用 uni-app 框架是实现不了的，比如：自定义扫码页面、自定义地图等。虽然 uni-app 框架中自带了这些功能，但是自带的功能（比如 API自带的扫码界面）没办法有效的自定义，这时就需要用到 App 的原生控件来进行组合开发，这个开发形式就是 uni-app 混合开发。当然混合开发的含义不仅仅是这些，我们在下面会给大家详细讲到。

我们准备好现成的 mpvue 项目，现在将 mpvue 项目中的文件复制到刚刚创建好的 uni-app 项目中。3.2.1 mpvue 项目中的 src/components 文件夹复制到 uni-app 项目根目录下复制完成后 uni-app 目录效果如下：3.2.2 mpvue 项目中的 src/pages文件夹替换掉到 uni-app 项目根目录下面的pages文件夹，并删除每个页面目录中的 main.js 和main.json 文件后面main.json 文件中的配置都会转移到 pages.json 文件中。操作完成后 uni-app 目录效果如下：3.2.3 配置 pages.json 文件，根据 mpvue 项目的 app.json 和 main.json 文件中的页面配置信息来填写需要注意以下几点：将 pages 配置项中的项目路径改成 .vue 页面的路径，比如将 "pages/index/main" 改成 "pages/index/index"。并将 main.json 文件中的配置写到每个 page 中的 style 配置项中；将 window 配置项改成 globalStyle 配置项。实例：mpvue 项目的app.json文件。{ "pages": [ "pages/index/main", "pages/me/main" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#EA5149", "navigationBarTitleText": "慕课网", "navigationBarTextStyle": "black" }}转换成 uni-app 项目的 pages.json文件。{ "pages": [ { "path": "pages/index/index", "style": {// 原是 main.json 文件中的配置 "enablePullDownRefresh":true } }, { "path" : "pages/me/me", "style" : {} } ], "globalStyle": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#EA5149", "navigationBarTitleText": "慕课网", "navigationBarTextStyle": "black" }}3.2.4 将其他文件也复制到 uni-app 项目中主要有以下几个文件：mpvue 项目中的 src/App.vue 文件替换掉 uni-app 项目根目录下的 App.vue 文件；mpvue 项目中的 src/main.js 文件替换掉 uni-app 项目根目录下的 main.js 文件，还有其他 src 文件夹下面的 .js 文件也一并复制过来；mpvue 项目中的 src/units 文件夹粘贴到 uni-app 项目根目录下；mpvue 项目根目录下的 static 文件夹替换掉 uni-app 项目根目录下的 static 文件夹。

本节课程我们主要了解了如何快速入门 uni-app，并了解了 uni-app 的学习路线，后面的课程会根据本节课的学习路线帮助大家快速上手 uni-app。本节课程的需要掌握的重点如下：使用 uni-app 开发需要掌握 Vue.js 语法基础，以及要学会使用官方工具 HBuilder；需要根据开发的具体情况，掌握微信小程序 API、条件编译、ES6、NPM 等技能；需要了解 uni-app 的学习建议以及学习路线，能帮助我们更加快速的入门 uni-app，快速上手开发。

本小节主要介绍了 uni-app 是一个怎样的框架，主要为了让大家放下心防。这么强大的框架，其实上手并不难，我们不需要过多的操心，后面的课程会给大家一步步拆解这个框架。本节的重点如下：uni-app 是一款几乎可以开发所有前端应用的框架；我们为什么要使用 uni-app ？因为它的学习成本低、开发成本低、部署简单以及有一个良好的周边生态；学习 uni-app 之前最好对 Vue.js 语法有一定的了解。

上一节我们在 uni-app 混合开发中讲到，如果我们混合开发是以 uni-app 框架为主，只是想扩展一些只有原生才有的功能，那么我们最好使用 uni-app 原生插件来进行项目开发。那如何开发 uni-app 原生插件并引用呢？这一小节我们来详细讲讲。

生命周期就是指一个对象生老病死的过程，针对 uni-app 来说，生命周期就是 uni-app 实例从创建、运行到销毁的过程。

本节课程我们主要学习了 uni-app 的一些常用基础组件，所有组件与属性名都是小写，单词之间以连字符-连接。本节课程的重点如下：了解 uni-app 基础组件与传统 HTML 基础组件的差异；掌握 uni-app 常用的基础组件的用法。了解更多组件内容，可以查看官网：https://uniapp.dcloud.io/component/README

本小节给大家演示了如何将 mpvue 项目转成 uni-app 项目，可以发现基本只需要复制粘贴就可以了，不需要我们重新编写代码，非常的方便。还有其他项目的转换，可以参考官网的示例：vue h5项目转换uni-app指南：https://ask.dcloud.net.cn/article/36174微信小程序转换uni-app指南及转换器：https://ask.dcloud.net.cn/article/35786wepy转uni-app转换器：https://github.com/zhangdaren/wepy-to-uniapp

在 uni-app 框架中有很多内置插件，我们开发有限调用这些插件来开发，效率最高，如果 uni-app 框架中的内置插件不能满足开发需求，我们可以到插件市场寻找合适的插件来完善我们的项目，不过这样的插件可能不是免费的，也有下架以及插件更新导致项目不匹配的风险。最后如果市场上找不到合适的插件，我们再来自己开发，自己开发原生组件需要花更多时间熟悉，当然功能扩展性和稳定性上也会更好一些。 本小节需要掌握的重点如下：了解什么是 uni-app 原生插件；了解 uni-app 原生插件的开发模式；掌握 uni-app 原生插件的调用方法。

通过前面小节的学习，我们基本掌握了怎样用 uni-app 框架来开发并上线一个项目应用。知道了几乎所有的前端应用都可以用 uni-app 框架进行开发，并且只需要用一套代码就可以将项目部署到多个平台。uni-app 我们之所以用的这么顺手，有很大一部分功劳是因为，uni-app 框架用的是 Vue.js 语法和微信小程序的 api。但是这样的组合也有一些限制。由于各个平台的特性，有些 vue 语法在个别平台上面没有办法实现，下面我们会给大家详细讲讲各个平台使用 Vue.js 语法时需要注意哪些地方。