uni-app-简介-背景-快速上手

uni-app

一、简介

uni-app 是一个使用Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
官网地址： https://uniapp.dcloud.io/README

二、背景

1.当前跨平台开发存在的三个问题

1. 多端泛滥
2. 体验不好
3. 生态不丰富

2.Uni-app 产品特征

1. 跨平台更多

   • 真正做到“一套代码、多端发行”
   • 条件编译：优雅的在一个项目里调用不同平台的功能特色

2. 运行体验更好

   • 组件、api与微信小程序一致
   • 兼容 weex原生渲染

3. 通用技术栈，学习成本更低

   • vue 的语法、微信小程序的api
   • 内嵌mpvue

4. 开发生态，组件更丰富

   • 支持通过npm按爪给你第三方包
   • 支持微信小程序自定义组件及SDK
   • 兼容mpvue组件及项目
   • App端支持和原生混合编码
   • DCloud将发布插件市场

3.解决痛点

1. 跨更多的平台
2. 体验更好
3. 学习成本低，容易上手
4. 开放生态、组件更丰富
   

三、快速上手

uni-app支持通过 可视化界面、vue-cli命令行 两种方式快速创建项目。这里只介绍hbuilderX 可视化界面方式创建项目
命令行方式创建项目可查看uniapp官网https://uniapp.dcloud.io/quickstart-hx

通过 HBuilderX可视化界面

可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。

1. 下载安装如下工具

官方IDE下载地址 ：https://www.dcloud.io/hbuilderx.html

2. 创建uni-app

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

选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。

注：
uni-app自带的模板有Hello uni-app ，是官方的组件和API示例。
还有一个重要模板是uni ui项目模板，日常开发推荐使用该模板，已内置大量常用组件。

3. 运行uni-app

1） 浏览器运行：

进入hello-uniapp项目,点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，即可在浏览器里面体验uni-app的 H5 版。

2） 真机运行：

连接手机，开启USB调试，
进入hello-uniapp项目，点击工具栏的运行 -> 真机运行 -> 选择运行的设备，即可在该设备里面体验uni-app。

注意：

1. 如手机无法识别，请点击菜单运行-运行到手机或模拟器-真机运行常见故障排查指南。
2. 目前开发App也需要安装微信开发者工具。

3） 在微信开发者工具里运行：

进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。

注意：

如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。

若HBuilderX不能正常启动微信开发者工具，需要开发者手动启动，然后将uni-app生成小程序工程的路径拷贝到微信开发者工具里面，在HBuilderX里面开发，在微信开发者工具里面就可看到实时的效果。

uni-app默认把项目编译到根目录的unpackage目录。

4）运行到其它平台

进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 相应的平台

4. 发布uni-app

1）打包为原生App（云端）

在HBuilderX工具栏，点击发行，选择原生app-云端打包，如下图：

出现如下界面，点击打包即可。

2）打包为原生App（离线）

uni-app 支持离线打包，在HBuilderX 发行菜单里生成离线打包资源，然后参考离线打包文档操作，可以从HBuilderX的发行菜单里找到文档链接，也可以直接访问：https://nativesupport.dcloud.net.cn/AppDocs/README。

在HBuilderX工具栏，点击发行，选择本地打包，如下图，点击即可生成离线打包资源。

3）发布为H5

1. 在 manifest.json 的可视化界面，进行如下配置（发行在网站根目录可不配置应用基本路径），此时发行网站路径是 www.xxx.com/h5，如：https://hellouniapp.dcloud.net.cn。
   

2. 在HBuilderX工具栏，点击发行，选择网站-H5手机版，如下图，点击即可生成 H5 的相关资源文件，保存于 unpackage 目录。

发布为小程序

发布为微信小程序：

1. 申请微信小程序AppID，参考：微信教程。

2. 在HBuilderX中顶部菜单依次点击 “发行” => “小程序-微信”，输入小程序名称和appid点击发行即可在unpackage/dist/build/mp-weixin生成微信小程序项目代码。
   

3. 在微信小程序开发者工具中，导入生成的微信小程序项目，测试项目代码运行正常后，点击“上传”按钮，之后按照 “提交审核” => “发布” 小程序标准流程，逐步操作即可，详细查看：微信官方教程。

发布到其它平台: 详情参考uniapp官网