美文网首页
wepy 与原生小程序得区别、不同

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

作者: 拾钱运 | 来源:发表于2020-11-10 17:07 被阅读0次

    规范方面:

    • 变量与方法尽量使用驼峰命名,避免使用开头 (因为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得时候

    相关文章

      网友评论

          本文标题:wepy 与原生小程序得区别、不同

          本文链接:https://www.haomeiwen.com/subject/bmujbktx.html