微信小程序使用web-view嵌入界面, 界面中图片出不来解决方案

坑一:空白界面

1
2
3

<web-view src="{{url}}">
</web-view>

如上代码所示,url 默认为’’ ,界面进来是空白界面
原因:web-view进来按照url默认值加载后不会再刷新界面,即使url赋值后也不会出来

添加判断语句,修改如下:

1
2
3
4
<block wx:if="{{url != ''}}">
<web-view src="{{url}}">
</web-view>
</block>

坑二:图片地址当参数传如界面,图片出不来

js代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
page({
data: {
url: ''
}
onLoad: function() {
// 获取到的photoUrl
var photoUrl = 'https://xxxx';
// 作为参数进行转码
var photoUrlParam = encodeURIComponent(photoUrl);
//给url动态赋值
this.setData({
url: "https://www.xxxxxx?photoUrl="+ photoUrlParam
})
}
})

wxml代码如下:

1
2
3
4
5
<block wx:if="{{url != ''}}">
<web-view src="{{url}}">
</web-view>
</block>

问题:
如上,图片作为参数传界面后,浏览器能打开,小程序中图片不显示

解决:
动态传参的方式

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
page({
data: {
photoUrlParam: ''
}
onLoad: function() {
// 获取到的photoUrl
var photoUrl = 'https://xxxx';
// 作为参数进行转码
var photoUrlParam = encodeURIComponent(photoUrl);
//给url动态赋值
this.setData({
photoUrlParam: photoUrlParam
})
}
})

wxml代码如下:

1
2
3
<web-view src="https://www.xxxxxx?photoUrl={{photoUrlParam}}">
</web-view>