文章目录

1，官方文档
- 1.1组件——>模板层（分基础组件和扩展组件/外部插件）
- - 1.1.1基础组件内置直接引用：
  - 1.1.2扩展组件/外部插件
  - 1.1.3更多uni-app的模板、示例
- 1.2vue.js——>脚本层
- 1.3接口——>脚本层
- 1.4CSS3——>样式层
- 1.5尺寸单位
2，直接打开Hbuilder创建项目体验
- 2.1认识目录结构
- 2.2全局配置
3，关于如何模拟运行
4，直接调用原生API
5，打包发行
- 5.1HBuilder发行
- 5.2HBuilder发行云打包
- 5.3微信开发者工具上传
7，快速体验

白话：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，快速体验

来源：官网

uni-app快速上手顺序相关推荐

自学Python第二十二天- Django框架(一)创建项目、APP、快速上手、请求和响应流程、模板、数据库操作
Django 框架是一个基于 python 的重量级的 web 开发框架,现今很多大公司大项目都是使用 Django 框架.采用了 MVC(model view controller) 的框架模式,p ...
小程序源码：仿各大APP种树微信小程序源码下载-简单快速上手
这是一款仿各大APP的种树获取水果的一款微信小程序可以对树浇水,杀虫,修剪等等另外还有夺宝,更多小程序推荐支持流量主模式等等可以进行邀请好友加快树木的成长速度小程序源码下载地址: 小程序源码 ...
直播回放：快速上手，使用 Kotlin 把支付宝小程序装进自己的 App
写一个 Android App 或许不难,但企业对于移动应用的要求愈来愈高,不只要求开发速度.稳定度.质量等,甚至希望能具备动态扩展的架构设计.在 App 中自启动小程序.面向这些需求,若是有好的开发 ...
APP种树微信小程序源码下载-简单快速上手
这是一款种树获取水果的一款微信小程序可以对树浇水,杀虫,修剪等等另外还有夺宝,更多小程序推荐可以进行邀请好友加快树木的成长速度下面是小编的演示图: 小程序源码下载地址:(已更新)APP种树微信 ...
《Android App开发入门：使用Android Studio 2.X开发环境》——1-3 Android Studio 快速上手...
1-3 Android Studio 快速上手
【转】Vue.js 2.0 快速上手精华梳理
Vue.js 2.0 快速上手精华梳理 Sandy 发掘代码技巧:公众号:daimajiqiao 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新 ...
微信小程序 ---在Vscode上编辑，微信开发者工具上预览，快速上手
微信小程序 -快速上手第一个小程序成功导入一个已经在开发中项目 vscode 设置设置高亮拷贝到 settings.json "files.associations": ...
uni app 零基础小白到项目实战-1
uni-app是一个使用vue.js开发跨平台应用的前端框架.开发者通过编写vue.js代码,uni-app将其编译到Ios,android,微信小程序等多个平台,保证其正确并达到优秀体验.Uni-a ...
机器学习算法快速上手-python语言与numpy库
1 Python快速上手 1.1.Python简介 Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言. Python 的设计具有很强的可读性,相比其他语言经常使用英文关键字 ...
大厂都有哪些●快速上手●项目管理秘籍？
为防止疫情蔓延,互联网公司纷纷开启SOHO办公模式. 停工不停业. 尤其与疫情相关的服务工作,都在快马加鞭的进行中. 比如优酷的"战疫情"专题."在家上课"项目 ...

uni-app快速上手顺序