微信小程序wepy框架笔记小结

 // 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>

project├── pages| ├── index| | ├── index.json index 页面配置| | ├── index.js index 页面逻辑| | ├── index.wxml index 页面结构| | └── index.wxss index 页面样式表| └── log|  ├── log.json log 页面配置|  ├── log.wxml log 页面逻辑|  ├── log.js  log 页面结构|  └── log.wxss log 页面样式表├── app.js    小程序逻辑├── app.json   小程序公共设置└── app.wxss   小程序公共样式表

project└── src ├── pages | ├── index.wpy index 页面配置、结构、样式、逻辑 | └── log.wpy  log 页面配置、结构、样式、逻辑 └──app.wpy   小程序配置项（全局样式配置、声明钩子等）

npm install wepy-cli -g 

wepy new myproject

cd myproject

wepy build watch

├── node_modules├── src     代码编写的目录| ├── components   组件文件夹（非完整页面）| | ├── com_a.wpy  可复用组件 a| | └── com_b.wpy  可复用组件 b| ├── pages    页面文件夹（完整页面）| | ├── index.wpy  页面 index| | └── page.wpy  页面 page| └── app.wpy   小程序配置项（全局样式配置、声明钩子等）└── package.json   package 配置

・ 首先事件监听需要写在events属性下：``` bashimport wepy from 'wepy';export default class Com extends wepy.component { components = {}; data = {}; methods = {}; events = {  'some-event': (p1, p2, p3, $event) => {    console.log(`${this.name} receive ${$event.name} from ${$event.source.name}`);  } }; // Other properties}```・ $broadcast：父组件触发所有子组件事件・ $emit：子组件触发父组件事件・ $invoke：子组件触发子组件事件

<template> <!-- 以`<script>`脚本部分中所声明的组件ID为名命名自定义标签，从而在`<template>`模板部分中插入组件 --> <child></child></template><script> import wepy from 'wepy'; //引入组件文件 import Child from '../components/child'; export default class Index extends wepy.component {  //声明组件，分配组件id为child  components = {   child: Child  }; }</script>

<template> <!-- 注意，使用for属性，而不是使用wx:for属性 --> <repeat for="{{list}}" key="index" index="index" item="item">  <!-- 插入<script>脚本部分所声明的child组件，同时传入item -->  <child :item="item"></child> </repeat></template>

 data = {  a: 1 } // 计算属性aPlus，在脚本中可通过this.aPlus来引用，在模板中可通过{{ aPlus }}来插值 computed = {  aPlus () {   return this.a + 1  } }

data = {  num: 1 } // 监听器函数名必须跟需要被监听的data对象中的数值属性num同名， // 其参数中的newValue为数值属性改变后的新值，oldValue为改变前的旧值 watch = {  num (newValue, oldValue) {   console.log(`num value: ${oldValue} -> ${newValue}`)  } } // 每当被监听的数值属性num改变一次，对应的同名监听器函数num()就被自动调用执行一次 onLoad () {  setInterval(() => {   this.num++;   this.$apply();  }, 1000) }

<child title="mytitle"></child>// child.wpyprops = { title: String};onLoad () { console.log(this.title); // mytitle}

// parent.wpy<child :title="parentTitle" :syncTitle.sync="parentTitle" :twoWayTitle="parentTitle"></child>data = { parentTitle: 'p-title'};// child.wpyprops = { // 静态传值 title: String, // 父向子单向动态传值 syncTitle: {  type: String,  default: 'null' }, twoWayTitle: {  type: Number,  default: 50,  twoWay: true }};onLoad () { console.log(this.title); // p-title console.log(this.syncTitle); // p-title console.log(this.twoWayTitle); // 50 this.title = 'c-title'; console.log(this.$parent.parentTitle); // p-title. this.twoWayTitle = 60; this.$apply(); console.log(this.$parent.parentTitle); // 60. --- twoWay为true时，子组件props中的属性值改变时，会同时改变父组件对应的值 this.$parent.parentTitle = 'p-title-changed'; this.$parent.$apply(); console.log(this.title); // 'p-title'; console.log(this.syncTitle); // 'p-title-changed' --- 有.sync修饰符的props属性值，当在父组件中改变时，会同时改变子组件对应的值。}

this.$invoke('ComA', 'someMethod', 'someArgs');

this.$invoke('./../ComB/ComG', 'someMethod', 'someArgs');

 // index.wpy<template> <child @childFn.user="parentFn"></child></template><script> import wepy from 'wepy' import Child from '../components/child' export default class Index extends wepy.page {  components = {   child: Child  }  methods = {   parentFn (num, evt) {    console.log('parent received emit event, number is: ' + num)   }  } }</script>// child.wpy<template> <view @tap="tap">Click me</view></template><script> import wepy from 'wepy' export default class Child extends wepy.component {  methods = {   tap () {    console.log('child is clicked')    this.$emit('childFn', 100)   }  } }</script>

<view class="panel"> <slot name="title">默认标题</slot> <slot name="content">默认内容</slot></view>

<panel> <view slot="title">新的标题</view> <view slot="content">  <text>新的内容</text> </view></panel>

// mixins/test.jsimport 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'); } }}// pages/index.wpyimport 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. }}

// mixins/test.jsimport wepy from 'wepy';export default class TestMixin extends wepy.mixin { methods = {  tap () {   console.log('mix tap');  } }; onShow() {  console.log('mix onshow'); }}// pages/index.wpyimport wepy from 'wepy';import TestMixin from './mixins/test';export default class Index extends wepy.page { mixins = [TestMixin]; methods = {  tap () {   console.log('index tap');  } }; onShow() {  console.log('index onshow'); }}// index onshow// mix onshow// ----- when tap// index tap// mix tap

import wepy from 'wepy';export default class extends wepy.app { constructor () {  this.intercept('request', {   config (p) {    p.timestamp = +new Date();    return p;   },   success (p) {    console.log('request success');    return p;   },   fail (p) {    console.log('request error');    return p;   }  }); }}

this.title = 'this is title';

setTimeout(() => { this.title = 'this is title'; this.$apply();}, 3000);

// 官方<view data-id="{{index}}" data-title="wepy" data-other="otherparams" bindtap="tapName"> Click me! </view>Page({ tapName: function(event) { console.log(event.currentTarget.dataset.id)// output: 1 console.log(event.currentTarget.dataset.title)// output: wepy console.log(event.currentTarget.dataset.other)// output: otherparams }});// WePY 1.1.8以后的版本，只允许传string。<view bindtap="tapName({{index}}, 'wepy', 'otherparams')"> Click me! </view>methods: { tapName (id, title, other, event) {  console.log(id, title, other)// output: 1, wepy, otherparams }}

// 官方<view> {{ message }} </view>onLoad: function () { this.setData({message: 'hello world'});}// WePY<view> {{ message }} </view>onLoad () { this.message = 'hello world';}