wepy2.0 使用 部分總結

新項目，微信小程序嘗試將 wepy1.x 升級到 wepy2.0

代碼 可以很好地使用 vuex ，這點很贊

1、組件

①在 wepy1.0 中，同一個組件的狀態是 同樣的，但是在 wepy2.0 中，組件狀態都是分開來的

<view class="star-content">
   <!-- 所以可以使用 v-for 來 -->
   <view
     class="star-con"
     v-for="(value, name) in evaluatesArr"
     :key="name">
     <star
         class="star"
         :Starkey="name"
         :value="value"
         @selectStar="selectStar"></star>
    </view>
</view>

②可以看到，其 原本提供的 

$broadcast()、$emit()、$invoke()

僅僅留下了 和 vue 一樣 的 ，同時可以使用 

$emit()
this.$refs.

③父子組件雙向綁定的問題

在 wepy1 中，是提供了 .sync 和 twoway: true  的方式雙向綁定的，

但是在wepy2.0 中        相關 issue

④ 可以看到，wepy 的組件都是以 shadow dom 的形式展示的，

當想要給對應的 組件附加 格外的 style 的時候

需要給  先給其加上 display: block

2、內部的對象

 在 wepy2.0 中，事件對象都 被 wepy 包了一層

<radio-group class="radio-group" @change="radioChange">
      <label class="radio" v-for="dateTypes">
        <radio
          :value="item.value"
          :checked="item.checked"/>{{item.name}}
      </label>
    </radio-group>

radioChange(event) {
        console.log(event);
        // this.$emit('radioChange', $wx.detail)
      }

①可以看到 微信對象都被 包在了一個 $wx 對象裏面，可以使用 結構 直接獲取

②promisify 的使用

// 使用這個插件之後，可以 將所有的 微信內置方法變成 promise
import promisify  from '@wepy/use-promisify';

萬萬沒想到的是：  需要給 方法前面加一個 wx

async created () {
   const { userInfo } = await wepy.wx.getUserInfo();
   store.commit('SET_USERINFO', userInfo);
},

③globalData 

雖然可以使用 vuex 了，但是有的時候還是得使用 globaldata ，比如說在 app.wpy 的時候

this.$options.globalData.isShare = true

3、使用echarts

之所以單獨拉出來講，是因爲實在想要重點記一下

直接上代碼

<style lang="less">
.list-container{
  background-color: #f6f6f6;
  min-height: 100%;
  .main{
    width: 750rpx;
    .canvas1{
      display: block;
      width: 750rpx;
      height: 500rpx;
    }
  }
}

</style>
<template>
  <view class="list-container">
    <view
      class="main">
      <ec-canvas id="mychart-dom-pie" class="canvas1" canvas-id="mychart-pie"></ec-canvas> 
    </view>
  </view>
</template>

<script>
  import wepy from '@wepy/core';
  import * as echarts from './ec-canvas/echarts.js';

  wepy.component({
    data: {
      chart: null,
    },
    attached() {
      this.startInit()
    },
    methods: {
      startInit() {
        if (!this.chart) {
          this.chart = this.$wx.selectComponent('#mychart-dom-pie');
        }
        this.chart.init(this.initChart);
      },
      initChart(canvas, width, height) {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        canvas.setChart(chart);
        var option = {
          backgroundColor: "#ffffff",
          color: ["#37A2DA", "#32C5E9", "#67E0E3", "#91F2DE", "#FFDB5C", "#FF9F7F"],
          legend: {
            data:['直接訪問']
          },
          xAxis : [{
              type : 'category',
              data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              axisTick: {
                  alignWithLabel: true
              }
          }],
          yAxis : [
              {
                type : 'value'
              }
          ],
          series: [
              {
                  name:'直接訪問',
                  type:'bar',
                  barWidth: '60%',
                  data:[10, 52, 200, 334, 390, 330, 220]
              }
          ]
        };
        chart.setOption(option);
        return chart;
      }
    },
  });
</script>
<config>
{
  usingComponents: {
    'ec-canvas': './ec-canvas/ec-canvas'
  }
}
</config>