版权声明：本文为博主原创文章，转载请注明地址。 https://blog.csdn.net/huangxiaoguo1/article/details/84581145
wepy学习基础
1、引入样式（以app.wpy为例）
在src目录下创建文件夹styles/base.css
在app.wpy中引入base.css样式
2、less提取css样式
<style lang="less">
@color: red;
page {
background-color: aqua;
color: @color;
}
</style>
3、data和method的写法
- 注意：事件绑定语法使用优化语法代替。
1.原 bindtap="click" 替换为 @tap="click"，
原catchtap="click"替换为@tap.stop="click"。
2.原 capture-bind:tap="click" 替换为 @tap.capture="click"，
原capture-catch:tap="click"替换为@tap.capture.stop="click"。
- setData绑定数据的变更：
setData({msg1:”wepy”}) <==> this.msg1=”mywepy”;
需注意的是，在异步函数中更新数据的时候，必须手动调用$apply方法，才会触发脏数据检查流程的运行。如：
setTimeout(() => {
this.title = 'this is title';
this.$apply();
},
4、计算属性computed
在data中这种变量male值为false
在computed中计算 male1和male2的值
在view中显示
<view>
{{male}}:{{male1}}:{{male2}}
</view>
结果为：
5、监控属性watch
监控data中某个数据变化时，触发事件
例如：
data = {
msg1: 'wepy',
person1: {
name: '张三',
age: '18'
},
male: false
};
监控person1信息变化：
watch={
person1(newValue,oldValue){
this.person1.name="李四"
console.log(newValue,oldValue);
}
};
结果显示
注意：能用computed尽量不用watch，防止破坏数据初始完整性
6、自定义属性和自定义函数（不能使用与视图，普通自定义方法不能放在methods对象中）
在data和methods平行节点下
onLoad() {
console.log('onLoad');
this.showMyData();
};
//自定义属性
myData = '我是自定义属性';
// 自定义函数
showMyData() {
console.log(this.myData);
}
7、自定义组件
- src目录下创建components文件夹
- components下创建自定义组件页面xxx.wpy，继承wepy.component
注意：类名保持一致
- 在script节点下引入自定义组件
import MyHeader from '../components/MyHeader';
import MyFooter from '../components/MyFooter';
- Export default节点下声明自定义组件
components = {
MyHeader,
MyFooter
};
- 使用自定义组件
<template>
<MyHeader></MyHeader>
<MyFooter></MyFooter>
</template>
8、增加页面
在app.wpy配置页面config配置中
pages: ['pages/index2','pages/index'],
9、props传值
- 静态传值
静态传值为父组件向子组件传递常量数据，因此只能传递String字符串类型。
模拟数据（声明数据msg1）
data = {
msg1: '父组件的数据'
};
传递数据
<MyHeader :msg1="msg1"></MyHeader>
注意："："不能省略
接收数据
在子组件export default中声明接收
props = {
msg1: String
};
使用数据
<view class="myHeader">
<!-- 自己的头部自定义组件：{{name}} -->
{{msg1}}
</view>
- 动态传值，单向绑定
使用sync，只需要在父组件传递数据时添加sync即可实现，子组件的数据随着父组件变化而变化
<MyHeader :msg1.sync="msg1"></MyHeader>
- 动态传值双向绑定
使用sync 和twoWay，只需要在父组件传递数据时添加sync即可实现，子组件添加twoWay:true
父组件
<!-- 动态传值，单向绑定的方式1 sync 2 .twoWay:true-->
<MyHeader :msg1.sync="msg1"></MyHeader>
子组件
props = {
msg1: {
type:String,
twoWay:true
}
};
10、父子通信$broadcast（实现父事件对子事件的调用）
- 创建子组件Cat、Dog
<style lang="less" scoped>
.myHeader {
font-size: 30rpx;
}
</style>
<template>
<view class="myHeader">
{{msg}}
</view>
</template>
<script>
import wepy from 'wepy';
export default class Cat extends wepy.component {
data = {
msg: ''
};
events = {
say() {
console.log('猫叫');
this.msg = '猫叫';
}
};
}
</script>
- 父组件调用
<style lang="less">
page {
font-size: 50rpx;
}
</style>
<template>
<view>
<view @tap="myTap">{{msg}}</view>
<Cat></Cat>
<Dog></Dog>
</view>
</template>
<script>
import wepy from 'wepy';
import Cat from '../components/Cat';
import Dog from '../components/Dog';
export default class Index3 extends wepy.page {
config = {
navigationBarTitleText: '自定义组件',
navigationBarTextStyle: 'white'
};
data = {
msg: '点击触发子组件say事件'
};
components = {
Cat,
Dog
};
methods = {
myTap() {
//开始触发组件的方法、广播
//this.$broadcast("子组件的事件名",...参数对象);
this.$broadcast('say', null);
}
};
}
</script>
主要使用的是父组件$broadcast，和子组件events
11、子组件向父组件通信$emit
- 创建子组件SonA、SonB
<style lang="less" scoped>
.myHeader {
font-size: 30rpx;
}
</style>
<template>
<view
class="myHeader"
@tap="aTap"
>
点击SonA
</view>
</template>
<script>
import wepy from 'wepy';
export default class SonA extends wepy.component {
data = {
msg: ''
};
methods = {
aTap() {
//触发父组件的方法 $emit
this.$emit('showMsg', 'sonA');
}
};
}
</script>
- 父组件调用
<style lang="less">
page {
font-size: 50rpx;
}
</style>
<template>
<view>
<view>{{msg}}</view>
<!--
引入两个组件 SonA、SonB
SonA触发事件，带上参数
SonB触发事件，带上参数
-->
<SonA></SonA>
<SonB></SonB>
</view>
</template>
<script>
import wepy from 'wepy';
import SonA from '../components/SonA';
import SonB from '../components/SonB';
export default class Index4 extends wepy.page {
config = {
navigationBarTitleText: '自定义组件',
navigationBarTextStyle: 'white'
};
data = {
msg: ''
};
components = {
SonA,
SonB
};
events = {
showMsg(source) {
this.msg = source + '传递进来的';
}
};
}
</script>
子组件使用$emit进行触发父组件的事件，父组件使用events进行接收（自定义事件和&emit结合使用父组件不用再使用events进行接收，直接执行自定义事件
）
12、平行组件之间的通信$invoke
- 父组件
<style lang="less">
page {
font-size: 50rpx;
}
</style>
<template>
<view>
<A></A>
<B></B>
</view>
</template>
<script>
import wepy from 'wepy';
import A from '../components/A';
import B from '../components/B';
export default class Index5 extends wepy.page {
config = {
navigationBarTitleText: '自定义组件',
navigationBarTextStyle: 'white'
};
components = {
A,
B
};
}
</script>
- A组件
<style lang="less" scoped>
.myHeader {
font-size: 30rpx;
}
</style>
<template>
<view
class="myHeader"
@tap='myTap'
>
A:
</view>
</template>
<script>
import wepy from 'wepy';
import B from './B';
export default class A extends wepy.component {
data = {
msg: ''
};
methods = {
myTap() {
//直接调用b组件中的方法 show
// this.$invoke("要调用的组件的路径","方法名",参数)
this.$invoke('B', 'show', '------A的传参');
}
};
components={
B
}
}
</script>
- B组件
<style lang="less" scoped>
.myHeader {
font-size: 30rpx;
}
</style>
<template>
<view class="myHeader">
B:{{msg1}}
</view>
</template>
<script>
import wepy from 'wepy';
export default class B extends wepy.component {
data = {
msg1: ''
};
methods = {
show(arg1) {
console.log('接收A组件的数据' + arg1);
}
};
}
</script>
注意：A子组件要调用B子组件的事件，必须引入B组件
13、组件自定义事件处理函数（@tap.default,@tap.stop）
-
.default: 绑定小程序冒泡型事件，如bindtap，.default后缀可省略不写；
-
.stop: 绑定小程序捕获型事件，如catchtap；
-
.user: 绑定用户自定义组件事件，通过$emit触发。注意，如果用了自定义事件，则events中对应的监听函数不会再执行。
注意：default是默认的冒泡事件，可以不写；
stop是阻断冒泡事件，但是注意父组件事件名称不可以和子组件的事件名称一样，否则事件不会阻断；
自定义事件 例如：@childFn.user="parentFn"（和&emit结合使用父组件不用再使用events进行接收，直接执行自定义事件）
14、插槽
-
单个插槽直接进行使用即可
面板子组件panel
<view class="panel">
<slot ></slot>
</view>
父组件引用
<panel>
<view >插入新视图</view>
</panel>
-
多个插槽需要进行命名
面板子组件panel
<view class="panel">
<slot name="title"></slot>
<slot name="content"></slot>
</view>
父组件引用需要进行对应
<panel>
<view slot="title">标题</view>
<view slot="content"> <text>内容</text> </view>
</panel>
15、拦截器
16、循环标签repeat
类似也mina框架中的block 当需要循环渲染Wepy组件时，必须使用Wepy定义的辅助标签默认项为item 索引为 index
<!-- 注意，使用for属性，而不是使用wx:for属性 -->
<repeat for="{{list}}" key="index" index="index" item="item">
<!-- 插入<script>脚本部分所声明的child组件，同时传入item -->
<child :item="item"></child>
</repeat>