跨平台框架Uni-app入坑笔记(一)
一、介绍
Uni-app是一个前端框架，使用Vue.js开发，继承自Vue.js，提供了完整的Vue.js体验。
Vue文字教程请访问W3Cschool课程
Vue视频教程请访问Bilibili相关视频课程，视频课程使用VS编辑器，讲解较为详细。
提供了条件编译优化，可以为某个平台编个性化代码而不影响其他平台。
打包到APP时使用5+引擎，5+的所有能力都可以在uni-app中使用。
二、开发工具和环境
开发工具使用HbuilderX（内置uni-app项目模板）：下载地址
微信开发者工具（编译调试小程序所用）：下载地址
APP模拟器及配置教程：教程地址
三、开发规范及目录结构
（1）页面规范——Vue单文件组件规范
.vue后缀名文件是自定义文件类型，使用类HTML语法描述vue组件。
每个vue文件包括三种类型的*语言块：<template> <script> <style>，此外还允许添加自定义块。
vue-loader会解析文件，提取每个语言块，如有必要会通过其他loader处理，最后将他们组装成一个ES Module，它的默认导出是一个Vue.js组件选项的对象。
#语言块、模板
每个.vue文件有且仅有一个<template>块
#脚本
每个.vue文件有且仅有一个<script>块
#样式
每个.vue文件可以有多个<style>标签
#自定义块
可以在.vue文件中添加额外的自定义块来实现项目的特定需求。
#src导入
可以通过src属性导入外部文件
注意：src导入遵循和webpack模块相同的路径解析规则，即（相对路径需要以./开始）
（2）组件标签规范
注意，不能使用标准HTML标签，也不能用JS对dom进行操作。详见uni-app组件规范手册
接口能力（JS API）靠近微信小程序规范，详见uni-app接口规范
数据绑定及事件处理靠近Vue.js规范，同时补充了APP及页面的生命周期
，建议使用Flex布局进行开发以兼容多端运行。flex布局视频教程
（3）目录结构（1.9.2.20190417版本目录）：
pages ：业务页面文件存放目录
static ：存放应用引用静态资源（图片，视频等）的地方，注意：惊天资源只能存放于此
APP.vue ：应用配置，用来配置APP全局样式以及监听应用的生命周期
main.js ：Vue初始化入口文件
mainfest.json ：配置应用名称、appid、logo、版本等打包信息
pages.json ：配置页面路由、导航条、选项卡等页面类信息
uni.scss ：uni-app内置的常用样式变量，对于APP开发者（插件使用者），可以通过修改这些变量来定制自己的插件，实现自定义主题功能。如果项目使用了scss预处理，可以直接在scss代码中使用其中的变量，同时无需import这个文件。
四、页面样式与布局
重要说明：新版本HBuilderX中已经将app.vue的全局样式删除了，在开发过程中需要flex时使用flex即可
（1）尺寸单位
框架目前仅支持长度单位px和%。uni-app的基准宽度为750px
页面元素宽度在uni-app中的宽度计算公式：750px * （元素在设计稿中的宽度）/（设计稿基准宽度）
（2）样式导入
使用@import语句导入外联样式，后跟需要导入的外联样式表的相对路径，以分号结束
（3）内联样式
框架组件支持style、class属性来空值组件的样式
style：接受动态样式，在运行时会解析，尽量避免将静态的样式写进style中以免影响渲染速度
class：用于指定样式规则，其属性值是样式规则中类选择器名（样式类名）的集合，样式类名前无需加. ，样式类名之间用空格分隔
（4）选择器
.class .intro 选择多有拥有class="intro"的组件
#id #firstname 选择拥有id="firstname"的组件
element view 选择所有view组件
element，element view，checkbox 选择所有文档的view组件和所有的checkbox组件
：：after view：：after 在view组件后面插入内容，（仅微信小程序和5+APP生效）
：：before view：：before 在view组件前面插入内容，（仅微信小程序和5+APP生效）
（5）全局样式与局部样式
定义在App.vue中的样式为全局样式，作用于每个页面。在pages目录下的vue文件中定义的样式为局部样式，制作用在对应的页面，并会覆盖App.vue中相同的选择器。
（6）flex布局
支持跨平台
本文地址：https://blog.csdn.net/qq_41790461/article/details/109264161