微信小程序之:wepy(二)

时间:2022-11-04 23:17:44

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

代码规范:

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)

.....