代码规范:
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)
.....