对uni—app开发环境的学习

对于编译器的安装

 首先是对于编译器的安装  HbuilderX 这个编译器是一个通用的前端开发工具  但为 uni -app做了强化和优化。 

uni—app是一个使用Vue.js开发的所有前端应用的框架，开发者编写一套代码 就可以发布在iOS Android  H5 以及支付宝 微信 钉钉  等等平台上。 所以总的说来 uni -app是一个好的小程序开发框架 ，对于开发者来说 减少了学习成本等便利。

新建项目

对于新建uni—app项目的认识 

 static这个包里面是存放静态资源的，比如图片 

App.vue 是我们的跟组件 所有的页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数

pages.json 文件是用来对uni-app进行全局配置的，决定页面文件的路径，窗口样式，原生的导航栏，底部的原生tabbar等等

manifes.json 文件是应用的配置文件，用于指定应用的名称 图标 权限等 

 main.js 是项目的入口文件

uni-app有如下规范

页面文件遵循Vue单文件组件规范

组件标签靠近小程序规范

JS API 靠近微信小程序规范 ，但需要更改前缀 

数据绑定及事件处理同Vue.js规范，同时补充了 APP以及页面的生命周期

为兼容多端运行 使用flex进行布局开发

微信小程序插件和uni-app的接入 

对全局进行配置

 

配置tabbar 

如果应用是一个多tab应用，可以通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应页面

 

 

 condition启动模式配置

 

 

 相当于一个二级页面的样子

text 组件的基本使用

组件包括 视图容器 基础内容 表单组件 导航 媒体组件 地图 画布 webview 等等选择

selectable 表示的意思是可以选中的文字  类型为 boolean 默认值为false 

decode 表示是否解码  为boolean类型   默认值是false

space是表示显示连续空格 类型为string  space里面包括

ensp（中文字符空格一半大小）  emsp（中文字符空格大小） nbsp（根据字体设置的空格大小）

view组件的基本使用

类似于HTML（超文本编译语言）中的div

class是设置的一个样式

hover—class 类型为String  默认值为none 指定按下去的样式类 为none是没有点击态效果

hover—stop—propagation 类型为Boolean 默认值为false 指定本节点的祖先节点出现点击态

hover—start—time 类型为Number 默认值为50  按住多久后出现点击态

hover—stay—time 类型为Number 默认值为400 手指松开后点击保留时间 

button按钮组件的使用

<button>按钮</button>  size=“mini” 可以改为mini

type表示按钮的样式格式

plain 表示按钮是否镂空 

disabled表示按钮是否禁用 loading表示图标是否带loading的图标

image组件的使用

插入动态gif图片，然后图片可以进行缩放，aspectFit 等等

uni中样式学习以及如何使用scss和字体图标

rpx是响应式的px，根据屏幕宽度自适应的动态单位，其中750px是填满屏幕，如果屏幕变宽，rpx实际显示效果会等比放大

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用；表示语句结束。

支持基本常用的选择题class，id，element等

在uniapp中不能使用*选择器

page相当于body节点

设置rpx为375 就会占满屏幕的一半位置 

利用@import 导入css 对于vue进行一个修改

基本数据绑定

使用export default在data定义数据引用 相当于一个函数

利用插值表达式渲染基本数据，在插值表达式中使用三元运算符，基本运算

v—bind和v—for的使用

加入v-bind就变成一个属性了 不单单是一个字符串 <image: src="imgUrl"> </image>

v-for   <view v-for="(item,index) in arr">

序号：{{index}}，字{{item，name}}，年龄{{item，age}}