脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 小程序开发问题

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

 更新时间：2023年01月18日 15:02:04   作者：键盘上行走的猿  
这篇文章主要介绍了微信小程序开发中所碰到问题集锦，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧

时间绑定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结束

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

您可能感兴趣的文章:

相关文章

  • Javascript实现关闭广告效果

    Javascript实现关闭广告效果

    这篇文章主要为大家详细介绍了Javascript实现关闭广告效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-01-01
  • js实现简洁的TAB滑动门效果代码

    js实现简洁的TAB滑动门效果代码

    这篇文章主要介绍了js实现简洁的TAB滑动门效果代码,通过简单的JavaScript自定义函数动态遍历页面元素实现tab滑动切换的功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • 小程序兼容安卓和IOS数据处理问题及坑

    小程序兼容安卓和IOS数据处理问题及坑

    这篇文章主要介绍了小程序兼容安卓和IOS数据处理问题及坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • JavaScript返回网页中锚点数目的方法

    JavaScript返回网页中锚点数目的方法

    这篇文章主要介绍了JavaScript返回网页中锚点数目的方法,涉及javascript使用document.anchors获取锚点数目的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • 在element-ui的el-tree组件中用render函数生成el-button的实例代码

    在element-ui的el-tree组件中用render函数生成el-button的实例代码

    这篇文章主要介绍了在element-ui的el-tree组件中用render函数生成el-button 的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • 浅谈setTimeout 与 setInterval

    浅谈setTimeout 与 setInterval

    实际上，setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。不过这两个函数还是有区别的
    2015-06-06
  • 详解JavaScript跨域总结与解决办法

    详解JavaScript跨域总结与解决办法

    本篇文章主要介绍了JavaScript跨域，详细的总结了什么是跨域，并介绍了几种解决办法，感兴趣的小伙伴们可以参考一下。
    2016-10-10
  • javascript中2个感叹号的用法实例详解

    javascript中2个感叹号的用法实例详解

    这篇文章主要介绍了javascript中2个感叹号的用法,并用大量的实例讲述了!!的常见应用情况,是非常实用的技巧,需要的朋友可以参考下
    2014-09-09
  • JS数组返回去重后数据的方法解析

    JS数组返回去重后数据的方法解析

    本文主要分享了Js数组返回去重后的数据的实例代码。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • 使用PDFJS遇到的坑及解决办法记录

    使用PDFJS遇到的坑及解决办法记录

    PDF.js是由Mozilla支持的基于HTML5的PDF查看器,可以在web上解析和呈现PDF文件,它支持内容检索、页面跳转、文件打印等功能,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09

最新评论