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、使用promisify

关于使用 promisify， 在 2.0 版本中，

使用 上代码：

import promisify  from '@wepy/use-promisify';
wepy.use(promisify);

要注意的是，正如上面第二点所讲，要在对应方法前加 .wx， 上例子

// 使用 wx.request
wepy.wx.request(newOptions)
    .then(response => {
      return response.data
    })
    .catch(async e => {
    });

 

4、使用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>

需要注意的是：小程序的

scroll-view :

写是这样写，但是实际使用的时候 2019.8.20 当前

当有多个 echarts 图表，在ios 真机 是不能滚动的，而且 tooltip 失效

只能  view 来 使用 原始的 滚动

 

5、打包图片

找到根目录下的 wepy.config.js 文件

加入： 

module.exports = {
  ...
  static: ['./src/images'],
  ...
}

便可以完成对图片的打包