uni_app 跳转到外部html5 的页面 (web-view) 的一些使用
1、不传参数的使用
<web-view url="./index.html"></web-view>
// 平台差异请关注 https://uniapp.dcloud.io/component/web-view?id=web-view
2、带有要传递的参数:(不多说直接上代码)
<template>
<view>
<web-view :src="url"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
url:'',//定义一个url变量来存取 url路径
userInfo: getApp().globalData.userInfo,
userName:'',
userGender:'',
createTime:'',
arr:[]
}
},
onLoad(option ){
this.arr = option.arr
this.init()
},
methods: {
init(){
this.userName = this.userInfo.userName;
this.userGender = this.userInfo.userGender;
this.createTime = this.userInfo.createTime;
if(this.userGender == 1){
this.userGender ="男";
}else if(this.userGender == 2){
this.userGender ="女";
}
this.url = "../../static/bollReport/report.html?arr="+encodeURIComponent(this.arr)+"&name="+encodeURIComponent(this.userName)+"&age="+encodeURIComponent(this.createTime)+"&gender="+encodeURIComponent(this.userGender);
}
}
}
</script>
注意: uniapp 的 web-view 的参数传递 的字必须要用 encodeURIComponent(str) 转码;
encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。
该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( ) 。
encodeURIComponent() 函数 与 encodeURI() 函数的区别之处,前者假定它的参数是 URI 的一部分(比如协议、主机名、路径或查询字符串)。因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。