1. 学习uni-app
1.1. 概述
- 号称一次编写多端运行的前端框架,架构图如下
- 对某些不同平台的特殊功能,可以通过条件进行自动编译,也就是写两套代码,不同的环境会选择不同代码编译
1.2. 推荐工具
- 其本身推荐的开发工具是HBuilderX,官方IDE下载地址
1.3. 开始趟坑
1.3.1. 新建页面
- 由于一开始我建错目录,删掉重新建过,不断报这个错
文件查找失败:'./pages/info/info/info.vue' at main.js:3
- 原因就是用HBuilderX新建目录的时候会在
pages.json中添加路径
,它读路径的顺序也是从上到下,然后一直读的是错的那个?? - 解决办法就是去掉原来错误的路径
uni-app官方地址
1.4. 系统学习
- 这个看起来比原来的vue麻烦些,通过下面这种方式绑定,输入input内容,text跟着改变
<view class="content"> <input type="text" :value="title" @input="change"/> <text>{{title}}</text></view>methods: { change(e){ this.title = e.detail.value; }}
1.4.2. 知识点
<block> 横向排列unshift 数组头部添加元素
1.4.2.1. 样式
/* #ifdef H5 */height: auto;/* #endif */
1.4.2.2. Flex布局(css样式)
- flex container:flex容器
- flex item:flex项目(元素)
- flex direction:布局方向
- row 横向顺序
- row-reverse 横向逆序
- column 竖向顺序
- colum-reverse 竖向逆序
- 元素排序方向:主轴,垂直方向是交叉轴
- flex-wrap:使容器内的元素换行,默认不换行
- justify-content:设置元素再主轴上的对齐方式
- flex-start 左对齐
- flex-end 右对齐
- center 居中对齐
- space-between 元素间间距相同
- space-around 两边留有空白,两边空白距离和元素间空白距离1:2的关系
- align-items:设置元素在交叉轴上的对齐方式
- flex-start 起点对齐
- flex-end 末点对齐
- center 居中对齐
- baseline 保证元素中文字基准线同一条
- stretch 拉伸(默认)
- align-content:设置轴线的对齐方式(轴线当做元素)
- flex-start 起点对齐
- flex-end 末点对齐
- space-between
- space-around
- stretch
1.4.2.3. Flex元素属性(css样式)
- order:用于设置flex容器内部的每个元素的排列顺序,默认0
- flex-grow:控制元素放大比例,默认0,不变,把剩余空间按比例给相应的组件
- flex-shrink:控制元素缩小比例,默认为1,设置为0表示不进行缩放
- flex-basis:设置元素固定或自动空间的占比,不需要吃掉剩余空间
- align-self:重写align-items父属性,在子元素写这个,特立独行的意思
1.5. 网络请求
- uni.request类似于ajax
- onLoad 只加载一次 onShow每次显示页面都加载
1.6. 样式
- white-space: nowrap; 不换行
- flex-wrap: wrap;换行
- justify-content: space-between;元素间留间隙
1.7. 页面跳转
- uni.navigateTo 可返回的跳转
1.8. 注意点
- e.currentTarget.dataset.gindex; 这里传参原本是gIndex,取值需要转小写来取
1.9. 图片下载
- 微信小程序的图片下载需要配置服务器域名,否则不能下载,配置在小程序管理里找,同事需要配置域名的有request,socket,uploadFile,downloadFile
1.10. 知识点
0faeff 蓝色头背景,比较好看
1.11. 常用生命周期
- onLoad
- onShow
- onReady
- onHide
- onUnload
- onPullDownRefresh
- onShareAppMesage
- onTabItemTap
1.12. class支持语法
- :class="{active:isActive}",后一个是data中定义的boolean值,表示是否使用active这个class
- [activeIndex==0?‘isActive‘:‘‘] 三元运算
未完待续