5地图组件 uni_uni-app学习笔记（一）-- uni-app简介

uni-app入门

uni, 从这个单词的意思，就能看的出来，Dcoud社区的野心 这个试图统治整个前端界的技术，到底有没有那么好呢？

科普

Dcloud是干嘛的？

著名的国产开源开发工具，Hbuilder，就是他们家的产品之一

他们家另外一款重量级产品，就是H5+App技术

简单的说，一个前端，可以利用他们提供的开发环境，以及【MUI】 框架
轻轻松松的就可以用JS写出安卓和 IOS应用
（好吧，其实也没那么轻松，学习成本还是挺高的）
尽管现在已经有了 react-native 和Flutter这样的优秀的技术

但个人认为H5+技术，更加接近手机端原生规范。

H5+并没能满足他们的野心，于是又推出了uni-app

这是一个多端的开发框架。简单的说：
你写出一套代码，然后可以根据需要
打包出 web应用、安卓app、IOSapp、微信小程序、支付宝小程序、头条小程序、百度小程序......

赶紧去官网看一下介绍，感受一下它牛逼的气息。

https://uniapp.dcloud.io/

关于uni-app的由来

建议大家去看一下这个链接
https://uniapp.dcloud.io/history关于小程序，微信并不是鼻祖，Dcloud才是

学习成本高吗

如果你熟悉微信小程序开发
如果你熟悉vue框架
那么学习成本 ~~ 基本等于0

因为它采用了小程序的项目架构，同时结合vue框架技术来编写参考这个链接即可 （mpvue）
http://mpvue.com/

注意事项

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

页面文件遵循 Vue 单文件组件 (SFC)，也就是必须单文件组件的形式编写页面组件
标签靠近小程序规范，详见uni-app 文档也就是用小程序的组件写页面标签
接口能力（JS API）靠近微信小程序规范，详见文档例如 uni.request(...)
数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期例如 onLoad、onShow、onHide等
为兼容多端运行，建议使用flex布局进行开发

一个uni-app工程，默认包含如下目录及文件：

uni-app 在发布到H5时支持所有vue的语法；

发布到App和小程序时，由于平台限制，无法实现全部vue语法，但uni-app仍是是对vue语法支持度最高的跨端框架。

相比Web平台， Vue.js 在 uni-app 中使用差异主要集中在两个方面：

新增：uni-app除了支持Vue实例的生命周期，还支持应用启动、页面显示等生命周期
受限：相比web平台，在小程序和App端部分功能受限，具体参见文档。

https://uniapp.dcloud.io/use

uni-app App 端内置 HTML5+ 引擎

我们用 js 可以直接调用丰富的手机端原生能力。
使用H5+ API的时候，需要注意一些内容，详见文档

https://uniapp.dcloud.io/use-html5plus

作为一个跨了这么多端的集大成者，没有点坑是不可能的

详情参见文档，实际的坑，尤其是app端，其实远不止这么多
不过uni-app发展迅速，相信这些问题很快会得到解决

https://uniapp.dcloud.io/matter

动手尝试一下

1、下载hubuildX工具

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

3、选择uni-app，输入工程名，如：hello-uniapp，点击创建，即可成功创建 uni-app。点击模板里的 Hello uni-app 即可体验官方示例。

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

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

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

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

8、发布为H5网页应用

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

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

这里是一些官方示例和第三方案例

https://uniapp.dcloud.io/case

千锋HTML5学院：微信小程序学习笔记（五）-- 小程序UI组件库zhuanlan.zhihu.com

千锋HTML5学院：uni-app学习笔记（二）-- uni-app详解zhuanlan.zhihu.com