wepy 父调用子组件方法_微信小程序wepy框架笔记小结

该框架是腾讯内部基于小程序的开发框架，设计思路基本参考VUE，开发模式和编码风 格上80%以上接近VUE

优势

组件化开发

小程序虽然有标签可以实现组件复用，但仅限于模板片段层面的复用，业务代码与交互事件 仍需在页面处理。无法实现组件化的松耦合与复用的效果。

wepy组件示例

// index.wpy

import wepy from 'wepy';

import List from '../components/list';

import Panel from '../components/panel';

import Counter from '../components/counter';

export default class Index extends wepy.page {

config = {

"navigationBarTitleText": "test"

};

components = {

panel: Panel,

counter1: Counter,

counter2: Counter,

list: List

};

data = {

myNum: 50,

syncNum: 100,

items: [1, 2, 3, 4]

}

}

支持加载外部NPM包

小程序较大的缺陷是不支持NPM包，导致无法直接使用大量优秀的开源内容，wepy在编译过程当中，会递归 遍历代码中的require然后将对应依赖文件从node_modules当中拷贝出来，并且修改require为相对路径， 从而实现对外部NPM包的支持

单文件模式，使得目录结构更加清晰

小程序官方目录结构要求app必须有三个文件app.json，app.js，app.wxss，页面有4个文件 index.json，index.js，index.wxml，index.wxss。而且文 件必须同名。 所以使用wepy开发前后开发目录对比如下：

官方DEMO：

project

├── pages

| ├── index

| | ├── index.json index 页面配置

| | ├── index.js index 页面逻辑

| | ├── index.wxml index 页面结构

| | └── index.wxss index 页面样式表

| └── log

| ├── log.json log 页面配置

| ├── log.wxml log 页面逻辑

| ├── log.js log 页面结构

| └── log.wxss log 页面样式表

├── app.js 小程序逻辑

├── app.json 小程序公共设置

└── app.wxss 小程序公共样式表

使用wepy框架后目录结构：

project

└── src

├── pages

| ├── index.wpy index 页面配置、结构、样式、逻辑

| └── log.wpy log 页面配置、结构、样式、逻辑

└──app.wpy 小程序配置项(全局样式配置、声明钩子等)

如何开发

快速起步

安装

npm install wepy-cli -g

创建项目

wepy new myproject

切换至项目目录

cd myproject

实时编译

wepy build –watch

目录结构 ├── dist 微信开发者工具指定的目录

├── node_modules

├── src 代码编写的目录

| ├── components 组件文件夹(非完整页面)

| | ├── com_a.wpy 可复用组件 a

| | └── com_b.wpy 可复用组件 b

| ├── pages 页面文件夹(完整页面)

| | ├── index.wpy 页面 index

| | └── page.wpy 页面 page

| └── app.wpy 小程序配置项(全局样式配置、声明钩子等)

└── package.json package 配置

wepy和VUE主要区别

1.二者均支持props、data、computed、components、methods、watch(wepy中是watcher)， 但wepy中的methods仅可用于页面事件绑定，其他自定义方法都要放在外层，而VUE中所有方法均放在 methods下

2.wepy中props传递需要加上.sync修饰符(类似VUE1.x)才能实现props动态更新，并且父组件再 变更传递给子组件props后要执行this.$apply()方法才能更新

3.wepy支持数据双向绑定，子组件在定义props时加上twoway:true属性值即可实现子组件修改父组 件数据

4.VUE2.x推荐使用eventBus方式进行组件通信，而在wepy中是通过broadcast，broadcast，emit，$invoke 三种方法实现通信

· 首先事件监听需要写在events属性下：

``` bas