本文已在我的公众号上发布，更多原创技术文章，请关注我的公众号“字节逆旅”

uniapp是Dcloud公司的产品，是一个跨端开发框架，基于vue.js技术栈。开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。这是它的功能架构图，可以看下，了解下它的架构。

简单总结下，uniapp底层集成了native技术，就是h5+引擎，能调用手机原生api，所以uniapp能开发接近原生性能的app，这是js引擎部分；它是双引擎，渲染又是独立一个独立引擎。这个渲染引擎又分为nvue渲染和webview渲染，nvue其实就是集成的weex，webview这个有了解的应该知道它的内核是webkit，可以看这篇文章了解。

uniapp官方的qq群目前已经有35个了，都是2000人的大群。还有各种基于uniapp的开源组件库，比如uViewUI、colorui、ThorUI、uCharts，最完整最出名的目前是uViewUI，官方文档也是比较完备了，uviewui.com/。 他们的官方qq群现在有4个，可以加群找开发者解答疑问。uniapp官方说有600万开发者，整体上看，生态还算不错。

官方文档从入门介绍到学习方法再到用法说明、注意事项等等，一应俱全。如果文档看不下去，可以看看社区帖子，或者从插件市场找些现成的用起来。

插件上包含了各种组件、SDK、项目模板等各种资源，甚至还有uniCloud、HbuilderX的相关插件。如果官方的基础组件、官方的uni-ui扩展组件库不能满足你的需求，都可以到插件市场找找看。官方是很重视这个插件市场的，比如uni-ui有一篇官方文档介绍说明uniapp.dcloud.io/component/R…

看这个插件市场排名，也能大概了解目前的插件市场现状，整体上还是比较活跃的：

除了上面提到的比较综合的组件库，其实还有很多优秀的插件作者，他们是专注在特定领域，下面推荐几个：

如果你严格按照文档进行开发，仍然遇到了问题，这时可能需要向他人求助了。如果是uniapp官方问题，可以在社区查找相关资料，这里的案例相当多，基本能找到大部分问题；

插件问题最好就是直接在插件市场对应插件下留言，如果你的问题描述清楚明确，都会有人回答，有的时候，在线就能等到回复。也可以加相应的qq群，里面的热心人还是不少的。

前面介绍了uniapp官方资源的正确食用方式，下面介绍一下uniapp如何进行开发、调试、发布，这里涉及到app、h5及小程序(微信小程序)。

hbuilderx也是dcloud公司出品的ide产品。用uniapp开发跨多端产品，实现一次开发，多端发布就必须用hbuilderx这个神器IDE。这里是官网下载地址www.dcloud.io/hbuilderx.h…

既然是开发app，就少不了连机调试，你可以连接手机，也可以安装一个模拟器，这里推荐夜神模拟器，下载地址：www.yeshen.com/。

hbuilderx连接到模拟器，选择工具--设置，打开配置界面,选择运行配置，如图。

adb路径选择模拟器安装包的adb.exe地址，模拟器端口，夜神模拟器默认是62001，填上就可以了。如果你不确定它的端口，可以在adb.exe的同级目录下找到文件，双击运行，可以看到这个结果，如图:

这个就是夜神模拟器的监听端口。

选择工具--插件安装，可以打开一个插件管理面板，如图。安装插件，它这里分为核心插件和其他插件两类，核心插件能跟随ide一起升级，其他插件就要到插件市场找自己需要的了。像svn这种插件，默认是没有的，可以到安装新插件这里安装svn插件。

安装过程比较简单，直接点击就行了。安装好了也可以卸载。

插件市场的插件安装一般是这种方式：

点击这个按钮就可以安装到本地。这也分几种，我了解的就是组件类、编译类。像组件类，点击安装后会直接安装到当前打开的uniapp项目中，而且是指定的文件夹components中；像编译类，这种其实类似于webpack的loader，这个是放在hbx的安装包里。

用hbx创建项目在官方教程上讲得比较细致了，我这里只介绍下用vue-cli创建项目过程。创建步骤在官网上也有，相比用hbx的可视化搭建，用cli搭起来慢了不少。

如果在执行脚本时有这样的错误提示：vue: 无法加载文件 C:....vue.ps1。说明你的脚本运行被禁止了，解决办法就是打开当前项目地址的资源管理器，点击文件，弹出对话框，如图点击所示位置

会有弹出框，在里面执行这个段代码：

执行之后，按提示输入Y或者A就可以了，再按上面进行项目创建，就正常了：

最后，它会提示你选择项目模板：

一般建议选择hello uni-app的模板。如果一切顺利(理想情况下)，创建完成的项目，看起来是这样的，如下图

我们可以观察下它的package.json文件，可以看到有很多的打包、运行命令，uniapp确实帮我们做了很多事！

cd my-project进入到项目中，运行一下npm run dev:h5，试下效果。

可以看到确实成功了，打开启动页，按f12将页面切换到手机模式，就能看到效果了。

这种cli模式下无法连接到模拟器调试，要实时调试app版本，只能用hbx这个ide。cli模式除了能调试h5版本，还可以调试小程序，以微信小程序为例，这需要先准备好开发工具。

考虑到app是我们最主要的产品输出，最好还是切换到hbuilderx编译器上，其实用习惯之后，感觉还是挺好用的。cli模式适合开发h5或者小程序。具体的步骤看官网就可以了，比较简单，可视化操作，一步步走就没问题。其实前面用cli模式创建的项目，也可以用hbx开发，在hbx编译器上打开文件夹，选择cli项目的src文件夹，就是一个标准的hbuilderx创建项目了。

这时选择运行--运行到模拟器就可以了

我们来观察下这个项目结构，这是官方的一个介绍，我copy过来了

重点是pages、static、main.js、App.vue、manifest.json、pages.json这几个目录或者文件。

我这里没必要把官方文档从头讲一遍，这里可以告诉你重点内容，你学习时重点关注，重点消化就可以了。

第一个就是框架介绍这里，你要把框架简介的内容通读并熟悉。

第二个就是上手开发了，这时框架这块要知道怎么用了，如何配置pages.json文件非常重要！具体的其实我也记不住，但是通过配置调试你就能知道是怎么回事了，这个熟悉就行了。

打开pages.json文件，这是一个uniapp项目配置文件，是json格式。如果内容较多，可以右键--显示文档结构图，可以看到这个文件的基本结构是这样：

pages是项目中用到的所有的页面配置，第一项是登录app的启动页，一般放登录页或者首页，其他的可以参考官方文档看看说明并手动设置下参数，看下效果就明白了。subPackages是分包加载配置，这个是为小程序准备的，小程序在发布上传代码时对总包大小(目前是16M)有要求，还要示对总包进行分包，每个小分包不能超过2M，这个就要求在这里进行配置分包加载。globalStyle这个是设置全局样式的，一般都会有一个统一风格的样式，可以在这里设置，包括导航栏、标题、窗口背景色这些。tabBar这个也非常重要，这是app的标配，相当于是一级导航栏，拿我们这个hello uniapp的项目举例来说，框住部分就是tabBar的内容。

tabBar各组内容最多只能有5项，最少要有2项，都在list项进行配置

看下list项具体内容

这里按照粒度从粗到细分为应用生命周期、页面生命周期及组件生命周期，具体的可以看下文档。其中组件生命周期是跟vue组件的生命周期相同。具体用法要结合业务场景配合来使用用。

状态管理这块有几种方式，

vuex

vuex用法与vue项目上是一样的。唯一要注意的就是import store from './store/store.js'这句只能写在main.js里，在别处引用都会报错？！

uni.storage

这块看下对应api的具体用法，这个状态数据是持久化的，除非你调用它的清除接口，这个数据会一直缓存在本地。

这个用的比较少，这是在app.vue页面定义全局变量，具体用法如下：

uniapp的API文档非常详细，甚至封装了全局事件，我们可以直接用了

这一块内容在API模块的网络栏，一般的接口请求就用uni.request(object)就可以了。普通的接口调用用这个就已经够了，如果需要用到请求拦截，需要到插件市场找合适的插件。这里推荐luch-request,文档很清楚，功能比较全。

路由跳转对应的API可能看下官方文档，基本上都是常用的。这里有个前提就是，当前页面必须在pages.json中配置好，才能调用这些跳转的api。还有个要注意的就是tabbar页面只能用uni.switchTab来跳转。我们知道vue有vueRouter来支持路由跳转、路由守卫，但是uniapp不支持这个插件，如果要在uniapp上实现，这里推荐uni-simple-router

样式这一块要注意的地方比较多，我总结了一下特别要注意是这些地方：

uniapp目前通用的尺寸单位是px、rpx，px即我们通常理解的像素单位；rpx是一个响应式单位，它会根据屏幕宽度按给定值占比来计算出像素值。

前面提到的pages.json页面的globalStyle配置节点，可以通过配置来控制rpx的计算参数

这几个参数主要是在跨端样式控制时要注意，经常会遇到app布局弄得差不多了，然后到h5端，样式就不对了，或者到小程序上也是异常。看上面这个表，主要就是要注意这三个变量在不同环境下，它的值是不同的，要特别注意。下面这个表，是对上面的一个补充，如果在h5端，不存在原生顶部导航栏与tabBar，就是自定义的div，我们在设置样式时就要参照这些变量的固定值。

其他的像样式导入、内联样式等与web端应用开发差不多。还有一个要注意的就是如果要设置全局样式，可以在App.vue中设置或者用@import导入外联样式就可以了。

组件这块是非常重要的，对uniapp来说包括框架设计、底层原理这些都是灵魂是骨架；前面讲到的各种规则及配置都是行为习惯、准则；还有前面提到的状态管理、路由、事件、样式、接口请求等，这些就像是血管、淋巴一样不可缺少；组件就是内脏、肌肉了，具体作用就看它的定位了。

官方文档这块将组件专门列为一个栏目，可以大概看下有哪些组件。平时开发基本功能用官方提供的组件基本上就满足了。开源的组件库也是基于官方组件进行的二次封装，一般原则是优先参考官方组件，如果官方组件不支持的，或者用起来不方便的，再到开源市场寻找开源插件。

接下来，我们开发一个登录跳转的功能。前面我们用vuecli创建了一个项目，那个是hellouni的，内容有点多，现在我们重新搭建一个空的项目模板，这样清楚一点。步骤跟前面一样，就是选择模板时选默认模板就行了。

在空模板项目上尝试开发一个登录功能，一般需要这几步：

更多跳转请参考路由与页面跳转

h5其实就是网页，这个调试就比较简单了，跟开发web项目一样的。

首先要明白uniapp小程序版本的开发方式：开发还是在hbx上开发，只不过要运行到小程序开发工具上，然后在hbx上开发会实时更新到小程序上。也就是说小程序开发工具只是个模拟器，看效果的，上面的代码都是从uniapp版本编译过来的，对开发不太友好，不建议在小程序开发工具上修改。以下是微信小程序开发步骤：

如果项目是第一次运行到小程序，需要在小程序开发工具上绑定前面注册保存的appid，小程序代码地址(此例是在newproject\src\unpackage\dist\dev\mp-weixin)，绑定好了就能看到小程序的开发状态了，就像这样：

前面讲过小程序的开发还是在hbx上，小程序工具是看效果的，但是调试找bug还是得在小程序开发工具上，调式模块就在右下角，类似于谷歌浏览器的调试窗，如果觉得窗口太小，这击这个浮动窗口按钮就能弹出调试窗口。

已经弹出的调试窗口

app打包流程比较简单，分为安卓和苹果两大平台。一般app上线都应该走云打包流程，选择发行-->原生App云打包，弹出这个对话框。

这个是安卓包，如果不需要上市场上的应用平台，就可以选择公共测试证书的打包方式。

这是苹果版本的打包，苹果打包后要上线，只有上线appstore一条路，证书相关的三个文件都不能少。

点击打包之后，进入云打包队列排队等待，成功之后会给出下载地址：

安卓版本是可以直接安装使用的，你可以放在生产环境服务器上供用户下载。如果是苹果版本，打包后的ipa文件不能直接使用，还要提交到appstore审核通过，最后才能发布，这个周期大概在一周左右。

在app上线之后，后面的版本升级就可以用热更新方式更新了，不用每次都发布一个新的完整包。选择发行-->原生App-制作应用wgt包，弹出更新包对话框：

生成wgt后，将wgt文件放在服务器，用户在app上检测到有更新时就会下载更新包在本地热更新。

h5版本的打包应该是最简单的，发布也可以按网页部署方式来，如果想用微信打开网页，最好将h5部署在外网域名所在的服务器上。

小程序打包对包的大小有限制，之前是16M现在升级到了20M。具体的分包方法参考官方文档说明，我们分包是要在uniapp上进行分包，注意uniapp分包要求。我写了关于uniapp适配微信小程序的文章，对分包上传有说明，可以参考。

未完待续。。。。