学习记录

黑马视频教程

一个View代表一个View或ViewGroup,一个模块至少一个View
display：flex
flex-dirction:row 子布局水平布局
justify-content;center 子元素左右居中
align-items:center：子元素上下居中
padding: 10px 15px 左右10px，上下15px
border-bottom:1px #fff soild 底部边框1px颜色#fff实线
border-radius:10px 边框圆角大小
font-weight:bold 字体加粗
flex-wrap:wrap 子元素超出一行支持换行

position：relative 一般用于父元素代表相对布局
position: absolute 子元素相对绝对定位
top：-8px 位于顶部偏移父布局-8px
right:-8px 位于右边偏移父布局-8px

setTimeout(()=>{
//延迟1s触发
}, 1000);

{{item.name}} : 取name值显示

列表分页：

onPullDownRefresh() {
  //触发下拉刷新
}
onReachBottom() {
  //页面触底情况会触发该方法
}

//停止下拉刷新
uni.stopPullDownRefresh();

匿名回调函数
onLoad() {
//页面初始化请求商品数据
      getGoodsList(()=>{

});
}

getGoodsList(callBack) {
  ......
  callBack && callBack() //等同于：callBack != null 调用callBack()方法
}

Item抽取：

新建components目录，新建goods-list.vue,代表一个item样式，
复制view布局和style。item需要外界传进来goods数据遍历。

item.vue

重要：Vue子组件向父组件传值（this.$emit()方法）https://blog.csdn.net/sisi_chen/article/details/81635216

index.vue

//3.在view中使用标签
 
//上面:goods代表goods-list.vue中属性goods需要动态绑定数据，
@itemClick是item使用$emit()子组件向父组件传值

//view中使用过滤器
时间：{{item.time | formatDate}}

网络请求封装

export const myRequest //暴露一个myRequest方法

return new Promise()：异步通过Promise去封装，并可提供回调

    // 封装get请求
    const baseUrl = "http://localhost:8082"
    export const myRequest = (options)=>{
        return new Promise((resolve,reject)=>{
            uni.request({
                method: options.method || "GET", //method为空，则默认为GET
                data: options.data || {}, //data为空，则默认为{}
                url: baseUrl+options.url,
                success(res) {
                    if(res.data.status !== 0) {
                        return uni.showToast({
                            title: '获取数据失败'
                        })
                    }
                    resolve(res)
                },
                fail(err) {
                    uni.showToast({
                        title: '获取数据失败'
                    })
                    reject(err)
                }
            })
        })
    }

//每个页面都会用到，提供给外界使用，需在main.js中定义
import { myRequest } from './util/api.js' //因为封装的方法为myRequest,{}中myRequest相当于引用方法名。
Vue.prototype.$myRuquest = myRequest //挂载再Vue全局上，类似定义为全局组件

使用方式：
const res = await this.$myRuquest({
                    url: '/api/getgoods?pageindex='+this.pageindex
})
this.goods = [...this.goods,...res.data.message]

程序员来了uni-app视频教程

{{title}}:数据绑定
data() {
    return {
      title: "hello world" //data相当于mode，对view提供数据
  }
}

 
//普通属性前加":"代表动态绑定数据
//@符号加属性代表事件

生命周期

一下为APP生命周期，相当于Application
onLaunch:初始化完成
onShow:  从后台进入前台显示，类似onResume
onHide: 从前台进入后台，类似：onPause

页面生命周期：
onLoad():  类似onCreate()
onShow(): onResume()
onReady():页面渲染完成
onHide(): onPause()
onPullDownRefresh():用户下拉刷新操作
onShareAppMessage(object)：用户点击右上角分享
onPageScroll():页面滚动
onBackPress(): 监听页面返回

生命周期.png

尺寸单位

uni-app屏幕宽度固定为750 upx

数据绑定

{{表达式}}
{{student.age + 'age'}}:字符串拼接
{{student.age >= 18  ? '成年' : '未成年'}}：数据绑定中加逻辑表达式

'v-bind:组件属性名', v-bind可以省略，直接冒号+属性名
例：:url='url'

事件

@click：点击
@tap: 触摸
@longpress:长按

条件渲染

v-if、v-else

isShow未true显示的内容


isShow未false显示的内容



控制该view的显隐

条件渲染

v-for:
 //key=index用索引当key，也可用数据的id:item.id
      姓名{{item.name}} ,年龄{{item.age}}

data() {
  return {
list:[....]
}
}

arrayList.push(obj):数组尾部添加
arrayList.unshift(obj):数组头部添加

双重循环index问题：
v-for="(item, index) in list" :key="index"
v-for="(subItem, itemIndex) in item.subList"  :key="itemIndex"

跨端兼容

#ifdef
#ifndef

直接在view标签中定义style:

Flex布局

弹性盒状布局，伸缩元素、自动填充、自适应。
flex-direction:设置元素的排列方向
row、cloumn:水平、竖直排列

flex-wrap:使容器内的元素换行
nowrap:不换行   wrap:换行

justify-content: 主轴对齐方式
flex-start、flex-end、center、space-between、space-around

align-items:交叉轴对齐方式

order:1 排序方式，数字越小，排列在前，由小到大。

flex-grow:控制元素放大比例
flex-shrink:控制元素缩小比例
flex-basic:设置元素固定或自动控件的占比

项目

逻辑中添加:debugger，进行断点
console.log(""):打印日志