wepy 与原生小程序得区别、不同

规范方面：

• 变量与方法尽量使用驼峰命名，避免使用定义得）
• 事件语法：

原生小程序：

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得时候