文件
1.文件结构 文件结构类似VUE文件 扩展名为 .wpy
<template>
<!--渲染模板 对应wxml -->
</template>
<script>
// 脚本 对应 .js
</script>
<style>
/*样式 对应 wxss*/
</style>2.文件类型 文件类型声明与<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.page==
<script>
import wepy from 'wepy'
export default class com extends wepy.component {
customData = {} // 自定义数据
customFunction () {} //自定义方法
onLoad () {} // 在Page和Component共用的生命周期函数
config = {}; //只在Page实例中存在的配置数据，对应于原生的page.json文件
data = {}; // 页面所需数据均需在这里声明，可用于模板数据绑定
components = {}; // 声明页面中所引用的组件，或声明组件中所引用的子组件
mixins = []; // 声明页面所引用的Mixin实例
computed = {}; // 声明计算属性（详见后文介绍）
watch = {}; // 声明数据watcher（详见后文介绍）
methods = {}; // 声明页面wxml中标签的事件处理函数。注意，此处只用于声明页面wxml中标签的bind、catch事件，自定义方法需以自定义方法的方式声明
events = {}; // 声明组件之间的事件处理函数
}
</script>总结： 编译后上述三种类型对应生成各自的原生类型
json、 wxss、 js、 wxml 生成文件的文件名与wpy文件类名无关。类名仅对引用有关 例如类型为 Page的文件 index.wpy编译后会生成index.json、 index.wxss、 index.js、 index.wxml 类名可自行定义 约定 ==不要以$ _== 开头 类型声明与声明类的继承类型有关 app类 每个应用只能有一个 其他细节可阅读官方文档
组件
一个组件可以引用零到多个组件被引用的组件需要在宿主组件注册 组件的引用是静态类型的 也就是一个组件如果对另一个组件多次引用 如果需要隔离必须对每次的引用进行唯一标识
组件 mo.wpy
<template>
<view>
<text @tap="clickMe">{{text}}</text>
<text class="sub-text">{{domain.title}}</text>
</view>
</template>
<script>
import wepy from 'wepy'
// 引入组件
import PropData from '@/components/propData'
export default class mo extends wepy.component {
// 组件引用组件 如果PropData多次被引用而且希望相互隔离 key 要保持唯一
components = { pro: PropData};
props = {
d: String
};
data = {
text: 'this is demo'
};
methods = {
clickMe() {
this.text = ' click it '
}
};
onLoad() {
console.log('mo is loading now ')
console.log(this.d)
}
}
</script>
<style>
text {
color: brown;
}
.sub-text {
color: darkmagenta;
font-size: larger;
}
</style>
页面 test.wpy
<style>
view {
margin: 0 auto;
}
.view-class {
color: darkmagenta;
font-family: "Fira Code Retina";
text-align: -webkit-center;
text-transform: capitalize;
font-weight: bolder;
}
</style>
<script>
import meths from '@/js/charts.js'
import wepy from 'wepy'
// 组件引入
import Mo from '@/components/mo'
import PropData from '@/components/propData'
export default class Test extends wepy.page {
config = {};
// 组件注册 如果Mo多次被引用而且希望相互隔离 key 要保持唯一
components = {mo: Mo, pro: PropData};
data = {
list: [{id: 1, title: '第一'}, {id: 2, title: '第二'}, {id: 3, title: '第三'}],
valueText: '',
viewClass: 'view-class',
customData: {customText: '父组件参数'}
};
onLoad() {
let {title} = this.list[1]
console.table(this.list)
console.log(meths.sub(title))
meths.concatStr('hello', 'world', 'wepy')
};
methods = {
inputChange(e) {
this.valueText = e.detail.value
}
};
watch = {
valueText(newValue, oldValue) {
console.log(`num value: ${oldValue} -> ${newValue}`)
}
}
};
</script>
<template>
<view><input type="text" value="{{valueText}}" @input="inputChange"></view>
<view>{{valueText}}</view>
<repeat for="{{list}}" item="item">
<mo d="ssssssss" :domain="item"/>
</repeat>
<pro :n="viewClass" :valueText.sync="valueText"></pro>
</template>
总结 其实非常类似于VUE 生命周期函数 类似于vue 的钩子函数 如果熟悉VUE的方式 这个应该很容易上手 当然与VUE还有一些不同 可对官方文档进行学习 第三章将对 数据绑定交互进行研究和简单的分析
原文发布时间为：2018年06月20日
原文作者：NotFound403
本文来源：开源中国 如需转载请联系原作者
