前端技术前沿3
2019-05-20 本文已影响2人
魔王哪吒
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
吹逼交流群
