脚本部分介绍
小程序入口app.wpy
<script>
import wepy from 'wepy';
export default class extends wepy.app {
config = {
"pages":[
"pages/index/index"
],
"window":{
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
}
};
onLaunch() {
console.log(this);
}
}
</script>
<style lang="less">
/** less **/
</style>
入口文件app.wpy
中所声明的小程序实例继承自wepy.app
类,包含一个config
属性和其它全局属性、方法、事件。其中config
属性对应原生的app.json
文件,build编译时会根据config
属性自动生成app.json
文件,如果需要修改config
中的内容,请使用微信提供的相关API。
页面page.wpy
<script>
import wepy from 'wepy';
import Counter from '../components/counter';
export default class Page extends wepy.page {
config = {};
components = {counter1: Counter};
data = {};
methods = {};
events = {};
onLoad() {};
// Other properties
}
</script>
<template lang="wxml">
<view>
</view>
<counter1></counter1>
</template>
<style lang="less">
/** less **/
</style>
页面文件page.wpy
中所声明的页面实例继承自wepy.page
类,该类的主要属性介绍如下:
属性 | 说明 |
---|---|
config | 页面配置对象,对应于原生的page.json 文件,类似于app.wpy 中的config |
components | 页面组件列表对象,声明页面所引入的组件列表 |
data | 页面渲染数据对象,存放可用于页面模板绑定的渲染数据 |
methods | wxml事件处理函数对象,存放响应wxml中所捕获到的事件的函数,如bindtap 、bindchange |
events | WePY组件事件处理函数对象,存放响应组件之间通过$broadcast 、$emit 、$invoke 所传递的事件的函数 |
其它 | 小程序页面生命周期函数,如onLoad 、onReady 等,以及其它自定义的方法与属性 |
组件com.wpy
<template lang="wxml">
<view> </view>
</template>
<script>
import wepy from 'wepy';
export default class Com extends wepy.component {
components = {};
data = {};
methods = {};
events = {};
// Other properties
}
</script>
<style lang="less">
/** less **/
</style>
组件文件com.wpy
中所声明的组件实例继承自wepy.component
类,除了不需要config
配置以及页面特有的一些生命周期函数之外,其属性与页面属性大致相同。