微信小程序开发中所碰到问题集锦
更新时间：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结束
到此这篇关于微信小程序开发中所碰到问题集锦的文章就介绍到这了,更多相关小程序开发问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
很多DOM对象都有原生的事件支持，向div就有click、mouseover等事件，事件机制可以为类的设计带来很大的灵活性，相信.net程序员深有体会。随着web技术发展，使用JavaScript自定义对象愈发频繁，让自己创建的对象也有事件机制，通过事件对外通信，能够极大提高开发效率2013-08-08
这篇文章主要介绍了基于JS实现类似支付宝支付密码输入框功能，密码框只准输入数字且只可以输入6位数字，非常不错，具有参考借鉴价值,需要的朋友可以参考下2016-09-09
这篇文章主要为大家介绍了JS算法题解旋转数组方法示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要介绍了js 数组当前行添加数据方法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
下面小编就为大家带来一篇纯JS焦点图特效实例(可一个页面多用)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
这篇文章主要介绍了深入浅出es6模板字符串,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
下载我相信很多小伙伴并不陌生,下载文件的形式也有很多,下面这篇文章主要给大家介绍了关于前端实现批量下载并打包成ZIP文件的步骤及示例,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-07-07
动态数据可视化能够将大量数据以直观、生动的方式呈现,帮助用户更好地理解和分析数据,本文主要为大家介绍了如何使用JavaScript实现这一功能,需要的可以参考下2024-02-02
这篇文章主要介绍了小程序卡片切换效果组件wxCardSwiper的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
图片连续不间断滚动像册...2007-01-01
最新评论