uniapp简介
-
UniApp简介
1）框架介绍
uni，读 you ni，是统一的意思 uniapp是Dcloud公司的产品，是一个跨端开发框架，基于vue.js技术栈, 被用于移动端开发 用UniApp编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。2）框架生态 DCloud公司拥有800万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件
uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势
环境搭建
hbuilderx
手机模拟器hbuilderx连接到模拟器，选择工具--设置，打开配置界面,选择运行配置
插件市场插件安装
插件市场的插件主要有组件类和编译类两大类
1) 组件类
点击安装后会直接安装到当前打开的uniapp项目中，而且是指定的文件夹components中
2) 编译类
类似于webpack的loader，这个是放在hbx的安装包里
3) 安装常用的插件
目录结构
开发规范
页面文件遵循 Vue 单文件组件 (SFC) 规范
组件标签靠近小程序规范，详见uni-app 组件规范
接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
为兼容多端运行，建议使用flex布局进行开发
资源路径说明
1) 模板内引入静态资源
template内引入静态资源，如image、video等标签的src属性时，可以使用相对路径或者绝对路径，
注意事项
@开头的绝对路径以及相对路径会经过base64转换规则校验
引入的静态资源在非h5平台，均不转为base64
H5平台，小于4kb的资源会被转换成base64，其余不转
2) JS文件引入
js文件或script标签内（包括renderjs等）引入js文件时，可以使用相对路径和绝对路径
3) CSS引入静态资源
css文件或style标签内引入css文件时（scss、less文件同理），可以使用相对路径或绝对路径
注意事项
编译到任意平台时，static 目录下的文件均会被完整打包进去，且不会编译。非 static 目录下的文件（vue、js、css 等）只有被引用到才会被打包编译进去。
static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。
css、less/scss 等资源不要放在 static 目录下，建议这些公用的资源放在自建的 common 目录下。
全局配置/tabbar配置
globalStyle
"globalStyle": {
// 导航栏标题颜色及状态栏前景颜色，仅支持 black/white
"navigationBarTextStyle": "white",
// 导航栏标题文字内容
"navigationBarTitleText": "撩课",
// 导航栏背景颜色（同状态栏背景色）
"navigationBarBackgroundColor": "#00aa7f",
"backgroundColor": "#ff0000",
// 是否开启下拉刷新
"enablePullDownRefresh": false,
// 下拉 loading 的样式，仅支持 dark / light
"backgroundTextStyle": "light"
// "titleImage": ""
}
easycom和condition 都是为了简化操作的
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。
具体看官网吧，写的很好，我这里只是整理一些基础必备。
condition就是简化操作
启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。
常用组件
view
text
button
image 注意里面的图片裁剪方法
响应式单位
responsive pixel
可以根据屏幕宽度进行自适应
规定屏幕宽为750rpx
如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素
插件的使用和安装
见官网
swiper
组件封装
这里uniapp组件封装，和其他的没有区别
把复用的代码抽离出来，把需要定制的东东传值传进来
引入的话，vue是import然后注册了才能用 uniapp可以按easycom规范在指定文件夹中创建组件，可以免去引入注册
生命周期
这个和vue不太一样
导航跳转
还要了解跳转时候的数据传递
下拉和上拉
网络请求
数据缓存
条件编译
地图绘制
本文章为我在“撩课学院”学习笔记，部分内容引自老师发的课件
