微信小程序之：wepy(二)

一大堆实例：人家的博客园

代码规范：

1、尽量使用驼峰命名，避免使用$开头，框架内建属性都已$开头，可以使用this直接调用。

2、入口文件、页面、组件后缀都为.wpy。

3、使用ES6语法开发。

4、使用Promise。启用Promise方法

5、事件替换：由原来的bindtap='click'替换为@tap='click'，catchtap='click'替换为@tap.stop='click'。更多@用法，自定义事件

6、事件传参优化@tap='click( {{ index }} )'。

7、功能标签<repeat>。

主要功能特性

开发模式转换

mvvm框架

原生代码和基于wepy代码的区别。和vue一样有绑定模板的数据列表、方法的集合、生命周期函数

支持组件化开发

可以引入外部的组件。

自定义组件:

组件：class Com extends wepy.component{  }

page：import引入、components调用、标签使用<com />

支持加载外部npm包

node_modules

单文件模式，目录结构清晰

page.wpy

默认使用babel编译，支持es6、es7

修改wepy.config.js配置文件，配置熟悉的babel环境开发。

实例化

import wepy from 'wepy';

// 声明一个App小程序实例
export default class MyAPP extends wepy.app {
}

// 声明一个Page页面实例
export default class IndexPage extends wepy.page {
}

// 声明一个Component组件实例
export default class MyComponent extends wepy.component {
}

可以通过this.$parent来访问app实例。

方法、数据声明

methods只可以声明wxml中bind、catch声明的方法，自定义方法customFunction与methods平级。

data中放置wxml中绑定的数据，自定义数据customData与data平级。

方法调用

this.methods.xxx来调用当前页面的方法。

this.$parent.methods.xxx调用公共的方法。

也可以封装JS调用

循环渲染

for={{ list }}  key='index'  index='index'  item='item'

conpoted计算属性

和vue一致。computed

watcher监听器

和vue一致；属性名，newV，oldV，

props传值

类型string

父组件传递给子组件：<child title='mytitle'></child>

子组件接收：props{ title:String } //键：类型

子组件调用：console.log(this.title)

.....