小程序开发常见问题（一）

这是我参与更文挑战的第15天，活动详情查看： 更文挑战 !

1. IOS上日期相关显示异常？👽

👻情景描述：IOS设备中日期显示异常。

👻解决方案：创建 Date 对象时没有使用new Date('2020-01-01')这样的写法，iOS 不支持以中划线分隔的日期格式，正确写法是new Date('2020/01/01')。

👻详细解释：stackoverflow.com/questions/1… ​

2. tab栏无法被覆盖？👽

👻情景描述：部分情景中tab栏无法被遮罩、动作面板覆盖。

👻解决方案：在唤起动作面板时将tab栏隐藏，关闭动作面板时再显示tab栏。

👻示例代码：

wx.hideTabBar();//隐藏
wx.showTabBar();//显示

3. 微信版echarts的使用方法？👽

👻情景描述：微信中使用echasrt。

👻示例代码：

// 1. 引入echarts包
// 前往 https://github.com/ecomfe/echarts-for-weixin 下载 ec-canvas 文件夹，复制进本地项目；

// 2. index.json中注册echarts组件
{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

//3. 页面中引入组件（VUE语法,此处省略异步数据请求 ）

<view class="score-card-content chart">
  <ec-canvas
     id="mychart-dom-pie"
     canvasId="mychart-pie"
     :ec="ec"
  ></ec-canvas>
</view>


import * as echarts from '../../../ec-canvas/echarts';

export default{
  data(){
    return {
      ec: {
        lazyLoad: true,
      },
    }
  },
  beforeUpdate() {
    this.initChart();
  },
  methods:{
    setOption(chart) {
      const option = {
        backgroundColor: 'transparent',
        color: [
          '#fd6a30',
          '#facc14',
          '#0083fd',
          '#14ae1c',
          '#a9a9a9',
          '#32C5E9',
          '#67E0E3',
          '#91F2DE',
          '#FFDB5C',
          '#FF9F7F',
        ],
        legend: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'middle',
          itemWidth: 17,
          itemHeight: 17,
          textStyle: {
            color: '#202020',
            fontSize: 10,
          },
          borderRadius: 0,
        },
        series: [
          {
            label: {
              normal: {
                fontSize: 12,
                formatter: '{d}%  {c}',
                color: '#202020',
              },
            },
            labelLine: {
              length: 6,
            },
            type: 'pie',
            center: ['40%', '50%'],
            radius: ['40%', '80%'],
            left: 'left',
            top: 'middle',
            data: this.canvasData,
          },
        ],
      };
      chart.setOption(option);
    },
    initChart() {
      const { page } = getCurrentInstance();
      let ecComponent = page.selectComponent('#mychart-dom-pie');

      ecComponent.init((canvas, width, height, dpr) => {
        // 获取组件的 canvas、width、height 后的回调函数
        // 在这里初始化图表
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr, // new
        });
        this.setOption(chart);

        // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
        this.echartInstance = chart;

        // 注意这里一定要返回 chart 实例，否则会影响事件处理等
        return chart;
      });
    },
  }
}

4. webView页面与小程序页面之间通信？👽

👻 情景描述：weView页面与小程序页面互相交换。

👻 解决方案：1: 小程序→web：通过url拼接参数完成。2: web→小程序：利用JSSDK与小程序API配合完成。

👻 示例代码：

<!--小程序-->
<view class="main">
   <web-view :src="`${DOMAIN}?id=${id}&userId=${userId}`"  :bindmessage="acceptMsg"></web-view>
</view>

<!--webView-->
<!--引入SDK-->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<!--通信-->
<script>
	wx.miniProgram.postMessage({ data: {foo: 'bar'} })
</script>

5. 父子组件会发生触摸穿透？👽

👻 情景描述：在子元素上进行触摸滑动操作时，父元素也会跟着滚动。

👻 解决方案：禁止子元素上的触摸事件冒泡。

👻 详细解释：微信小程序中的触摸事件是冒泡事件，会向父元素传递。当使用catch代替bind绑定事件时，会阻止原事件的冒泡行为。另外在vue语法框架下，也可使用.stop.prevent来解决。详见文档。

👻 示例代码：

<!--子元素-->
<view class="card" @touchmove.stop.prevent = "moveHandle">
<!--OR-->
<view class="card" catchtouchmove = "moveHandle">

<script>
···
  methods:{
    moveHandle(){
    	return;
    }
  }
···
</script>