简介
WePY框架对原生小程序的开发模式进行了再次封装，更贴近于MVVM架构模式。单文件模式，目录结构更清晰。 此外，支持加载外部npm包；默认使用babel编译，支持ES6/7的一些新特性。用户可以通过修改wepy.config.js(老版本使用.wepyrc)配置文件，配置自己熟悉的babel环境进行开发。默认开启使用了一些新的特性如promise、async/await。对小程序原生API进行promise处理，同时修复了一些原生API的缺陷。
WePY项目目录
原生小程序：
要求app实例必须有3个文件：app.js、app.json、app.wxss，
而page页面则一般有4个文件：page.js、page.json、page.wxml、page.wxss。
在WePY中：
则使用了单文件模式，将原生小程序app实例的3个文件统一为app.wpy；page页面的4个文件统一为page.wpy。
如下：
QQ.png
QQ.png
.wpy文件
可分为以下三大部分，各自对应一个标签：
1、脚本部分
即<script></script>标签中的内容，又可分为两个部分：
配置部分，即config对象，对应于原生的.json文件；
逻辑部分，除了config对象之外的部分，对应于原生的.js文件。
2、结构部分
即<template></template>模板部分，对应于原生的.wxml文件（类似html）
ps: 小程序入口文件app.wpy不需要<template></template>
3、样式部分
即<style></style>样式部分，对应于原生的.wxss文件。
以上3部分都支持lang和src属性，lang决定了其代码编译过程，src决定是否外联代码，存在src属性且有效时，会忽略内联代码。
各标签对应的lang值如下表所示：
QQ.png
小程序入口文件app.wpy
小程序实例继承自wepy.app类，包含一个config属性和其它全局属性、方法、事件。
示例：
<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>
页面.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>
页面实例继承自wepy.page类，该类的主要属性介绍如下：
QQ.png
在Page页面实例中，可以通过this.$parent来访问App实例。
组件com.wpy文件
示例
<template lang="wxml">
<view> </view>
</template>
<script>
import wepy from 'wepy';
export default class MyComponent extends wepy.component {
customData = {} // 自定义数据
customFunction () {} //自定义方法
onLoad () {} // 在Page和Component共用的生命周期函数
data = {}; // 页面所需数据均需在这里声明，可用于模板数据绑定
components = {}; // 声明页面中所引用的组件，或声明组件中所引用的子组件
mixins = []; // 声明页面所引用的Mixin实例
computed = {}; // 声明计算属性
watch = {}; // 声明数据watcher
methods = {}; // 声明页面wxml中标签的事件处理函数。
/* 注意，此处只用于声明页面wxml中标签的bind、catch事件，不能是自定义方法
customFunction () {
return 'sth.';
}
events = {}; // 声明组件之间的事件处理函数
}
</script>
<style lang="less">
/** less **/
</style>
组件实例继承自wepy.component类，其属性与页面属性大致相同。但不需要config配置，不需要页面特有的一些生命周期函数。
网友评论