规范方面:
- 变量与方法尽量使用驼峰命名,避免使用定义得)
- 事件语法:
原生小程序:
bindtap=“click” data-index={{index}}
wepy :
@tap="clickName({{index}})"
原生小程序:
catchtap=“click”
wepy:
@tap.stop="click"
原生小程序
语法方面
- 动态赋值得属性 :attr=“value” 得方式
- .wpy 文件后缀
<template>
<view></view>
</template>
<script>
import wepy from 'wepy'
export default class className extends wepy.page{
}
</script>
<style lang="less">
</style>
三个标签分别都支持 lang src ,lang决定了其代码编译过程,src决定是否外联代码,存在src属性且有效时,会忽略内联代码例如
<style lang="less" src="page1.less">
</style>
<template lang="wxml" src="page1.wxml"></template>
<script></script>
组件循环渲染得差异
repeat 就像原生得block,可用也可不用
<repeat for="{{list}}" key="index" index="index" item="item">
<view>{{item.name}}</view>
</repeat>
vue中得methods 得差异
wepy中methods属性只能声明页面wxml标签得bind、catch事件,不能声明自定义方法,这与vue中得用法是不一致得。再wepy中,用户自定义得方法要与methods同级。
methods={
bindtap(){
let str=this.commonFunc()
}
}
customFunction(){
return 'sth'
}
默认使用babel编译,支持ES6/ES7得一些特性
promise 、async/await 等等
数据绑定机制
wepy
setTimeout(()=>{
this.title="this is title";
},3000) this.$apply();
原生小程序
setTimeout(()=>{
this.setData({
title:"this is title"
})
},3000)
this.$apply();
this.$apply()用的场景
- 异步更新数据得时候
- 手动刷新dom得时候
网友评论