Skip to content

Commit b54d92c

Browse files
author
jinfeiyang
committed
fix: 图片增加timeout参数延迟加载，兼容企业微信小程序bug
1 parent 91f44d9 commit b54d92c

File tree

5 files changed

+196
-154
lines changed

5 files changed

+196
-154
lines changed

‎dist/easy-canvas.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/weapp/easy-canvas.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/weapp/pages/index/index.js

Lines changed: 186 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
//index.js
22
//获取应用实例
3-
import ef from '../../easy-canvas.min'
3+
import ef from '../../easy-canvas.min.js'
44
const app = getApp()
55

66
Page({
@@ -32,173 +32,209 @@ Page({
3232
const containerWidth = 420;
3333
const containerHeight = 336;
3434

35+
const image1 = canvas.createImage()
36+
const image2 = canvas.createImage()
37+
image1.onload = function(){
38+
console.log('image1 onload')
39+
}
40+
image2.onload = function(){
41+
console.log('image2 onload')
42+
}
43+
3544
this.layer = ef.createLayer(ctx, { dpr, width: containerWidth, height: containerHeight, canvas })
3645
const node = ef.createElement(c => {
37-
return c(
38-
'view',
39-
{
40-
styles: {
41-
backgroundColor: 'rgba(116, 97, 255, 0.1)',
42-
width: containerWidth,
43-
height: containerHeight,
44-
padding: [20, 16],
45-
borderWidth: 1,
46-
borderColor: 'rgba(116, 97, 255, 0.11)',
47-
borderRadius: 8,
48-
},
49-
on: {
50-
click(e) {
51-
wx.showToast({
52-
title: '点击查看'
53-
})
46+
return c('view',{},[
47+
c(
48+
'view',
49+
{
50+
styles: {
51+
backgroundColor: 'rgba(116, 97, 255, 0.1)',
52+
width: containerWidth,
53+
height: containerHeight,
54+
padding: [20, 16],
55+
borderWidth: 1,
56+
borderColor: 'rgba(116, 97, 255, 0.11)',
57+
borderRadius: 8,
58+
},
59+
on: {
60+
click(e) {
61+
wx.showToast({
62+
title: '点击查看'
63+
})
64+
}
65+
},
66+
attrs:{
67+
id:'root'
5468
}
55-
}
56-
},
57-
[
58-
c(
59-
'view',
60-
{
61-
styles: {
62-
backgroundColor: '#fff',
63-
padding: [49, 15, 40, 15],
64-
display: 'flex',
65-
borderRadius: 16,
66-
borderWidth: 1,
67-
borderColor: 'rgba(231, 227, 255, 0.92)',
69+
},
70+
[
71+
c(
72+
'view',
73+
{
74+
styles: {
75+
backgroundColor: '#fff',
76+
padding: [49, 15, 40, 15],
77+
display: 'flex',
78+
borderRadius: 16,
79+
borderWidth: 1,
80+
borderColor: 'rgba(231, 227, 255, 0.92)',
81+
},
6882
},
69-
},
70-
[
71-
// c('image', {
72-
// styles: {
73-
// width: 160,
74-
// height: 148,
75-
// },
76-
// attrs: {
77-
// src: 'https://img1.dxycdn.com/2020/1116/323/6398386778207187443-2.png',
78-
// },
79-
// }),
80-
c(
81-
'view',
82-
{
83+
[
84+
c('image', {
8385
styles: {
84-
flex: 1,
85-
paddingLeft: 30,
86+
width: 160,
87+
height: 148,
8688
},
87-
},
88-
[
89-
c(
90-
'view',
91-
{
92-
styles: {
93-
lineHeight: 54,
94-
height: 54,
95-
},
89+
attrs: {
90+
src: 'https://img1.dxycdn.com/2020/1116/323/6398386778207187443-2.png',
91+
},
92+
on:{
93+
load(info,img){
94+
console.log('logo',info,img)
9695
},
97-
[
98-
c(
99-
'text',
100-
{
101-
styles: {
102-
lineHeight: 44,
103-
marginRight: 10,
104-
fontSize: 44,
105-
fontWeight: 700,
106-
color: '#fd5155',
107-
},
96+
error(error){
97+
console.log('logo',error)
98+
}
99+
}
100+
}),
101+
c(
102+
'view',
103+
{
104+
styles: {
105+
flex: 1,
106+
paddingLeft: 30,
107+
},
108+
},
109+
[
110+
c(
111+
'view',
112+
{
113+
styles: {
114+
lineHeight: 54,
115+
height: 54,
108116
},
109-
`¥12`,
110-
),
111-
],
112-
),
113-
c(
114-
'view',
115-
{
116-
styles: {
117-
lineHeight: 30,
118-
height: 30,
119-
display: 'flex',
120117
},
121-
},
122-
[
123-
c(
124-
'view',
125-
{
126-
styles: {
127-
width: 'auto',
128-
padding: [0, 12],
129-
lineHeight: 28,
130-
borderRadius: 15,
131-
borderColor: '#FD5155',
132-
borderWidth: 1,
133-
backgroundColor: 'rgba(253, 98, 102, 0.08)',
134-
marginRight: 8,
118+
[
119+
c(
120+
'text',
121+
{
122+
styles: {
123+
lineHeight: 44,
124+
marginRight: 10,
125+
fontSize: 44,
126+
fontWeight: 700,
127+
color: '#fd5155',
128+
},
135129
},
130+
`¥12`,
131+
),
132+
],
133+
),
134+
c(
135+
'view',
136+
{
137+
styles: {
138+
lineHeight: 30,
139+
height: 30,
140+
display: 'flex',
136141
},
137-
[
138-
c(
139-
'text',
140-
{
141-
styles: {
142-
fontSize: 20,
143-
fontWeight: 600,
144-
color: '#fd5155',
142+
},
143+
[
144+
c(
145+
'view',
146+
{
147+
styles: {
148+
width: 'auto',
149+
padding: [0, 12],
150+
lineHeight: 28,
151+
borderRadius: 15,
152+
borderColor: '#FD5155',
153+
borderWidth: 1,
154+
backgroundColor: 'rgba(253, 98, 102, 0.08)',
155+
marginRight: 8,
156+
},
157+
},
158+
[
159+
c(
160+
'text',
161+
{
162+
styles: {
163+
fontSize: 20,
164+
fontWeight: 600,
165+
color: '#fd5155',
166+
},
145167
},
168+
`4人团`,
169+
),
170+
],
171+
),
172+
c(
173+
'text',
174+
{
175+
styles: {
176+
fontSize: 22,
177+
color: '#9a9a9a',
178+
textDecoration: ['line-through'],
146179
},
147-
`4人团`,
148-
),
149-
],
150-
),
151-
c(
152-
'text',
153-
{
154-
styles: {
155-
fontSize: 22,
156-
color: '#9a9a9a',
157-
textDecoration: ['line-through'],
158180
},
181+
`¥111`,
182+
),
183+
],
184+
),
185+
c(
186+
'view',
187+
{
188+
styles: {
189+
padding: [0, 31],
190+
backgroundColor: '#fd6266',
191+
lineHeight: 54,
192+
borderRadius: 26,
193+
color: '#fff',
194+
fontSize: 24,
195+
marginTop: 28,
196+
textAlign: 'center',
197+
width: 'auto',
159198
},
160-
`¥111`,
161-
),
162-
],
163-
),
164-
c(
165-
'view',
166-
{
167-
styles: {
168-
padding: [0, 31],
169-
backgroundColor: '#fd6266',
170-
lineHeight: 54,
171-
borderRadius: 26,
172-
color: '#fff',
173-
fontSize: 24,
174-
marginTop: 28,
175-
textAlign: 'center',
176-
width: 'auto',
177-
},
178199

179-
},
180-
[c('text', {}, '点击查看')],
181-
),
182-
],
183-
),
184-
],
185-
),
186-
c(
187-
'view',
188-
{
189-
styles: {
190-
color: '#594eac',
191-
marginTop: 22,
192-
textAlign: 'center',
193-
fontSize: 24,
194-
opacity: 0.7,
195-
lineHeight: 24,
200+
},
201+
[c('text', {}, '点击查看')],
202+
),
203+
],
204+
),
205+
],
206+
),
207+
c(
208+
'view',
209+
{
210+
styles: {
211+
color: '#594eac',
212+
marginTop: 22,
213+
textAlign: 'center',
214+
fontSize: 24,
215+
opacity: 0.7,
216+
lineHeight: 24,
217+
},
196218
},
219+
[c('text', { styles: { lineHeight: 24 } }, '- copyright -')],
220+
),
221+
],
222+
),
223+
c('image',{
224+
attrs:{
225+
src:'https://myunonline-qyyx-1304736005.cos.ap-shanghai.myqcloud.com/mp-customer-images/logo-share.png',
226+
timeout:100
227+
},
228+
on:{
229+
load(info,img){
230+
console.log('title',info,img)
197231
},
198-
[c('text', { styles: { lineHeight: 24 } }, '- copyright -')],
199-
),
200-
],
201-
);
232+
error(error){
233+
console.log('title',error)
234+
}
235+
}
236+
})
237+
])
202238
});
203239
node.mount(this.layer)
204240
console.log(node)

‎lib/image.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,13 @@ export default class $Image extends View {
2727

2828
init() {
2929
super.init()
30-
this._loadImage()
30+
if(this.options && this.options.attrs && this.options.attrs.timeout){
31+
setTimeout(() => {
32+
this._loadImage()
33+
},this.options.attrs.timeout || 0)
34+
}else{
35+
this._loadImage()
36+
}
3137
}
3238

3339
_paint() {

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "easy-canvas-layout",
3-
"version": "0.1.12",
3+
"version": "0.1.13",
44
"description": "A canvas lib help to easy layout in canvas.",
55
"miniprogram": "lib",
66
"main": "./lib/index.js",

0 commit comments

Comments
 (0)