黑马视频教程
一个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);
<text>{{item.name}}</text> : 取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
<script>
export default {
props: ['goods'] //使用外部导入进来的goods数据
methods:{
navigator() {
//item的点击，需要回调给外部,详解https://blog.csdn.net/sisi_chen/article/details/81635216
vue子组件向父组件传值
this.$emit('itemClick', id)
}
}
}
</script>
重要：Vue子组件向父组件传值（this.$emit()方法）https://blog.csdn.net/sisi_chen/article/details/81635216
index.vue
<script>
//1.导入vue文件并命名
import goodsList from '../../components/goods-list/goods-list.vue' //意思为导入goods-list.vue文件，命令为goodsList
//2.注册为组件，并声明标签
components: {"goods-list" : goodsList} //声明为goods-list标签，对应的组件名称是上面导入的goodsList名称
</script>
//3.在view中使用标签
<goods-list :goods="传入的数据" @itemClick="调用方法"> </goods-list>
//上面:goods代表goods-list.vue中属性goods需要动态绑定数据，
@itemClick是item使用$emit()子组件向父组件传值
<script>
export default {
data() {
return {
goods:[] //代表提供给view使用的数据，goods代表变量名，script中逻辑请求数据赋值给goods，view中如果使用会自动绑定数据和刷新操作。
}
}
//添加过滤器
filters{
//定义一个过滤时间的方法
formatDate(date) {
//date传进来，返回另一个值
return "格式化的值”；
}
}
}
</script>
//view中使用过滤器
<text>时间：{{item.time | formatDate}}</text>
网络请求封装
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视频教程
<text>{{title}}</text>:数据绑定
data() {
return {
title: "hello world" //data相当于mode，对view提供数据
}
}
<input :value="title" @input="change"/>
//普通属性前加":"代表动态绑定数据
//@符号加属性代表事件
生命周期
一下为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
<view v-if="isShow(这个是data里面提供的)">
isShow未true显示的内容
</view>
<view v-else>
isShow未false显示的内容
</view>
<view v-show="isShow">
控制该view的显隐
</view>
条件渲染
v-for:
<view v-for="item in list" :key="index"> //key=index用索引当key，也可用数据的id:item.id
<view>姓名{{item.name}} ,年龄{{item.age}}</view>
</view>
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:
<view style="width:200px; height 300px;"/>
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:设置元素固定或自动控件的占比
<style>
//导入外部css样式
@import url("xxx.css")
</style>
项目
逻辑中添加:debugger，进行断点
console.log(""):打印日志
网友评论