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中存在的頁(yè)面生命周期函數(shù)
  config = {}; // 只在Page實(shí)例中存在的配置數(shù)據(jù)，對(duì)應(yīng)于原生的page.json文件
  data = {}; // 頁(yè)面所需數(shù)據(jù)均需在這里聲明，可用于模板數(shù)據(jù)綁定
  components = {}; // 聲明頁(yè)面中所引用的組件，或聲明組件中所引用的子組件
  mixins = []; // 聲明頁(yè)面所引用的Mixin實(shí)例
  computed = {}; // 聲明計(jì)算屬性（詳見后文介紹）
  watch = {}; // 聲明數(shù)據(jù)watcher（詳見后文介紹）
  methods = {}; // 聲明頁(yè)面wxml中標(biāo)簽的事件處理函數(shù)。注意，此處只用于聲明頁(yè)面wxml中標(biāo)簽的bind、catch事件，自定義方法需以自定義方法的方式聲明
  events = {}; // 聲明組件之間的事件處理函數(shù)
}

Vue
 beforeCreate
 created
 beforeMount
 mounted
 beforeUpdate
 updated
 activated
 deactivated
 beforeDestroy
 destroyed
 app 部分
 onLaunch，初始化
 onShow，當(dāng)小程序啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示
 onHide，當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái)
 page 部分
 onLoad，監(jiān)聽頁(yè)面加載
 onShow，監(jiān)聽頁(yè)面顯示
 onReady，監(jiān)聽頁(yè)面初次渲染完成
 onHide，監(jiān)聽頁(yè)面隱藏
 onUnload，監(jiān)聽頁(yè)面卸載
 onPullDownRefresh，監(jiān)聽用戶下拉動(dòng)作
 onReachBottom，頁(yè)面上拉觸底事件的處理函數(shù)
 onShareAppMessage，用戶點(diǎn)擊右上角分享
 onPageScroll，頁(yè)面滾動(dòng)
 onTabItemTap, 當(dāng)前是 tab 頁(yè)時(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 = {
      // 聲明頁(yè)面中要使用到的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ì)象，否則無(wú)法發(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ù)無(wú)法對(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ù)無(wú)法對(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))