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

网友投稿 404 2023-11-07

时间绑定bindtap的基础用法

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

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

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

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

需要使用currentTarget进行获取。

bindTap的事件对象接口类型

?
1
2
3
4
5
6
7
8
// WechatMiniprogram.TouchEvent
switchPage(e:WechatMiniprogram.TouchEvent){
const current = +e.detail
this.setData({
mapEnlarge:current===2,
pageType:current
})
},

自定义事件类型

WechatMiniprogram.CustomEvent

引用别的分包的组件

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

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

引入weui

?
1
2
3
4
5
6
//  app.json
{
"useExtendedLib": {
"weui": true
}
}

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

把ec-canvas放到项目中

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

?
1
2
3
"usingComponents": {
"ec-canvas": "/ec-canvas/ec-canvas"
}

在js文件中引入 xxx.js

?
1
import * as echarts from ../../ec-canvas/echarts;

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

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

?
1
2
import * as echarts from ./ec-canvas/echarts;
export default echarts

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

?
1
import echarts from ../middleware.js

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

页面代码xxx.wxml

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

xxx.js / xxx.ts

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
// 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结束

到此这篇关于微信小程序开

您可能感兴趣的文章:微信小程序开发之实现食堂点餐系统微信小程序开发之实现记账本微信小程序开发之实现心情记事本微信小程序组件化开发的实战步骤微信小程序开发WXML模板语法基础教程微信小程序云开发实现分页刷新获取数据微信小程序开发中组件的生命周期详细介绍微信小程序开发之实现一个跑步小程序

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 用法 实例
上一篇:微信小程序怎么赚钱？
下一篇:微信小程序开发实现的IP地址查询功能示例
相关文章

 发表评论

暂时没有评论，来抢沙发吧~