大家好，我是编程小6，很高兴遇见你，有问题可以及时留言哦。

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

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万开发者，整体上看，生态还算不错。

正确姿势

1、阅读官方文档

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

2、活用插件市场

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

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

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

可能是uniapp生态最好的路由插件
应该是最强大的富文本插件(已经被uviewui集成)
个人觉得目前最好的table组件
挺不错的日期时间选择器

3、通过社区、qq群、插件留言向开发者提问

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

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

实战教程

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

一、环境搭建

1、安装hbuilderX

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

2、安装夜神模拟器

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

3、配置环境

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

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

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

4、svn源码管理

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

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

5、插件市场插件安装

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

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

二、uniapp手把手实战

1、新建uniapp空模板项目

cli模式

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

//安装vue/cli全局依赖
npm install -g @vue/cli

//创建项目模板
vue create -p dcloudio/uni-preset-vue my-project

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

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

set-ExecutionPolicy RemoteSigned

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

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

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

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

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

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

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

hbuilderx模式

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

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

2、目录结构

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

┌─cloudfunctions        云函数目录（阿里云为aliyun，腾讯云为tcb，详见uniCloud）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                存放本地网页的目录，详见
├─platforms             存放各平台专用页面的目录，详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─wxcomponents          存放小程序组件的目录，详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见

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

3、必学内容

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

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

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

4、uniapp路由页面配置(pages.json)

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

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

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

看下list项具体内容

5、生命周期

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

6、状态管理

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

vuex

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

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

globalData

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

<script>  
    export default {  
        globalData: {  
            text: 'text'  
        }
    }  
</script>

//在其他页面调用/修改全局变量
getApp().globalData.text = 'test'

7、全局事件

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

8、接口请求封装

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

9、路由跳转

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

10、全局样式

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

尺寸单位

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

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

css变量及固定值

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

字体图标
- 通用的支持格式包括base64格式、网络路径即在线字体(须https开头)
- 小程序不支持在css中引用本地文件，包括图片或者字体
- uniapp会自动把小于40kb的字体文件转换为base64，uniapp不会编译static文件夹下的内容

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

11、组件及组件库

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

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

12、登录跳转到首页

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

开发登录功能

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

新建一个登录页面，配置pages页面路由参数

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
            "path" : "pages/login/login",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        },{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
    ]

准备一个可用的登录接口，进行封装

uni.request({
					// #ifdef H5
					url: '/data-receive/v1/login',
					// #endif
					// #ifndef H5
					url: 'http://##.##.##.##:##/data-receive/v1/login',
					// #endif
					method: 'POST',
					data: {
						username: this.name,
						password: this.password
					},
					dataType: 'json',
					success(res) {
						if (res.statusCode == 200 && res.data.code == 200) {
							//跳转到首页
							uni.navigateTo({
								url: '../index/index'
							})
						}
					}
				})

新建登录页面，完成布局、样式，登录逻辑

<template>
	<view class="content"> <view class="logo"> <image src="../../static/logo.png" mode=""></image> </view> <view class="list"> <view class="title"> 用户名 </view> <view class="input"> <input type="text" placeholder="请输入用户名" v-model="name" /> </view> </view> <view class="list"> <view class="title"> 密码 </view> <view class="input"> <input type="text" placeholder="请输入密码" v-model="password" /> </view> </view> <button type="default" @tap="dologin">登录</button> </view>
</template>

将登录接口请求分两种情况：h5环境、非h5环境

// #ifdef H5
url: '/data-receive/v1/login',
// #endif
// #ifndef H5
url: 'http://##.##.##.##:##/data-receive/v1/login',
// #endif

h5环境用代理解决跨域

"h5" : {
        "router" : {
            "base" : "./"
        },
        "devServer" : {
            "proxy" : {
                "/data-receive" : {
                    "target" : "http://##.##.##.##:##/data-receive",
                    "pathRewrite" : {
                        "^/data-receive" : ""
                    }
                }
            }
        }
    }

页面跳转

uni.navigateTo({
				url: '../index/index'
			})

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

13、开发调试

app开发调试

h5开发调试

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

在hbx上运行到浏览器(内置或者其他浏览器)
f12并开启手机调试模式

小程序开发调试

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