import wepy from 'wepy';

export default class MyPage extends wepy.page {
// export default class MyComponent extends wepy.component {
    customData = {}  // 自定義數據

    customFunction ()　{}  //自定義方法

    onLoad () {}  // 在Page和Component共用的生命周期函數

    onShow () {}  // 只在Page中存在的頁面生命周期函數

    config = {};  // 只在Page實例中存在的配置數據，對應于原生的page.json文件

    data = {};  // 頁面所需數據均需在這里聲明，可用于模板數據綁定

    components = {};  // 聲明頁面中所引用的組件，或聲明組件中所引用的子組件

    mixins = [];  // 聲明頁面所引用的Mixin實例

    computed = {};  // 聲明計算屬性（詳見后文介紹）

    watch = {};  // 聲明數據watcher（詳見后文介紹）

    methods = {};  // 聲明頁面wxml中標簽的事件處理函數。注意，此處只用于聲明頁面wxml中標簽的bind、catch事件，自定義方法需以自定義方法的方式聲明

    events = {};  // 聲明組件之間的事件處理函數
}

 1Vue
 3 beforeCreate
 4 created
 5 beforeMount
 6 mounted
 7 beforeUpdate
 8 updated
 9 activated
10 deactivated
11 beforeDestroy
12 destroyed

13 app 部分
15 onLaunch，初始化
16 onShow，當小程序啟動，或從后臺進入前臺顯示
17 onHide，當小程序從前臺進入后臺

18 page 部分
20 onLoad，監(jiān)聽頁面加載
21 onShow，監(jiān)聽頁面顯示
22 onReady，監(jiān)聽頁面初次渲染完成
23 onHide，監(jiān)聽頁面隱藏
24 onUnload，監(jiān)聽頁面卸載
25 onPullDownRefresh，監(jiān)聽用戶下拉動作
26 onReachBottom，頁面上拉觸底事件的處理函數
27 onShareAppMessage，用戶點擊右上角分享
28 onPageScroll，頁面滾動
29 onTabItemTap, 當前是 tab 頁時，點擊 tab 時觸發(fā) （mpvue 0.0.16 支持）

new Vue({
  data: {
    a: 1
  },
  created () {
    // `this` 指向 vm 實例
    console.log('a is: ' + this.a)
  },
  onShow () {
    // `this` 指向 vm 實例
    console.log('a is: ' + this.a, '小程序觸發(fā)的 onshow')
  }
})
// => "a is: 1"

class Clock extends Component {
  constructor (props) {
    super(props)
    this.state = { date: new Date() }
  }

  componentDidMount() {

  }

  componentWillUnmount() {

  }

  render () {
    return (
      <View>
        <Text>Hello, world!</Text>
        <Text>現在的時間是 {this.state.date.toLocaleTimeString()}.</Text>
      </View>
    )
  }
}

<template>
    <!-- 注意，使用for屬性，而不是使用wx:for屬性 -->
    <repeat for="{{list}}" key="index" index="index" item="item">
        <!-- 插入<script>腳本部分所聲明的child組件，同時傳入item -->
        <child :item="item"></child>
    </repeat>
</template>

<script>
    import wepy from 'wepy';
    // 引入child組件文件
    import Child from '../components/child';

    export default class Index extends wepy.component {
        components = {
            // 聲明頁面中要使用到的Child組件的ID為child
            child: Child
        }

        data = {
            list: [{id: 1, title: 'title1'}, {id: 2, title: 'title2'}]
        }
    }
</script>

<!-- 在這種嵌套循環(huán)的時候， index 和 itemIndex 這種索引是必須指定，且別名不能相同，正確的寫法如下 -->

<template>
    <ul v-for="(card, index) in list">
        <li v-for="(item, itemIndex) in card">
            {{item.value}}
        </li>
    </ul>
</template>

const list = this.state.list.map(l => {
  if (l.selected) {
    return <li>{l.text}</li>
  }
}).filter(React.isValidElement)

const list = this.state.list
  .filter(l => l.selected)
  .map(l => {
    return <li>{l.text}</li>
  })

// 事件映射表，左側為 WEB 事件，右側為 小程序 對應事件
{
    click: 'tap',
    touchstart: 'touchstart',
    touchmove: 'touchmove',
    touchcancel: 'touchcancel',
    touchend: 'touchend',
    tap: 'tap',
    longtap: 'longtap',
    input: 'input',
    change: 'change',
    submit: 'submit',
    blur: 'blur',
    focus: 'focus',
    reset: 'reset',
    confirm: 'confirm',
    columnchange: 'columnchange',
    linechange: 'linechange',
    error: 'error',
    scrolltoupper: 'scrolltoupper',
    scrolltolower: 'scrolltolower',
    scroll: 'scroll'
}

<button onclick="activateLasers">
  Activate Lasers
</button>

<button onClick={this.activateLasers}>
  Activate Lasers
</button>

class Toggle extends React.Component {
  constructor (props) {
    super(props)
    this.state = {isToggleOn: true}
  }

  onClick = (e) => {
    e.stopPropagation()
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }))
  }

  render () {
    return (
      <button onClick={this.onClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    )
  }
}

// 原生代碼:

wx.request({
    url: 'xxx',
    success: function (data) {
        console.log(data);
    }
});

// WePY 使用方式, 需要開啟 Promise 支持，參考開發(fā)規(guī)范章節(jié)
wepy.request('xxxx').then((d) => console.log(d));

// async/await 的使用方式, 需要開啟 Promise 和 async/await 支持，參考 WIKI
async function request () {
   let d = await wepy.request('xxxxx');
   console.log(d);
}

import wepy from 'wepy';

export default class extends wepy.app {
    constructor () {
        // this is not allowed before super()
        super();
        // 攔截request請求
        this.intercept('request', {
            // 發(fā)出請求時的回調函數
            config (p) {
                // 對所有request請求中的OBJECT參數對象統(tǒng)一附加時間戳屬性
                p.timestamp = +new Date();
                console.log('config request: ', p);
                // 必須返回OBJECT參數對象，否則無法發(fā)送請求到服務端
                return p;
            },

            // 請求成功后的回調函數
            success (p) {
                // 可以在這里對收到的響應數據對象進行加工處理
                console.log('request success: ', p);
                // 必須返回響應數據對象，否則后續(xù)無法對響應數據進行處理
                return p;
            },

            //請求失敗后的回調函數
            fail (p) {
                console.log('request fail: ', p);
                // 必須返回響應數據對象，否則后續(xù)無法對響應數據進行處理
                return p;
            },

            // 請求完成時的回調函數(請求成功或失敗都會被執(zhí)行)
            complete (p) {
                console.log('request complete: ', p);
            }
        });
    }
}

import Taro from '@tarojs/taro'

Taro.request({
  url: 'http://localhost:8080/test',
  data: {
    foo: 'foo',
    bar: 10
  },
  header: {
    'content-type': 'application/json'
  }
})
  .then(res => console.log(res.data))
復制代碼