您的位置:首页 > 教程 > JavaScript > 微信小程序开发中所碰到问题集锦

微信小程序开发中所碰到问题集锦

2023-01-18 15:38:37 来源:易采站长站 作者:

时间绑定bindtap的基础用法viewid=tapTestdata-hi=WeChatbindtap=tapNameClickme!/view这里要注意的是data-xxx中的xxx需要...

时间绑定bindtap的基础用法

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

这里要注意的是data-xxx中的xxx需要小写,否则获取不到。

使用for循环的时候,这种方法是拿不到数据的。

需要使用currentTarget进行获取。

bindTap的事件对象接口类型

 // WechatMiniprogram.TouchEvent
 switchPage(e:WechatMiniprogram.TouchEvent){
    const current = +e.detail
    this.setData({
      mapEnlarge:current===2,
      pageType:current
    })
  },

自定义事件类型

WechatMiniprogram.CustomEvent

引用别的分包的组件

  //引用组件
  "usingComponents": {
    "SubmitBtn":"../../pagesLease/components/SubmitBtn/SubmitBtn"
  },
  // 占位组件
  "componentPlaceholder": {
    "SubmitBtn":"view"
  } 

wx.navigateBack()方法 返回并传参

let page = getCurrentPages() //获取当前页面栈
let prevPage = page[page.length - 2] //代表的就是上一页的实例,相当于this
prevPage.setData({
  portList:list // 可以操作上一页的数据
})

引入weui

//  app.json
{
  "useExtendedLib": {
    "weui": true
  }
}

微信小程序引入echarts 下载echarts微信版 地址:https://github.com/ecomfe/echarts-for-weixin

微信小程序开发中所碰到问题集锦

把ec-canvas放到项目中

需要使用echarts的页面引入 xxx.json

  "usingComponents": {
    "ec-canvas": "/ec-canvas/ec-canvas"
  }

在js文件中引入 xxx.js

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

注意:此处有个坑,如果使用ts的话,直接引入会报错(如果是js可以忽略这一步直接第5步)解决办法: 在页面同级创建一个 yyy.js(位置放哪可以随意)

微信小程序开发中所碰到问题集锦

在yyy.js中引入ec-canva并导出

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

然后在去xxx.ts中导入 yyy.js即可

import echarts from '../middleware.js'

这是目前我的解决方法,有更好的解决方法请评论区附上谢谢!!

页面代码xxx.wXML

<ec-canvas type="2d" id="myChart" canvas-id="myChart" ec="{{ec}}"></ec-canvas>

xxx.js / xxx.ts

// ts引入
import echarts from '../middleware.js'
// js引入
// import * as echarts from './ec-canvas/echarts';
let result = { x: ['2月', '3月', '4月', '5月', '6月', '7月'], y: [67, 68, 60, 56, 62, 76] };
function initChart(canvas: any, width: number, height: number, dpr: any) {
  const chart: any = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);
  let option = {
    tooltip: {
      show: false
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '4%',
      top:'15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        interval: 0,
        show: true
      },
      axisPointer: {
        show: true,
        type: 'shadow',
        label: {
          show: true,
          backgroundColor: 'rgba(0,0,0,.3)',
        },
        shadowStyle: {
          color: '#000',
          opacity:0.2
        }
      },
      axisTick: {  //y轴刻度线
        show: false
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.6)'
        }
      },
      data: result.x
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,.6)'
        }
      },
      splitLine: {
        show: false // 不显示网格线
      }
    },
    series: [{
      name: '总计',
      type: 'bar',
      stack: 'Total',
      data: result.y,
      itemStyle: {
        normal: {
          color: 'rgba(255,255,255,.5)',
          barBorderRadius: [5, 5, 0, 0],
          label: {
            show: true,
            position: 'top',
            formatter: "{c}" + "kg",
            textStyle: {
              color: 'rgba(255,255,255,.8)'
            }
          }
        }
      },
      barWidth: 28,
    },
    ],
  };
  chart.setOption(option);
  return chart;
}
Component({
  /**
   * 组件的初始数据
   */
  data: {
编程    result: [],
    ec: {
      onInit: initChart
    }
  }
})

到此引入echarts结束

到此这篇关于微信小程序开发中所碰到问题集锦的文章就介绍到这了,更多相关小程序开发问题内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

如有侵权,请发邮件到 [email protected]

相关文章

  • vue跳转页面的几种方法(推荐)

    vue跳转页面的几种方法(推荐)

    vue跳转不同页面的多种方法 1:router-link跳转 !-- 直接跳转 --router-link to='/testDemo' button点击跳转2/button/router-link !-- 带参数跳转 --router-link :to="{path:'testDemo',query:{setid:123456}}" button点击跳转
    2020-03-26
  • Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除

    Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除

    最近有使用vue+elementUI实现多图片上传的需求,遂做此纪录。 本次主要写一下前端的实现细节,至于后台以Multipart[ ]数组接收即可,不再赘述,网上一搜大把文章可供参考。 本次使用
    2020-03-23
  • 微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能

    微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能

    上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 view class='page_row' bindtap="suo" view class="search" view class="df search_arr" icon class="searchcion" size='20' type='search'/
    2020-03-10
  • 微信小程序实现canvas分享朋友圈海报

    微信小程序实现canvas分享朋友圈海报

    本文实例为大家分享了微信小程序分享朋友圈海报的具体代码,供大家参考,具体内容如下 思路:生成朋友圈海报放在公共文件,首先需要绘制canvas,点击分享朋友圈按钮,在手机屏幕
    2020-06-21
  • 详解ES6 Modules

    详解ES6 Modules

    当下, 我们几乎所有的项目都是基于 webpack、rollup 等构建工具进行开发的,模块化已经是常态。 我们对它并不陌生,今天,我们就再系统的回顾一下ES6的模块机制, 并总结下常用的操
    2020-07-04
  • Vue-router 报错NavigationDuplicated的解决方法

    Vue-router 报错NavigationDuplicated的解决方法

    版本:3.1.x 报错原因: 使用push()、replace()进行导航时,不能重复导航到当前路由。 解决办法: 方法1:在定义路由的文件中router/index.js const originalPush = VueRouter.prototype.pushVueRouter.protot
    2020-03-31
  • vue使用better-scroll实现滑动以及左右联动

    vue使用better-scroll实现滑动以及左右联动

    本文实例为大家分享了vue实现滑动以及左右联动效果的具体代码,供大家参考,具体内容如下 一、首先需要在项目中引入better-scroll 1. 在package.json 直接写入 "better-scroll":"^1.15.1" 版本以
    2020-06-30
  • Vue如何提升首屏加载速度实例解析

    Vue如何提升首屏加载速度实例解析

    在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响
    2020-06-25