小程序开发常见问题(一)

339 阅读2分钟

这是我参与更文挑战的第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>