准备工作（脚手架的搭建）
1、安装wepy脚手架
npm install wepy-cli -g
2、查看wepy版本（出现版本号说明wepy脚手架安装成功）
wepy -v
3、如果脚手架为1.70版本以上，可以先查看项目模板
wepy list
4、创建项目模板
① wepy init standard xxx(项目名称) 创建默认项目模板
② wepy init empty xxx(项目名称) 创建空的项目模板
5、每个项目模板创建完成时，都会出现以下几个问题
ESLint 代码规范性的检查插件，开启后将会对的你代码进行检查并提示
Redux 状态管理库 开启后，将会在你的项目里引入该插件
Use web transform feature in your project? 是否在你未来的项目里都使用同样的设置
6、cd xxx(项目名称) 进入到你的项目中
7、npm install 安装你配置文件里所需要的用到的插件
8、wepy build --watch 打包编译成小程序文件
该命令执行后，文件夹里会出现dist文件夹，使用小程序开发工具打开dist即可预览项目
ps：如果哪一步出错，可以 npm uninstall wepy-cli -g 全局卸载wepy脚手架后，重新安装
与小程序的区别
1、区分小程序 app.js 、page.js 、和 component.js
① export default class extends wepy.app {} // 小程序实例，相当于 app.js
② export default class Page extends wepy.page {} // 页面实例，相当于小程序中的 page.js
③ export default class Com extends wepy.component {} // 组件实例，相当于小程序中的 component.js
2、页面的区别
① 在wepy框架中的App实例中
<!-- 相当于小程序中的app.js -->
<script>
import wepy from 'wepy';
export default class extends wepy.app {
config = { //相当于小程序中的app.json
"pages":[
"pages/index/index"
],
"window":{
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
}
};
onLaunch() {
console.log(this);
}
}
</script>
<!-- 相当于小程序中的app.wxss -->
<style lang="less">
/** less **/
</style>② 在wepy框架中的Page实例中
<!-- 相当于小程序中的.wxml文件 -->
<template lang="wxml">
<view></view>
</template>
<!-- 相当于小程序中的.wxss文件 -->
<style lang="less">
</style>
<!-- 相当于小程序中的.js文件 -->
<script>
import wepy from 'wepy'; //每个文件都必须要引入
export default class Page extends wepy.page {
config = { //相当于小程序中的.json文件
navigationBarTitleText:"测试"
};
components = {}; //引入组件的时候需要在此处声明
data = {};
methods = {};
events = {};
onLoad() {};
// Other properties
}
</script>
3、事件绑定语法的优化
① 原 bindtap="click" 替换为 @tap="click"，原catchtap="click"替换为@tap.stop="click"。
② 事件传参使用优化后语法代替。 原bindtap="click" data-index={{index}}替换为@tap="click({{index}})"。
注意：此为优化写法，小程序原生语法的事件绑定方式依旧可以使用，但是建议使用优化语法
4、获取app实例
//此为小程序中获取app实例中全局变量的方法
const app = getApp();
let userId = app.globalData.userId;
//此为wepy框架中获取app实例中全局变量的方法
let userId = this.$parent.globalData.userId;5、methods的不同
① 在小程序中，所有的事件都可以放在methods中，并且可以相互调用
② 在WePY中的methods
a、只有页面标签中bind，catch事件才能放入methods中
b、自定义事件要放在methods外部
import wepy from 'wepy';
export default class MyComponent extends wepy.component {
methods = {
//页面标签绑定的事件
bindtap () {
let rst = this.commonFunc();
// doSomething
}
}
//普通自定义方法在methods对象外声明，与methods平级
customFunction () {
return 'sth.';
}
}c、methods中的事件调用
i、 methods中的事件调用methods中的事件
this.methods.xxxx()
ii、 methods中的事件调用自定义事件
this.xxxx()
iii、自定义事件调取methods中的事件
this.methods.xxxx()
6、$apply 的使用
异步函数中更新数据，必须手动调用$apply方法，才能触发脏数据检查流程（才能更新视图）
ps：异步函数指不阻塞下边代码运行的函数
组件的使用
1、创建组件页面
① 在src目录下创建components文件夹，在此文件夹内创建xxx.wpy文件
② 所有的组件文件都应放在该文件夹目录下，便于管理
③ 页面内的实例要继承 wepy.component 实例
import wepy from 'wepy'
export default class Com extends wepy.component {
components = {}; //组件内引入其他组件时候声明
props={} //接收父组件给到的参数
data = {}; //私有数据
onLoad(){}
methods = {};
// events对象中所声明的函数为用于监听组件之间的通信与交互事件的事件处理函数
events = {};
// Other properties
}2、组件页面的引用
① import xxx from "../components/child" 引入组件（此为示例，路径地址以自己项目为准）
② 在components对象中声明该组件 （声明后，即可使用该组件）
③ 如果页面中引入两个相同的组件但数据不同，那么需要将组件分别声明，否则只会渲染同一组数据
<template>
<!-- 以`<script>`脚本部分中所声明的组件ID为名命名自定义标签，从而在`<template>`模板部分中插入组件 -->
<child></child>
<child1></child1>
<!-- 此时child 和 child1 虽然用的是同一个组件，但是数据可以不相同 -->
</template>
<script>
import wepy from 'wepy';
//引入组件文件
import Child from '../components/child';
export default class Index extends wepy.page {
//声明组件
components = {
child: Child, //分配组件id为child
child1:Child //分配另一个id为child1
};
}
</script>组件的交互
1、父组件给子组件传值的三种方式（静态传值，动态传值，同步动态传值）
<child title="标题" :activityTitle.sync="activityTitle" :syncTitle="activityTitle"></child>
<!--
title="标题" 这种方式为静态传值，
:activityTitle="activityTitle" 此为动态传值，一般与.sync连用。加上.sync之后，父组件这边的值发生变化，子组件接收的值会随着一块变化
不加.sync，父组件值变化，子组件不会发生相应的变化
子组件中用props对象接收参数
props={
activityTitle:{
type:String, //声明参数类型，必须
default:"默认值",//设置参数的默认值，可省略
twoWay:true //twoWay参数为true 子父组件开启双向绑定，此时子父组件修改此值，双方都会发生变化。
}
}
-->
//js
data={
activityTitle:"动态传值",
syncTitle:"同步传值"
}2、$emit 的使用 （子组件与父组件的通信互动，由子组件发起）
① 在子组件中使用 this.$emit( "someEvent" , "aaa" , "bbb" , "ccc" )
② 在父组件中 event 对象中可以接收并触发参数为aaa,bbb,ccc的事件someEvent
③ 可以在父组件 event 对象中的 someEvent 事件中去响应并对父组件进行相应的操作
import wepy from 'wepy'
export default class Com extends wepy.component {
components = {};
data = {};
methods = {};
// events对象中所声明的函数为用于监听组件之间的通信与交互事件的事件处理函数
events = {
someEvent(p1, p2, p3){
console.log(p1,p2,p3) //aaa,bbb,ccc
//do Some things
}
};
}3、$broadcast 的使用（父组件与子组件之间的通信互动，由父组件发起，用法同 $emit）
① 在父组件中使用 this.$broadcast( "someEvent" , "aaa" , "bbb" , "ccc" )
② 在子组件中的 event 对象中可以接收并触发参数为aaa,bbb,ccc的事件someEvent
③ 可以在子组件的 event 对象中的 someEvent 事件中去响应并对子组件进行相应的操作
注意：与 通过 props 传值不同的地方是，props 只能通过onLoad接收参数并处理，使用 $broadcast 可以在任何时刻触发传值,并且包含在父组件里每一层级的组件都能接收并响应
4、$invoke 的使用 （可以直接调取子组件中的方法，父组件发起）
① this.$invoke( 'ComA' , 'someEvent' , "aaa" )
② ComA 为页面内声明的组件名称
③ 这个方法可以直接触发组件ComA中的someEvent事件
5、当需要循环组件的时候需要使用<repeat></repeat>标签（只有循环组件的情况下才使用repeat，其他的情况下的循环跟小程序保持一致）
理解以上，你就可以上手wepy项目了，如果有用，请点个小小的赞鼓励一下！
