前端技术前沿3

wepy框架

全局安装wepy： npm i -g wepy-cli

初始化项目： wepy init standard myproject

切换到项目目录： cd myproject

安装依赖: npm install

wepy框架是腾讯内部基于小程序的开发框架

/index.js

//获取应用实例

var app = getApp()

Page({

   data: {

       motto: 'Hello World',

       userInfo: {}

   },

   //事件处理函数

   bindViewTap: function() {

       console.log('button clicked')

   },

   onLoad: function () {

       console.log('onLoad')

   }

})

基于wepy的实现

import wepy from 'wepy';

 

export default class Index extends wepy.page {

 

   data = {

       motto: 'Hello World',

       userInfo: {}

   };

   methods = {

       bindViewTap () {

           console.log('button clicked');

       }

   };

   onLoad() {

       console.log('onLoad');

   };

}

// index.wpy

<template>

   <view>

       <panel>

           <h1 slot="title"></h1>

       </panel>

       <counter1 :num="myNum"></counter1>

       <counter2 :num.sync="syncNum"></counter2>

       <list :item="items"></list>

   </view>

</template>

<script>

import wepy from 'wepy';

import List from '../components/list';

import Panel from '../components/panel';

import Counter from '../components/counter';

 

export default class Index extends wepy.page {

 

   config = {

       "navigationBarTitleText": "test"

   };

   components = {

       panel: Panel,

       counter1: Counter,

       counter2: Counter,

       list: List

   };

   data = {

       myNum: 50,

       syncNum: 100,

       items: [1, 2, 3, 4]

   }

}

</script>

image.png

wepy中的生命周期
onLoad，onReady，onShow，onPrefetch等，其中onReady，onShow，onPrefetch只有wepy.page中才有用。

官方案例：
// parent.wpy
<child :title = 'parentTitle' :syncTitle.sync = 'parentTitle' :twoWayTitle = 'parentTitle'></child>
在script中的设置
data = {
    parentTitle: 'p-title'
}

// child.wpy
props = {
    // 静态传值
    title: String,

    // 父向子单向动态传值
    syncTitle: {
        type: String,
        default: 'null'
    },

    twoWayTitle: {
        type: Number,
        default: 'nothing',
        twoWay: true
    }
};

onLoad () {
    console.log(this.title); // p-title
    console.log(this.syncTitle); // p-title
    console.log(this.twoWayTitle); // p-title

    this.title = 'c-title';
    console.log(this.$parent.parentTitle); // p-title.
    this.twoWayTitle = 'two-way-title';
    this.$apply();
    console.log(this.$parent.parentTitle); // two-way-title.  --- twoWay为true时，子组件props中的属性值改变时，会同时改变父组件对应的值
    this.$parent.parentTitle = 'p-title-changed';
    this.$parent.$apply();
    console.log(this.title); // 'c-title';
    console.log(this.syncTitle); // 'p-title-changed' --- 有.sync修饰符的props属性值，当在父组件中改变时，会同时改变子组件对应的值。
}

parent.wpy
<template>
    <view>
        <children @childFun.user = 'someEvent'></children>
    </view>
</template>
<script>
export default class Parent extends wepy.page{
    data = {
        name: 'parent'
    }
    events = {
        'some-event': (p1, p2, p3, $event) => {
            //  输出为'parent receive some-event children',$event.source指向子组件。
            console.log(`${this.name} receive ${$event.name} from ${$event.source.name}`)
        }
    }
    onLoad () {
            this.$broadcast('getIndex', 1, 4)
    }
    methods = {
        someEvent (...p) {
            // 输出[1, 2, 3, _class]。
            console.log(p)
        }
    }
}
</script>

children.wpy
<script>
export default class Parent extends wepy.page{
    data = {
        name: 'children'
    }
    onLoad () {
        // this.$emit('some-event', 1, 2, 3)
        // 触发组件中的自定义事件
        this.$emit('childFun', 1, 2, 3)
    }
    events = {
        'getIndex': (...p) => {
            console.log(p)        // 输出[1, 4]
        }
    }
}
在父组件中给子组件添加属性@childFun.user = 'someEvent'后，在子组件中修改触发条件this.$emit('childFun', 1, 2, 3)


//$invoke
父组件向子组件发送事件：
使用import导入子组件后，在使用时可以直接通过
this.$invoke('子组件，必须要单引号括起来', '子组件方法名称',  param1,param2,param3.......);
子组件间发送事件：
this.$invoke('子组件的相对路径', '子组件方法名称',  param1,param2,param3.......);
子组件的相对路径的理解： 当设置'./'即当前组件，'../'为父组件，以此类推。它可以指定向哪一个组件分发内容，但只适用于简单的组件树结构，复杂的结构考虑使用redux。

// mixin.js
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 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); // bar defined by testMix
    }
}

// mixin.js
export default class TestMixin extends wepy.mixin {
    onLoad () {
        console.log(2222)
    }
}
....
import wepy from 'wepy';
import TestMixin from './mixins/test';
export default class Index extends wepy.page {
    data = {
        foo: 'foo defined by index'
    };
    mixins = [TestMixin ];
    onLoad() {
        console.log(11111); 
    }
}
结果打印为： 
2222
11111

wxs的使用

// 设置一个过滤器对超过10000的数字进行转化
module.exports = {
  filter: function (num) {
    if (num < 10000) {
      return num
    } else {
      var reNum = (num / 10000).toFixed(1) 
      return reNum + '万'
    }
  }
}

// template中使用过滤器，mywxs对应下方wxs中设置的key值
<view>{{mywxs.filter(mItem.playerCount)}}人</view>
.....
import mywxs from '@/wxs/fixed.wxs'
export default class Index extends wepy.page{
......
wxs = {
    mywxs: mywxs
}
.....
}

---

请点赞！因为你的鼓励是我写作的最大动力！

官方微信公众号

吹逼交流群：711613774

吹逼交流群