微信小程序開發(fā)中所碰到問題集錦

更新時間：2023年01月18日 15:02:04 作者：鍵盤上行走的猿

這篇文章主要介紹了微信小程序開發(fā)中所碰到問題集錦，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧

時間綁定bindtap的基礎用法

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

這里要注意的是data-xxx中的xxx需要小寫，否則獲取不到。

使用for循環(huán)的時候，這種方法是拿不到數據的。

需要使用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步）解決辦法：在頁面同級創(chuàng)建一個 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'

這是目前我的解決方法，有更好的解決方法請評論區(qū)附上謝謝??！

頁面代碼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結束

到此這篇關于微信小程序開發(fā)中所碰到問題集錦的文章就介紹到這了,更多相關小程序開發(fā)問題內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

JavaScript自定義事件介紹
很多DOM對象都有原生的事件支持，向div就有click、mouseover等事件，事件機制可以為類的設計帶來很大的靈活性，相信.net程序員深有體會。隨著web技術發(fā)展，使用JavaScript自定義對象愈發(fā)頻繁，讓自己創(chuàng)建的對象也有事件機制，通過事件對外通信，能夠極大提高開發(fā)效率
2013-08-08
基于JS實現類似支付寶支付密碼輸入框
這篇文章主要介紹了基于JS實現類似支付寶支付密碼輸入框功能，密碼框只準輸入數字且只可以輸入6位數字，非常不錯，具有參考借鑒價值,需要的朋友可以參考下
2016-09-09
JS算法題解旋轉數組方法示例
這篇文章主要為大家介紹了JS算法題解旋轉數組方法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-07-07
js 數組當前行添加數據方法詳解
這篇文章主要介紹了js 數組當前行添加數據方法詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-07-07
純JS焦點圖特效實例(可一個頁面多用)
下面小編就為大家?guī)硪黄僇S焦點圖特效實例(可一個頁面多用)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-12-12
深入淺出es6模板字符串
這篇文章主要介紹了深入淺出es6模板字符串,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
前端實現批量下載并打包成ZIP文件的步驟及示例
下載我相信很多小伙伴并不陌生,下載文件的形式也有很多,下面這篇文章主要給大家介紹了關于前端實現批量下載并打包成ZIP文件的步驟及示例,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-07-07
JavaScript實現動態(tài)數據可視化的示例詳解
動態(tài)數據可視化能夠將大量數據以直觀、生動的方式呈現,幫助用戶更好地理解和分析數據,本文主要為大家介紹了如何使用JavaScript實現這一功能,需要的可以參考下
2024-02-02
小程序卡片切換效果組件wxCardSwiper的實現
這篇文章主要介紹了小程序卡片切換效果組件wxCardSwiper的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-02-02
圖片連續(xù)不間斷滾動像冊
圖片連續(xù)不間斷滾動像冊...
2007-01-01