基于wepy开发

wepy.$instance.globalData // 获取全局变量的方法

setData（）不能直接操作数据

wx:if 是惰性渲染
wx:for="{{data}}";

wx:key有两种形式：

保留关键字：wx:key="*this"
字符串：wx:key="unique"

渲染层计算：{{a+b}} + {{c}} + {{b}}；
字符串拼接：{{'hello' + kobe}}
定义公共模板import 和 include：

<tamplate name='myTamplate'>
    <view>{{index}}:{{name}}</view>
</tamplate>
.
.
.
<tamplate is=''myTamplate"></tamplate> //引用

import有作用域概念，不能多重引用
include可以多重引用
bindTap不阻止事件冒泡；catchTab阻止事件冒泡
普通组件引用：（必须在.wpy文件里面）

<tamplate>
    <child></child>
</tamplate>
<script>
    import wepy from 'wepy'
    import Child from '../../components/child';
    export default class Index extends wepy.componten{
          compontens = {
               child:Child //注意组建id问题
          }
    }
</script>

组件渲染：for={{'list'}} 不是使用 wx:for 且使用wepy辅助标签

<repeat>
    <child :item='item'></child>
</repeat>

组件传值：静态：

<child title='mttitle'></child>

// child.wpy 
props={ title:String }
onLoad(){console.log(this.title)}

动态：

<child :title="parentTitle" :syncTitle.sync="parentTitle" :twoWayTitle="parentTitle"></child>
data = { parentTitle: 'p-title' };

// child.wpy
props = {
    // 静态传值   
 title: String,
    // 父向子单向动态传值   
 syncTitle: {
        type: String,
        default: 'null'   
     },
 twoWayTitle: {
       type: Number,
       default: 50,
       twoWay: true   // 是否子组件回传数据给父组件
 }
};

可以通过使用.sync修饰符来达到父组件数据绑定至子组件的效果，也可以通过设置子组件props的twoWay: true来达到子组件数据绑定至父组件的效果。那如果即使用.sync修饰符，同时子组件props中添加的twoWay: true时，就可以实现数据的双向绑定了。

计算属性：

computed = {     
//  是一个有返回值的函数，在<tamplate> 中使用{{name}}来绑定数据
     name （）{
        return this.name + 'Byant'
     }
}

watcher监听器：

data={num:1}
watch= {
  num (newvalue,oldvalue) {
        console.log(`num value: ${oldValue} -> ${newValue}`)
  }
}
onLoad () {
    setInterval(() => {
          this.num++;
          this.$apply();      
     },1000)
}

混合：mixins

import wepy from 'wepy';
export default class TestMixin extends wepy.mixin{   
 data = {
        foo: 'foo defined by page',
        bar: 'bar defined by testMix'   
 };
    methods: {
        tap () {
          console.log('mix tap');
        }
      }
}

import 引用文件

// pages/index.wpy
import wepy from 'wepy';
import TestMixin from './mixins/test';
export default class Index extends wepy.page{  
  data = {  foo: 'foo defined by index'    };
    mixins = [TestMixin ];
    onShow() {
        console.log(this.foo); // foo defined by index.    
        console.log(this.bar); // foo defined by testMix.   
     }
}

同一事件会先调用index事件后调用mixins

.....未完待续!

最后编辑于：2019.06.06 17:49:20