import wepy from 'wepy';

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

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

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

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

    config = {};  // 只在Page實(shí)例中存在的配置數(shù)據(jù)，對(duì)應(yīng)于原生的page.json文件

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

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

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

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

    watch = {};  // 聲明數(shù)據(jù)watcher（詳見后文介紹）

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

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

 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，當(dāng)小程序啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示
17 onHide，當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái)

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)聽用戶下拉動(dòng)作
26 onReachBottom，頁面上拉觸底事件的處理函數(shù)
27 onShareAppMessage，用戶點(diǎn)擊右上角分享
28 onPageScroll，頁面滾動(dòng)
29 onTabItemTap, 當(dāng)前是 tab 頁時(shí)，點(diǎn)擊 tab 時(shí)觸發(fā) （mpvue 0.0.16 支持）

new Vue({
  data: {
    a: 1
  },
  created () {
    // `this` 指向 vm 實(shí)例
    console.log('a is: ' + this.a)
  },
  onShow () {
    // `this` 指向 vm 實(shí)例
    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>現(xiàn)在的時(shí)間是 {this.state.date.toLocaleTimeString()}.</Text>
      </View>
    )
  }
}

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

// 事件映射表，左側(cè)為 WEB 事件，右側(cè)為 小程序 對(duì)應(yīng)事件
{
    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請(qǐng)求
        this.intercept('request', {
            // 發(fā)出請(qǐng)求時(shí)的回調(diào)函數(shù)
            config (p) {
                // 對(duì)所有request請(qǐng)求中的OBJECT參數(shù)對(duì)象統(tǒng)一附加時(shí)間戳屬性
                p.timestamp = +new Date();
                console.log('config request: ', p);
                // 必須返回OBJECT參數(shù)對(duì)象，否則無法發(fā)送請(qǐng)求到服務(wù)端
                return p;
            },

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

            //請(qǐng)求失敗后的回調(diào)函數(shù)
            fail (p) {
                console.log('request fail: ', p);
                // 必須返回響應(yīng)數(shù)據(jù)對(duì)象，否則后續(xù)無法對(duì)響應(yīng)數(shù)據(jù)進(jìn)行處理
                return p;
            },

            // 請(qǐng)求完成時(shí)的回調(diào)函數(shù)(請(qǐng)求成功或失敗都會(huì)被執(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))
復(fù)制代碼