白话：uni-app是用前端都熟系的技术合成的用于一套代码跨多端（14个平台）的前端应用开发框架。具有一定前端基础可以看官网快速上手。

1，官方文档

uni-app官网 (dcloud.net.cn)/uni-app开发框架教程-学习视频教程-腾讯课堂 (qq.com)

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序等多个平台。

1.1组件——>模板层（分基础组件和扩展组件/外部插件）

1.1.1基础组件内置直接引用：

uni组件快捷键编写：u+组件首字母

1.1.2扩展组件/外部插件

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。

自定义easycom配置的示例
如果需要匹配node_modules内的vue文件，需要使用packageName/path/to/vue-file-$1.vue形式的匹配规则，其中packageName为安装的包名，/path/to/vue-file-$1.vue为vue文件在包内的路径。

"easycom": {
  "autoscan": true,
  "custom": {
    "^uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件
    "^vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules内的vue文件
  }
}

如果不使用easycom，手动引用和注册vue组件，则需要分3步写如下代码：
1，import导入组件,2，components里注册组件,3，template中使用组件
	<template>
		<view>
			<uni-rate text="1"></uni-rate><!-- 3.使用组件 -->
		</view>
	</template>
	<script>
		import uniRate from '@/components/uni-rate/uni-rate.vue';//1.导入组件
		export default {
			components:{uniRate }//2.注册组件
		}
	</script>

1.1.3更多uni-app的模板、示例

详见插件市场

利用插件学习，或者直接二次开发利用！

uni插件：DCloud 插件市场

1.2vue.js——>脚本层

<script>

和vue,js一样

1.3接口——>脚本层

<script>

uni-app的 js API 由标准 ECMAScript 的 js API 和 uni 扩展 API （路由）这两部分组成。

数据交互可参考：uni-app开发框架教程-学习视频教程-腾讯课堂 (qq.com)第三课

onLoad:function() {
			uni.request({
				url: 'https://unidemo.deloud.net.cn/api/news',
				method: 'GET',
				data: {},
				success: res => {
					console.log(res);
					this.news = res.data;
				},
				fail: () => {},
				complete: () => {}
			});

示例实际网络接口数据：

1.4CSS3——>样式层

<style>

1.5尺寸单位

uniapp为使用多端平台使用（相对单位适应性强）

拓：输入if+Enter+Enter（选择端）
if切换不同端单独显示

2，直接打开Hbuilder创建项目体验

建议都可以创建体验一下：

2.1认识目录结构

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

2.2全局配置

3，关于如何模拟运行

不同打开设置（例如微信小程序）：

微信Web开发者工具-下载、安装和使用图解 - 简书 (jianshu.com)

4，直接调用原生API

Native.js(apk)Native.js示例汇总 - DCloud问答例如开启关闭蓝牙
参考官网框架：

5，打包发行

云打包apk或者本地打包

5.1HBuilder发行

5.2HBuilder发行云打包

5.3微信开发者工具上传

需要手动取得开发者认证

7，快速体验

来源：官网