前言
通过前面的一篇文章,微信小程序组件化开发框架wepy 学习(一),大家搭建wepy环境应该没有问题了,可以自己去尝试一下,很简单的。
下面来具体讲讲wepy页面与组件直接有哪些东西。
文件
文件结构 文件结构类似 Vue 文件 扩展名为 .wpy
<template>
<!--渲染模板 对应wxml -->
</template>
<script>
// 脚本 对应 .js
</script>
<style>
/*样式 对应 wxss*/
</style>
文件类型 文件类型声明与<script>
有关
声明为app 即原生入口app.js,有且仅能声明一个。 声明类继承 wepy.app 即可。如下:
<script>
import wepy from 'wepy'
import 'wepy-async-function'
export default class extends wepy.app {
//config app.json 你新增一个页面 都要配置pages
config = {
pages: [
'pages/test'
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black'
}
}
// 全局数据对象
globalData = {
userInfo: null
}
// 构造器 使用了 requestfix 优化 不用可以忽略
constructor () {
super()
this.use('requestfix')
}
// 生命周期函数 自定义函数
onLaunch() {}
}
</script>
声明为page页面时, 页面为 无组件页面 ,声明类继承wepy.page即可。如下:
<script>
import wepy from 'wepy'
export default class Test extends wepy.page {
customData = {} // 自定义数据
customFunction () {} //自定义方法
onLoad () {} // 在Page和Component共用的生命周期函数
onShow () {} // 只在Page中存在的页面生命周期函数
config = {}; // 只在Page实例中存在的配置数据,对应于原生的page.json文件
data = {}; // 页面所需数据均需在这里声明,可用于模板数据绑定
components = {}; // 声明页面中所引用的组件,或声明组件中所引用的子组件
mixins = []; // 声明页面所引用的Mixin实例
computed = {}; // 声明计算属性(详见后文介绍)
watch = {}; // 声明数据watcher(详见后文介绍)
methods = {}; // 声明页面wxml中标签的事件处理函数。注意,此处只用于声明页面wxml中标签的bind、catch事件,自定义方法需以自定义方法的方式声明
events = {}; // 声明组件之间的事件处理函数
}
</script>
声明为组件页面时,页面为组件页面, 声明类继承wepy.component即可。如下:
<script>
import wepy from 'wepy'
export default class com extends wepy.component {
customData = {} // 自定义数据
props = {} // 父组件传入的参数
customFunction () {} //自定义方法
onLoad () {} // 在Page和Component共用的生命周期函数
config = {}; //只在Page实例中存在的配置数据,对应于原生的page.json文件
data = {}; // 页面所需数据均需在这里声明,可用于模板数据绑定
components = {}; // 声明页面中所引用的组件,或声明组件中所引用的子组件
mixins = []; // 声明页面所引用的Mixin实例
computed = {}; // 声明计算属性(详见后文介绍)
watch = {}; // 声明数据watcher(详见后文介绍)
methods = {}; // 声明页面wxml中标签的事件处理函数。注意,此处只用于声明页面wxml中标签的bind、catch事件,自定义方法需以自定义方法的方式声明
events = {}; // 声明组件之间的事件处理函数
}
</script>
组件
定义父页面,引入组件propData,并装载
components = {
pro: PropData
};
父页面
<template>
<view>
<pro :valueText.sync="valueText" @confirm.user="confirm"></pro>
</view>
</template>
<script>
import wepy from 'wepy'
// 引入组件
import PropData from '@/components/propData'
export default class mo extends wepy.page {
components = {
pro: PropData
};
data = {
valueText: '这是父组件传入子组件的值'
};
methods = {
confirm(data) {
console.log('子组件调用父组件的方法');
console.log(data);
}
};
onLoad() {
}
}
</script>
子组件
<template>
<view>
<text @tap="confirm">{{valueText}}</text>
</view>
</template>
<script>
import wepy from 'wepy'
export default class mo extends wepy.component {
props = {
valueText: String
};
data = {
};
methods = {
confirm() {
// 调用父组件的confirm方法,并传入data参数
let data = {
a: 1
}
this.$emit('confirm', data)
}
};
onLoad() {
}
}
</script>
公告
以后每月5、15、25号更新原创文章,内容不限,喜欢小编的可以点击关注,也可在下方评论留言,你喜欢什么内容,小编根据大家喜欢的内容尝试更新
点击查看更多内容
4人点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦