前言
还是那个问题学校要搞个跨平台的软件，因此要学习一下uniapp。由于时间有限只能简单记录一下，防止之后做的时候忘记
官网
https://uniapp.dcloud.io/
添加页面
在此处新建页面
大致新建的初始文件如下所示
他会自动在pages.json注册如下图
在官网的tabBar处复制代码，然后编辑页面的地址以及其他信息，例如图标信息
可以调整顺序来做到前后页面的显示顺序
如下图所示
组件
添加组件
在组件文件夹（没有的手动创建）创建一个自定义组件
然后在页面的相应位置导入组件
组件传属性的值（父组件使用 props 把数据传给子组件。）
传入msg属性
定义msg
效果
调用方法传值（$emit子组件调用父组件的方法并传递数据）
定义父组件的方法
子组件点击调用
定义调用父组件
效果
兄弟间组件通信
uni.$on方法
onLoad() {
uni.$on('testEvent',(rel)=>{
console.log(rel)
})
},
注册函数，注意这里的函数可以在全局任意的地方调用
测试在另一个vue文件中调用
效果
uni.$once方法
就是这个方法只能被调用一次
表达式
<text>我是首页</text>
msea
<view></view>
<view></view>
<view>Msea</view>
<view>TestOnece</view>
<image style="width: 200px; height: 200px; background-color: #eeeeee;"
:mode="item.mode" :src="src"
@error="imageError"></image>
效果
属性绑定
测试代码
<view :class="'box' + 1">test</view>
<view :style="{ width: '100px', height: '100px', background: 'red' }"></view>
<view :class="{ box11: true }"></view>
<view :class="{ box22: true }"></view>
<view :class="['box11', 'box33']"></view>
/---------------------------------------------------------
<style lang="scss">
.box11 {
width: 100px;
height: 100rpx;
background: green;
}
.box22 {
border: 1px solid #333333;
@extend .box11;
}
.box33 {
border: 5px solid #331005;
}
.box44 {
background: yellow;
}
</style>
效果
for循环选定
<template>
<view>
<view>
<view v-for="(item, index) in names"
:key="index"
:class="{box44:index==currentIndex}"
@click="setIndexNum(index)"
></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
currentIndex:0
};
},
methods: {
setIndexNum(index){
this.currentIndex=index;
}
}
};
</script>
<style lang="scss">
.box11 {
width: 100px;
height: 100rpx;
background: green;
}
.box22 {
border: 1px solid #333333;
@extend .box11;
}
.box33 {
border: 5px solid #331005;
}
.box44 {
background: yellow;
}
</style>
效果
生命周期
https://uniapp.dcloud.io/collocation/frame/lifecycle
路由与页面跳转
https://uniapp.dcloud.io/api/router?id=navigateto
常使用的组件
swiper
<swiper @change="swiperTest" indicator-dots="true" autoplay="true" interval="1500">
<swiper-item >
<image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg"></image>
</swiper-item>
<swiper-item><image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg"></image>
</swiper-item>
<swiper-item><image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg"></image>
</swiper-item>
</swiper>
效果
scroll-view
<scroll-view scroll-x="true" style="white-space: nowrap;">
<view id="demo1" style="display: inline-block; width: 200px;height: 200px;background: red">A</view>
<view id="demo2" style="display: inline-block; width: 200px;height: 200px;background: green">B</view>
<view id="demo3" style="display: inline-block; width: 200px;height: 200px;background: black" >C</view>
</scroll-view>
效果
