uniapp基础学习

1.概念

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

2.特点

1.跨平台更多
2.运行体验更好
3.通用技术栈，学习成本更低（vue的语法，微信小程序的api）
4.开放生态，组件更丰富

3.安装

（1）通过HBuilderX可视化界面

 创建/运行/打包/发布

详情见：https://uniapp.dcloud.io/quickstart?id=_1-%e9%80%9a%e8%bf%87-hbuilderx-%e5%8f%af%e8%a7%86%e5%8c%96%e7%95%8c%e9%9d%a2
（2）通过vue-cli命令行

使用正式版（对应HBuilderX最新正式版）
vue create -p dcloudio/uni-preset-vue my-project
使用alpha版（对应HBuilderX最新alpha版）
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project

会提示选择项目模板，初次体验建议选择 hello uni-app 项目模板，可体验uni-app框架的组件、接口、模板如下

运行并发布uni-app
创建成功后进入根目录

npm run dev:%PLATFORM%
npm run build:%PLATFORM%

%PLATFORM% 可取值如下：

4.组件/标签的变化

div 改成 view
span、font 改成 text
a 改成 navigator
img 改成 image
input 还在，但type属性改成了confirmtype
form、button、checkbox、radio、label、textarea、canvas、video 这些还在。
select 改成 picker
iframe 改成 web-view
ul、li没有了，都用view替代
audio 不再推荐使用，改成api方式，背景音频api文档
其实老的HTML标签也可以在uni-app里使用，uni-app编译器会在编译时把老标签转为新标签，比如把div编译成view。但不推荐这种用法，调试H5端时容易混乱。

新增了一批手机端常用的新组件

scroll-view 可区域滚动视图容器
swiper 可滑动区域视图容器
icon 图标
rich-text 富文本（不可执行js，但可渲染各种文字格式和图片）
progress 进度条
slider 滑块指示器
switch 开关选择器
camera 相机
live-player 直播
map 地图
cover-view 可覆盖原生组件的视图容器 cover-view需要多强调几句，uni-app的非h5端的video、map、canvas、textarea是原生组件，层级高于其他组件。如需覆盖原生组件，比如在map上加个遮罩，则需要使用cover-view组件

css的变化

（1） *选择器不支持；
（2）元素选择器里没有body，改为了page。微信小程序即是如此。

单位的变化

 px无法动态适应不同宽度的屏幕，rem无法用于nvue/weex。
 如果想使用根据屏幕宽度    自适应的单位，推荐使用rpx

css变量

status-bar-height	系统状态栏高度
window-top	内容区域距离顶部的距离
window-bottom	内容区域距离底部的距离	

本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径

5.页面跳转（pages.json）

每次添加一个页面他这里就会有
path是项目路径
style是他的样式
navigationBarTitleText标题
navigationBarBackgroundColor标题的背景色
navigationBarTextStyle标题的颜色

5.样式导入

默认配置文件中@就代表src目录。如：
import Person from '@/components/Person’
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
示例代码：

<style>
    @import "../../common/uni.css";
    .uni-card {
        box-shadow: none;
    }
</style>

6.自定义头部导航栏

在pages.json里添加

需要手动创建

7.引入插件

插件市场：https://ext.dcloud.net.cn/
搜索需要用到的插件，例如：



选择项目之后会自动将插件下载到components,并且会自动新建components
然后根据插件下面的使用方式将代码复制到页面之中。